Vue指令大全

vue指令及双向数据绑定
什么是vue.js指令：以v-开头的特殊属性
作用：给html标签添加更多的特殊功能 前提是必须在使用vue的情况下才可以使用这些指令
指令的书写位置在html的开标签当中 一个html 标签可以有多个指令（每个指令之间用空格隔开）

常见 Vue.js 指令
v-model 指令

作用：主要是用于表单上数据的双向绑定
语法：v-model = 变量
注：v-model 指令必须绑定在表单元素上(input select textarea 等)
双向绑定
Vue框架核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的
使用 v-model 指令来实现双向数据绑定 把视图数据与模型数据相互绑定
双向绑定的原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
数据劫持:当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

发布者-订阅者模式:其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

v-show 指令
作用：通过控制dom元素的display属性 控制切换一个元素的显示和隐藏
语法：v-show = 表达式 表达式是布尔值
根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素；false(默认)表示隐藏该元素
元素一直存在只是被动态设置了display：none
v-if指令
作用：判断是否加载固定的内容
语法：v-if = 表达式 表达式是布尔值
根据表达式结果的真假，确定是否显示当前元素
true表示加载该元素；false表示不加载该元素
元素的显示和隐藏 是对Dom元素进行添加和删除
v-show与v-if区别：
v-if有更高的切换消耗（安全性高）。v-show有更高的初始化的渲染消耗（对安全性无要求选择）
v-else 指令：
作用：必须配合v-if使用否则无效。当v-if条件不成立的时候执行
v-else-if 指令：
作用：当有一项成立时执行。
v-on 指令：
作用：为 HTML 元素绑定事件监听
语法：v-on：事件名称=‘函数名称()’
简写语法：@事件名称=‘函数名称()’
注：函数定义在 methods 配置项中
v-for 指令：
作用：遍历 data 中的数据，并在页面进行数据展示
语法：v-for = ‘(item, index) in arr’
item 表示每次遍历得到的元素
index 表示item的索引，可选参数
:key=”唯一识别码”
v-for key的使用:
使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM

v-bind 指令：
作用：绑定 HTML 元素的属性
语法：v-bind:属性名 = ‘表达式’/ 简写 ：属性名=‘表达式’
绑定一个属性：
绑定多个属性(不能使用简写)：
<img v-bind=‘{src:myUrl, title: msg}’ />
v-text 指令：
作用：操作网页元素中的纯文本内容。{{}}是他的简写
v-html 指令：
作用：双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令
语法：

v-once 指令：
作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)
语法：

{{text}}

自定义指令：
自定义全局指令:
vue.directive(“指令名称”，（el,binding）=>{
//el表示当前指令名称所在的标签位置 binding表示指令的值
}),
Eg:
vue.directive(“bg”，（el,binding）=>{
el.style.background=”binding.value”
}),

hello

自定义局部指令：
new Vue({
el:”#app”,
directive:{
bg:function(el,bindings){
el.style.background=”bindings.value”
}
})

总的来说：
v-show：控制切换一个元素的显示和隐藏
v-on：为 HTML 元素绑定事件监听
v-model：将用户的输入同步到视图上
v-for ：遍历 data 中的数据，并在页面进行数据展示
v-bind：绑定 HTML 元素的属性