11.内置指令与自定义指令

经常使用内置指令

• v:text : 更新元素的 textContent
• v-html : 更新元素的 innerHTML
• v-if : 若是为 true, 当前标签才会输出到页面
• v-else: 若是为 false, 当前标签才会输出到页面
• v-show : 经过控制 display 样式来控制显示/隐藏
• v-for : 遍历数组/对象
• v-on : 绑定事件监听, 通常简写为@
• v-bind : 强制绑定解析表达式, 能够省略 v-bind
• v-model : 双向数据绑定
• ref : 指定惟一标识, vue 对象经过$els 属性访问这个元素对象
• v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

• 注册全局指令

Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})

• 注册局部指令

directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}

• 使用指令

v-my-directive='xxx'