學習要點:
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)整理發布!