一、 v-bind 变量绑定
1.使用场景：
动态绑定属性的值
2.使用方法：
属性前添加v-bind:即可 v-bind:src='变量名'
语法糖写法：
:src='变量名'
注意:
当给一些特殊属性绑定时（比如disabled属性，不需要设置值），则可以设置true/false去控制是否有这个属性；
<button :disabled="true">AA</button>
当设置为true时，真实渲染出来
<button data-v-35032430="" disabled="disabled">AA</button>
当设置为false时，真实渲染出来
<button data-v-35032430="">AA</button>
3.进阶使用：绑定的不只是变量，还可以绑定obj
典型的用法一：对class进行动态绑定
:class="{classA:变量A, classB:变量B}"
在data中添加变量A 、变量B , 其值为bool，这样就可以通过设置A、B的bool值去控制class中绑定的是A 或 B 或者A B 同时绑定
还可以给class绑定数组
:class="['类名A','类名A']" 数组中这里是字符串，含义是直接绑定这两个类名。
:class="[类名A,类名A]" 数组中这里是变量名，含义是根据变量中的内容绑定（变量内容应是字符串）。
这里其实也可以写成函数比如
:class="getClasses()" , 这里的()不能省，函数的返回值就是上面的内容
典型的用法二：对style进行动态绑定
:style="{font-size:变量A, color:变量B}"
和绑定class类似，此处不再赘述
注意点：font-size:变量A,这里的变量A 不能带引号，否则Vue框架会直接当做值去使用而不是变量
二、 v-for 循环
<ul>
<li v-for:"item in sources" >{{item}}</li>
</ul>
v-for:"item in sources"中的 item 指代在 sources中的一个元素， 可以认为是一个变量声明，可以被后面使用，sources 是 data 中的一个数组
{{item}}中的 item 即是v-for中的 item
也可以写这样<li v-for:"(item, index)in sources" >{{item}}</li> index 是循环元素下标值
三、 v-on 事件绑定
在Vue中，所有的Html事件都改为去掉on的形式，比如onclick在Vue的事件绑定中就需要使用click
1.无传参
<button v-on:click="count++">改变data</button>
<button v-on:click="run">调用函数</button>
<button @click="run">语法糖</button>
三种写法都是绑定事件，第一种是直接写表达式（此处为操作变量），第二种调用方法，第三种语法糖的写法。
当事件监且不需要传参的时候函数后的()可以省略
2.传参
<button v-on:click="count++">改变data</button>
<button v-on:click="run">调用函数</button>
<button @click="run">语法糖</button>
<button @click="eat('第一个参数',$event)">语法糖</button>
methods:{
run(param1){
console.log(param1);
},
eat(param1,param2){
console.log(param1,param2);
},
},
注意：
1.当监听方法本身不传参，或者使用省略()的写法，此时若监听方法有参数，则会默认把enevt对象作为第一个参数传入。
2.当同时需要参数和event对象时，使用$event获取event对象传入即可。
3.参数中如果是基本类型或者字符串则会把这个当成参数传入，如果写一个param（注意没有引号），就会去data或者methods中去找这个变量对应的值/方法作为参数传入。
3.事件监听修饰符
1>.stop修饰符
用阻止事件冒泡
<button @click.stop="run">按钮</button>
这样子组件有点击事件则点击父组件不会有冒泡响应
2>.prevent修饰符
用于阻止默认事件
<form action="http://XXXX">
<input type="submit" value="确认" @click.prevent="check">
</form>
点击此input会默认提交数据使用.prevent可以阻止此操作并调用方法由用户自己去处理
3>.{keyCode | keyAlias}修饰符
结合keyup等事件监听键盘某个按键的点击
<input @keyup.enter='clickenter'>
<input @keyup.13='clickenter'>
13是keyCode，enter是keyAlias(别名)，传两个一样的效果，查键对应的值即可。
4>.native修饰符
监听自定义组件的点击
<mycompoent @click.native='click'>
<mycompoent/>
对于自定义组件只有加上.native才能监听到点击
5>.once修饰符
触发一次
<button @click.once="run">按钮</button>
只有第一次点击才触发事件
四、 v-if / v-else / v-else-if 条件显示
用于条件显示组件
<div v-if="isShow">AAA</div>
<div v-else>BBB</div>
根据变量isShow决定显示哪一个组件，这里也可以写表达式
五、 v-show 条件显示
用于条件显示组件
<div v-show="isShow">AAA</div>
注意：
和上面的v-if 都能起到控制标签是否显示，但是原理不同，v-if 会直接不渲染标签，v-show会渲染，只是把display设置为none以达到效果。由此可见v-if的效率更高，如果需要频繁切换则使用v-show更好一点。
六、 v-for 遍历（数组+对象）
1.数组遍历
<div v-for="item in arr">{{item}}</div>
<div v-for="(item,index) in arr">{{item}} {{index}}</div>
item遍历出的元素 index下标
2.对象遍历
<div v-for="value in obj">{{value}}</div>
<div v-for="(value,key) in obj">{{value}} {{key}}</div>
<div v-for="(value,key,index) in obj">{{value}} {{key}} {{index}}</div>
value值 keykey index下标
注意：
for循环遍历的for (let i in arr) 其中 i 是下标不是item 用 for (let item of arr) 才能拿到其中的元素。
3.绑定:key，官方建议，这样可以提高性能
<div v-for="item in arr" :key='item'>{{item}}</div>
key需要和元素一一对应，这样才能起到效果，注意绑定的item 不是index，因为数组变化后index是变化的，不是一一对应。
网友评论