Vue 指令的使用（一）常用指令

一、 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是变化的，不是一一对应。