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'