指令有内置指令和自定义指令
以v-开头属性在vue中 叫做指令
内置指令:v-text 不能解析标签
v-html 可以解析标签
v-bind 动态绑定属性 ,可以简写 成:
v-once 被它修饰的节点只会渲染一次
v-if 根据值来判断是否渲染
v-show 根据值来判断是否显示和隐藏
v-pre 格式化输出不解析{{}}
v-on 绑定事件 简写 @
自定义指令:directive 主要用来操作dom用的
Vue.directive('xxoo',{
inserted(el,obj){
console.log(el)
console.log(obj.value)
},
update(el,obj){
console.log(a)
}
})
var VM = new Vue({
el:"#box",
data:{
color1:"yellow"
}
})
它提供三个钩子函数 bind update和inserted
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted:当你在节点中插入自定义的指令时,会自动调用这个函数
update:当指令的值发送变化,修改的时候,会自动触发这个函数
这些钩子函数中都有几个参数
1.el 指令所绑定的元素,可以用来直接操作 DOM
2.binding 一个对象 里面有value 和 name,value可以获取到指令绑定的值,name可以获取到指令名
除了 el 之外,其它参数都应该是只读的,切勿进行修改。