v-model 收集表单信息
-
checkbox
1，单个复选框
复选框选中为true，否则为false
模型变量属性值为布尔类型
<body>
<div><input type="checkbox" v-model="isAgree">{
{
isAgree ? '同意':'不同意' }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm=new Vue({
el:'div',data:{
isAgree:'true'}})
</script>
</body>
2，多个复选框，例如选择兴趣爱好的时候，这个时候复选框里面要有一个value，模型里面要有一个数组去接收选中的值
<body>
<div>爱好：<input type="checkbox" value="basketball" v-model="hobby">篮球<input type="checkbox" value="football" v-model="hobby">足球<input type="checkbox" value="swimming" v-model="hobby">游泳
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm=new Vue({
el:'div',data:{
hobby:[]}})
</script>
</body>
-
radio单选框
1 radio里面要有value值，因为选中是可以获取它的value值
2，模型变量是一个普通字符串，就是其中一个value值
<body>
<div>性别：<input type="radio" value="male" v-model="gender">男<input type="radio" value="female" v-model="gender">女
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm=new Vue({
el:'div',data:{
gender:'male'}})
</script>
</body>
-
select 下拉框
1，只能选中单个选项，
关于value值：有value:收集value值
没有value值，收集标签之间的数据
<body>
<p><select name="" id="" v-model="area"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
el: "p",data: {
area:"北京"}})
</script>
</body>
2，可选多个选项
模型变量是一个数组，去接收选中的值
<body>
<p><select name="" id="" v-model="area" multiple><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
el: "p",data: {
area:[]}})
</script>
</body>
v-bind 给标签的属性进行值的设定，简写为：
-
img标签的src属性
1，直接写插值表达式，会把引号里面的内容当成地址尝试进行网络请求
< img src=" {
{ logo }}"/ >
正确写法
html:
注意：1，引号里面不要再写插值表达式了
-------- 2，如果用v-bind ，非要在src里面写网址的话，要给网址加上引号，而且外双内单，外单内双
< img v-bind:src=" logo "/ >
或者
<img v-bind:src="'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1572080530&di=e6d15890a33a96d1acfda455dafbd2d5&src=http://www.krabiandamantour.com/images/krabitour/4islands-koh-hong-by-speedboat/koh-tup-(tup-Island)-talay-waek-krabi-Islands-1.jpg '">
js:
<script>var vm = new Vue({
el: "p",data: {
logo:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1572080530&di=e6d15890a33a96d1acfda455dafbd2d5&src=http://www.krabiandamantour.com/images/krabitour/4islands-koh-hong-by-speedboat/koh-tup-(tup-Island)-talay-waek-krabi-Islands-1.jpg'}})
</script>-
设置class类名
**设置单个类名**
<p v-bind:class="class1"></p>
js:
<script>var vm = new Vue({
el: "p",data: {
class1:'a'}})
</script>
**设置多个类名**
html：标签里面class中有一个数组去接收所有类名
<p v-bind:class="[class1,class2,class3]"></p>
有多个class名还有一个字符串：class会合并
<p v-bind:class="[class1,class2,class3，'d' ]"></p>//有a,b,c,d四个class名
本身有class属性，再绑定别的class可以合并
<p class="d" v-bind:class="[class1,class2,class3]"></p>//有d,a,b,c四个class名
js：这里写多个class名
data: {
class1:'a',class2:'b',class3:'c'}
-
设置行内样式style
设置单个style属性：模型变量里面style可以为字符串，也可以为对象
<p v-bind:style="style1"></p><p v-bind:style="style2"></p>
设置多个style属性:模型变量必须为对象，style里面有一个数组
<p v-bind:style="[style2,style3]"></p>
font-size等用中横线分割的属性有两种方法书写，
1.冒号两边的属性和属性值都用引号包起来2.使用小驼峰命名属性名
<p v-bind:style="style4"></p><p v-bind:style=" style5"></p>
直接在标签里面写，要写在对象里面，而且不同属性用逗号隔开
<p v-bind:style="{fontSize:'30px',lineHeight:'18px'}"></p>
js：
data: {
style1:'bacground:#ccc',style2:{
background:"red"},style3:{
border:"1px solid #ccc"},style4:{
'font-size':'18px'},style5:{
fontSize:'18px'}}
v-on 事件绑定，简写为@
-
原生js中事件书写函数调用是要写括号的
<button onclick="fn()">点击</button>//函数调用是要写括号的
-
v-on 中
- 函数调用可以不写括号，也可以写
- 使用v-on 不要再事情前面加上on
<button v-on:click="fn1">点我</button><button v-on:click="fn2()">点我</button>
-
加括号和不加括号的区别
+加括号：需要手动添加$event 事件源，$event是vuejs帮我们封装好的事件源+不加括号：会自动给回调函数传递一个事件源如何取舍？当需要传参时选择加括号的，不需要传参时选择不加括号的 -
v-on 调用时需要传参
+1,…rest是剩余运算符，可以将所传参数以数组的形式展开
+2, 剩余运算符只能写在最后面
<button v-on:click="fn1">点我</button>
<button v-on:click="fn2($event,'a','b')">点我</button>
js：
methods:{
fn1(event){
console.log(event)//MouseEvent {isTrusted: true, screenX: 85, screenY: 103, clientX: 85, clientY: 32, …}},fn2(event,...rest){
console.log(event)//MouseEvent {isTrusted: true, screenX: 85, screenY: 103, clientX: 85, clientY: 32, …}console.log(rest)//["a", "b"]}}