Vue中的一些指令

1.v-cloak

作用：防止闪烁
使用步骤：

1. 给插值表达式所使用的标签加上v-cloak属性

<p v-cloack></p>

2. 定义样式

[v-cloak]{
display:none;
}

2.v-text

作用：渲染数据，跟插值表达式作用一样
使用：给想要渲染data中的数据的标签加上v-text=”data“

<div v-text="data"></div>

跟插值表达式的区别：

1. v-text无闪烁问题
2. 插值表达式只会替换占位符，v-text会自动覆盖元素中的原来内容

3.v-html

作用：将数据转换为html格式
使用：给想要渲染data中的数据的标签加上v-html=”data“

<div v-html="data"></div>

与v-text和插值表达式的区别：

1. v-text和插值表达式只会将数据当成字符串进行输出
2. v-html会将数据当成html代码进行输出

4.v-bind

作用：vue中用于绑定数据的指令
使用：在标签属性前加上v-bind：，属性中可以写合法的表达式

<input type="text" v-bind:value="data"/>

效果：先解析加了v-bind的属性中的字符串，当有与data中的数据相同的字符串名称时，就会找到这个数据来代替属性中的值。
简写：可以用一个：代替

5.v-on

作用：vue中用于绑定方法的指令
使用：先在要绑定的触发事件前加上v-on：，然后再Vue实例中定义方法

<input type="button" v-on:click="handle"/>

跟js方法相比：不用再进行DOM操作
跟JQery相比：无太大明显差别
简写：可以用一个@代替

6.v-model

作用：实现数据的双向绑定
使用：只能用在表单元素上（input,select,checkbox），直接用v-model代替value属性，属性的值填上data中的数据名称，当页面中v-model的值修改时，Vue实例中的data中的数据也会对应修改

<input type="text" v-model="data"/>

与v-bind的区别：

1. v-bind是将数据从Vue实例中的data渲染到页面中，会实时监听data中的数据变化
2. v-model是监听Vue实例中的data和页面上的数据变化，一旦发生变化，就会根据改变的一方的值来统一数据

7.v-for

7.1 指令的基本使用

作用：循环遍历数组或对象,迭代
使用：

1. 数组，<p v-for="(item,index) in list">{{item}}</p>
2. 对象（对象数组），<p v-for="(val,key,index) in list">{{val.attribute}}</p>
3. 迭代，<p v-for="i in 10">{{i}}</p>，标签内用{{i}}进行计数
   跟c:for的使用差不多
   在实际使用的时候，直接使用v-for可以不用带入使用c:for所要导入的包，功能也比c:for强大，还可以遍历data中的数据

7.2 v-for中key的使用

使用：:key=""

<div v-for="item in data" :key="item.id">
</div>

作用：使页面中渲染出来的数据，不只是简单的排序，而是按照data数据中的某个属性（id）进行唯一性标识
作用范围：只有在对对象（对象数组）进行遍历时才能起作用，数组的话无法使用，因为数组不能提供一个唯一性标识的数据（数组的唯一性标识是下标，对象数组可以提供唯一标识）
注意：key的值应为字符串或数字

8.v-if

作用：根据值判定是否显示该元素
使用：v-if=“true”

<div v-if="true">
</div>

特点：每次都会进行DOM的删除或创建操作

v-else

v-else-if

使用规则：跟java中的if,else,else if使用相似

9.v-show

作用：根据值判定是否显示该元素
使用：v-show=“true”

<div v-show="true">
</div>

特点：不会进行DOM的删除或创建操作，只是切换了display:none样式
与v-if的区别：

1. v-if有较高的切换性能消耗，无初始渲染消耗
2. v-show有较高的初始渲染消耗
3. 当一个元素可能永远不会在页面上显示出来，推荐使用v-if
4. 当一个元素涉及到频繁的切换，体检使用v-show

10 vue自定义指令

全局指令

目的：为了不操作dom完成一些特定的功能
规定：指令都以v-开头
使用：

<input type="text" v-指令名称/>

定义方法：

Vue.directive('指令名称',{
//钩子函数
bind:fuction(el){
}
})

参数1：指令名称
参数2：定义函数

私有指令

作用：
定义一个只有定义了该指令的Vue实例才能使用的指令
使用：

<input type="text" v-指令名称/>

定义方法：

var vm =new Vue({
	directives:{
		'指令名称':{
			bind:function(el,binding){
			}
		}
	}
})

钩子函数：

1. bind：
   作用：指令刚绑定到元素时调用，对元素执行一次初始化动作
   作用时间：
   元素刚绑定了指令，但还没插入到DOM，简单的说就是元素还在内存中被渲染，但还没有解析和加载到页面上时
   跟样式相关的操作可以放到bind中
2. inserted：
   作用：被绑定的元素在插入到DOM中时，会执行一次动作
   作用时间：
   当元素插入到DOM时，简单的说就是当该元素加载到页面上时
   与js相关的操作应放到inserted中
3. update：
   作用：当被绑定的元素更新时，会执行动作，修改内容，等
   作用时间：当元素被修改时，常见的有，下拉表单，文本框，复选框等组件被修改时
4. componentUpdated：
   作用：指令所在组件的 VNode 及其子 VNode 全部更新后调用，一般使用 update 即可
   没搞懂componentUpdated和update的区别
5. unbind：
   作用：在元素被移除bind时，会执行动作
   目前我没有想到有什么方法能够将元素的bind移除，知道的大佬可以教教我。

时间顺序：

bind>inserted(>update/componentUpdated)>unbind

自定义指令的钩子函数简写

vue规定了一个简写方式，相当于将函数定义到bind和update中
定义方式：

'指令名称':function(el,binding){}