Je code donc je suis là.

0%

Vue.js Directives Vue 常用的內建指令

之前的幾篇都有介紹此表前半段的 Vue 內建指令用法,這裡要介紹最後面的兩個內建指令refv-cloak
先來 codepen 看看:Vue.Js ref 唯一識別 與 v-cloak 隱藏表達式

指令 作用 Vue
v-if 如果為 true, 當前標籤才會輸出到頁面
v-html 更新元素的 innerHTML
v-else 如果為 false, 當前標籤才會輸出到頁面
v-show 通過控制 display 樣式來控制顯示/隱藏
v-for 遍歷陣列/物件
v:text 更新元素的 textContent
v-on 綁定事件監聽, 一般簡寫為@
v-bind 強制綁定解析表達式, 可以省略 v-bind
v-model 雙向資料綁定
ref 為某個元素註冊一個唯一標識, vue 物件通過 $refs 屬性訪問這個元素物件
v-cloak 使用它防止閃現表達式, 與 css 配合: [v-cloak] { display: none }

ref 元素的唯一識別

給需要一個標籤一個唯一識別,可用ref,但如何透過我們給標籤的ref取得標籤的內容,在實例的方法裡,可以使用$refs這個方法取得:this.$refs.content.textContent,可選用innerHTMl或者是textContent效果是一樣的。

ref的作用是為某個元素註冊一個唯一標識, vue 物件會透過 $refs 屬性來訪問這個元素物件或其內容。

v-cloak 防止在頁面出現 Vue 的表達式

因為程式是一行行執行的,有時因為頁面跳轉的關係,程式還沒讀取完即出現在頁面上,這時 Vue 的表達式像是就會被看見,為了避免這樣的狀況產生,可以使用在標籤上使用v-cloak,並在 Style 以屬性選擇器[v-cloak]選取,並給予display:none先隱藏它,直到程式讀取到資料後,這個屬性會自動地被拿掉,就可預防出現 Vue 的表達式。

1
2
3
4
<p ref="content">Hello Paris</p>
<button @click="hint">Hint</button>
<!-- v-cloak -->
<p v-cloak>Hello Taipei</p>
1
2
3
4
5
6
7
8
9
10
11
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello Taipei'
},
methods: {
hint() {
alert(this.$refs.content.textContent);
}
}
});

有了自定義的指令功能,相信會讓重複性的功能,使用起來更方便。