Vue中的一些指令
1.v-cloak
作用：防止闪烁
使用步骤：
- 给插值表达式所使用的标签加上v-cloak属性
<p v-cloack></p>
- 定义样式
[v-cloak]{
display:none;
}
2.v-text
作用：渲染数据，跟插值表达式作用一样
使用：给想要渲染data中的数据的标签加上v-text=”data“
<div v-text="data"></div>
跟插值表达式的区别：
- v-text无闪烁问题
- 插值表达式只会替换占位符，v-text会自动覆盖元素中的原来内容
3.v-html
作用：将数据转换为html格式
使用：给想要渲染data中的数据的标签加上v-html=”data“
<div v-html="data"></div>
与v-text和插值表达式的区别：
- v-text和插值表达式只会将数据当成字符串进行输出
- 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的区别：
- v-bind是将数据从Vue实例中的data渲染到页面中，会实时监听data中的数据变化
- v-model是监听Vue实例中的data和页面上的数据变化，一旦发生变化，就会根据改变的一方的值来统一数据
7.v-for
7.1 指令的基本使用
作用：循环遍历数组或对象,迭代
使用：
- 数组，
<p v-for="(item,index) in list">{{item}}</p> - 对象（对象数组），
<p v-for="(val,key,index) in list">{{val.attribute}}</p> - 迭代，
<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的区别：
- v-if有较高的切换性能消耗，无初始渲染消耗
- v-show有较高的初始渲染消耗
- 当一个元素可能永远不会在页面上显示出来，推荐使用v-if
- 当一个元素涉及到频繁的切换，体检使用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){
}
}
}
})
钩子函数：
- bind：
作用：指令刚绑定到元素时调用，对元素执行一次初始化动作
作用时间：
元素刚绑定了指令，但还没插入到DOM，简单的说就是元素还在内存中被渲染，但还没有解析和加载到页面上时
跟样式相关的操作可以放到bind中 - inserted：
作用：被绑定的元素在插入到DOM中时，会执行一次动作
作用时间：
当元素插入到DOM时，简单的说就是当该元素加载到页面上时
与js相关的操作应放到inserted中 - update：
作用：当被绑定的元素更新时，会执行动作，修改内容，等
作用时间：当元素被修改时，常见的有，下拉表单，文本框，复选框等组件被修改时 - componentUpdated：
作用：指令所在组件的 VNode 及其子 VNode 全部更新后调用，一般使用 update 即可
没搞懂componentUpdated和update的区别 - unbind：
作用：在元素被移除bind时，会执行动作
目前我没有想到有什么方法能够将元素的bind移除，知道的大佬可以教教我。
时间顺序：
bind>inserted(>update/componentUpdated)>unbind
自定义指令的钩子函数简写
vue规定了一个简写方式，相当于将函数定义到bind和update中
定义方式：
'指令名称':function(el,binding){}
浙公网安备 33010602011771号