建站
咨詢
售后
建站咨詢
新聞中心
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層組件實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
在底層的實現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結合響應性系統(tǒng)，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。
如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數(shù)，使用可選的 JSX 語法。
#插值
#文本
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
Message: {{ msg }} Mustache 標簽將會被替代為對應組件實例中 msg property 的值。無論何時，綁定的組件實例上 msg property 發(fā)生了改變，插值處的內(nèi)容都會更新。
通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點上的其它數(shù)據(jù)綁定：
這個將不會改變: {{ msg }}#原始 HTML
雙大括號會將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用v-html 指令：
Using mustaches: {{ rawHtml }}
Using v-html directive:
點擊此處實現(xiàn)
這個 span 的內(nèi)容將會被替換成為 property 值 rawHtml，直接作為 HTML——會忽略解析 property 值中的數(shù)據(jù)綁定。注意，你不能使用 v-html 來復合局部模板，因為 Vue 不是基于字符串的模板引擎。反之，對于用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。
TIP
在你的站點上動態(tài)渲染任意的 HTML 是非常危險的，因為它很容易導致 XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值，絕不要將用戶提供的內(nèi)容作為插值。
#Attribute
Mustache 語法不能在 HTML attribute 中使用 ，然而，可以使用 v-bind 指令：
對于布爾 attribute (它們只要存在就意味著值為 true)，v-bind 工作起來略有不同，在這個例子中：
如果 isButtonDisabled 的值是 null 或 undefined，則 disabled attribute 甚至不會被包含在渲染出來的 元素中。
#使用 JavaScript 表達式
迄今為止，在我們的模板中，我們一直都只綁定簡單的 property 鍵值。但實際上，對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('')}}
這些表達式會在當前活動實例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}#指令
指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 和 v-on 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于 DOM。回顧我們在介紹中看到的例子：
現(xiàn)在你看到我了
這里，v-if 指令將根據(jù)表達式 seen 的值的真假來插入/移除 元素。
#參數(shù)
一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應式地更新 HTML attribute：
... 在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href attribute 與表達式 url 的值綁定。
另一個例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：
... 在這里參數(shù)是監(jiān)聽的事件名。我們也會更詳細地討論事件處理。
#動態(tài)參數(shù)
也可以在指令參數(shù)中使用 JavaScript 表達式，方法是用方括號括起來：
... 這里的 attributeName 會被作為一個 JavaScript 表達式進行動態(tài)求值，求得的值將會作為最終的參數(shù)來使用。例如，如果你的組件實例有一個 data property attributeName，其值為 "href"，那么這個綁定將等價于 v-bind:href。
同樣地，你可以使用動態(tài)參數(shù)為一個動態(tài)的事件名綁定處理函數(shù)：
... 在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價于 v-on:focus
#修飾符
修飾符 (modifier) 是以半角句號.指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：
在接下來對 v-on 和 v-for 等功能的探索中，你會看到修飾符的其它例子。
#縮寫
v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的 attribute。當你在使用 Vue.js 為現(xiàn)有標簽添加動態(tài)行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v- 前綴也變得沒那么重要了。因此，Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：
#v-bind 縮寫
...
...
... #v-on 縮寫
...
...
... 它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對于 attribute 名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現(xiàn)在最終渲染的標記中?？s寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們。
從下一頁開始，我們將在示例中使用縮寫，因為這是 Vue 開發(fā)者最常用的用法。
#注意事項
#對動態(tài)參數(shù)值約定
動態(tài)參數(shù)預期會求出一個字符串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會觸發(fā)一個警告。
#對動態(tài)參數(shù)表達式約定
動態(tài)參數(shù)表達式有一些語法約束，因為某些字符，如空格和引號，放在 HTML attribute 名里是無效的。例如：
... 變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種復雜表達式。
在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板)，還需要避免使用大寫字符來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫：
... #JavaScript 表達式
模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date。你不應該在模板表達式中試圖訪問用戶定義的全局變量。
分享標題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0模板語法
分享鏈接：http://www.fisionsoft.com.cn/article/cdjoipo.html
