指令
指令 (Directives) 是帶有 v-
前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for
是例外情況,稍後我們再討論)。指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於 DOM。回顧我們在介紹中看到的例子:
|
這裏,v-if
指令將根據表達式 seen
的值的真假來插入/移除 <p>
元素。
v-bind
指令可以用於響應式地更新 HTML 特性:
|
該指令的意思是:“將這個元素節點的 title
特性和 Vue 實例的 message
屬性保持一致”。如果你再次打開瀏覽器的 JavaScript 控制檯,輸入 app2.message = '新消息'
,就會再一次看到這個綁定了 title
特性的 HTML 已經進行了更新。
v-on
指令,它用於監聽 DOM 事件:
|
縮寫
v-
前綴作爲一種視覺提示,用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 爲現有標籤添加動態行爲 (dynamic behavior) 時,v-
前綴很有幫助,然而,對於一些頻繁用到的指令來說,就會感到使用繁瑣。同時,在構建由 Vue.js 管理所有模板的單頁面應用程序 (SPA - single page application) 時,v-
前綴也變得沒那麼重要了。因此,Vue.js 爲 v-bind
和 v-on
這兩個最常用的指令,提供了特定簡寫:
v-bind
縮寫
|
v-on
縮寫
|
它們看起來可能與普通的 HTML 略有不同,但 :
與 @
對於特性名來說都是合法字符,在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且,它們不會出現在最終渲染的標記中。縮寫語法是完全可選的,但隨着你更深入地瞭解它們的作用,你會慶幸擁有它們。
修飾符 (Modifiers) 是以半角句號 .
指明的特殊後綴,用於指出一個指令應該以特殊方式綁定。例如,.prevent
修飾符告訴 v-on
指令對於觸發的事件調用 event.preventDefault()
:
|
官方文檔:https://cn.vuejs.org/v2/guide/syntax.html#%E5%8F%82%E6%95%B0