學習要點：
1.文本插值
本節課我們來開始學習 Vue3.x 的模板中文本插值的使用方法。
一．文本插值
1. 數據綁定最常用的方式就是：“Mustache”語法，即雙花括號進行文本插值；
<div id="app">
計算器：{{counter}}
div>
PS：這里也可以使用 JSX 語法，而不使用模板的文本插值，有興趣可以參考手冊；
2. 綁定在模板中的插值{{counter}}，模板是可變的，可以理解為變量；
3. 如果要設置成常量那種不可改變的量，可以使用指令：v-once；
<div id="app">
計算器：<span v-once>{{counter}}span>
div>
PS：為了測試，可在控制臺或 log 輸出的方式來驗證數據是否能夠被改變；
// 獲取到對象名
const vm = Vue.createApp(App).mount('#app')
vm.counter = 200
// 賦值操作
console.log(vm.counter)
PS：關于 vm 的詳解，在手冊的“應用&組件實例”部分，后面會逐步了解到；
4. 文本插值解析出來的是普通文本，而非 HTML 代碼，測試代碼如下：
rawContent : 'Vue3.x'
是否字體有變：{{rawContent}}
PS：這里得到的結果是，并未解析 HTML 代碼，如果要解析，需要使用指令：v-html；
是否字體有變：<span v-html="rawContent">span>
PS：強烈建議不要在動態渲染 html 內容，除非非常信任，否則容易遭受 XSS 攻擊；
5. 模板的文本插值是不能在 HTML attribute(屬性)，先看下錯誤寫法：
<span class="{{className}}">Vue3.xspan>
PS：attribute 一般不翻譯，因為歧義較多，理解成屬性或特性或其它都行；
6. 如果要讓 HTML 的 attribute 支持模板插值，需要使用 v-bind 指令：
<span v-bind:class="className">Vue3.xspan>
PS：可通過控制臺的查看器觀察 HTML 的變化；
7. 在模板語法中，支持 JavaScript 表達式，比如：運算、函數等；
{{counter+ 1}}
{{true ? '真' : '假'}}
{{'bbbb@163.com'.split('@')}}
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
