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){}