Vue011 內建指令與自定義指令

2021-10-01 19:50:28 字數 841 閱讀 6940

1) v:text : 更新元素的 textcontent

2) v-html : 更新元素的 innerhtml

3) v-if : 如果為 true, 當前標籤才會輸出到頁面

4) v-else: 如果為 false, 當前標籤才會輸出到頁面

5) v-show : 通過控制 display 樣式來控制顯示/隱藏

6) v-for : 遍歷陣列/物件

7) v-on : 繫結事件監聽, 一般簡寫為@

8) v-bind : 強制繫結解析表示式, 可以省略 v-bind

9) v-model : 雙向資料繫結

10) ref : 指定唯一標識, vue 物件通過$els 屬性訪問這個元素物件

11) v-cloak : 防止閃現, 與 css 配合: [v-cloak]

1) 註冊全域性指令

vue.directive('my-directive', function(el, binding))

2) 註冊區域性指令

directives : }}

3) 使用指令

v-my-directive='***'
顯示左側文字

Vue 通過自定義指令回顧 v 內建指令

vue.js 的各種指令 directives 更加方便我們去資料驅動 dom,例如 v bind v on v model v if v for v once 等內建指令,這些指令的職責就是當表示式改變時將某些行為應用到 dom 上,盡量不去操作增刪改 dom。通過了解如何去自定義指令,可以想象內...

Vue自定義指令

vue有很多內建的指令,比如說v on,v model,v clock等等,每乙個指令會完成一定的功能,但是這些內建的指令總會有些侷限性,要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令,只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...