三種寫法，快速掌握vue3之template 使用script元素 多種演示
Vue3 模板語法
Vue 使用了基於 HTML 的模板語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。
Vue 的核心是一個允許你採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統。
結合響應系統，在應用狀態改變時， Vue 能夠智慧地計算出重新渲染元件的最小代價並應用到 DOM 操作上。
插值
文字
資料繫結最常見的形式就是使用
{{...}}
（雙大括號）的文字插值：
文字插值
{{ message }}
第一種（使用模板字串）早期字串拼接年代
new Vue（{ el： “#app”， template： ‘
{{message}}
\第二種（使用script元素）HTML5標準之前的寫法 ``
new Vue（{ el： “#app”， template： ‘#tem’， data： { message： ‘HTML5標準之前的寫法，存在一定弊端（可自行google） 之後HTML5釋出的template元素彌補了此方式的缺點’ }}）
第三種（使用template元素）HTML5標準之後的寫法【第二種的升級版】
{{message}}
new Vue（{ el： “#app”， template： ‘#tem’， data： { message： ‘HTML5中的template標籤 ，注意：’ // template是HTML5中的標籤， //不是自定義標籤， //也不是Vue中的元件］ }}）
在頁面中使用
<！DOCTYPE html>
{{ msg }}
{{ msg }}
屬性
HTML 屬性中的值應使用 v-bind 指令。
對於布林屬性，常規值為 true 或 false，如果屬性值為 null 或 undefined，則該屬性不會顯示出來。
以上程式碼中如果 isButtonDisabled 的值是 null 或 undefined，則 disabled 屬性甚至不會被包含在渲染出來的
以下例項判斷 use 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
表示式
Vue。js 都提供了完全的 JavaScript 表示式支援。
表示式會在當前活動例項的資料作用域下作為 JavaScript 被解析。有個限制就是，每個繫結都只能包含單個表示式，所以下面的例子都不會生效：
<！—— 這是語句，不是表示式：——>{{ var a = 1 }}<！—— 流控制也不會生效，請使用三元表示式 ——>{{ if （ok） { return message } }}
指令
指令是帶有 v- 字首的特殊屬性。
指令用於在表示式的值改變時，將某些行為應用到 DOM 上。
這裡， v-if 指令將根據表示式 seen 的值（ true 或 false ）來決定是否插入 p 元素。
另外還有其它很多指令，每個都有特殊的功能。例如，v-for 指令可以繫結陣列的資料來渲染一個專案列表：
例項
- {{ site。text }}
引數
引數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
<！—— 完整語法 ——> 。。。 <！—— 縮寫 ——> 。。。 <！—— 動態引數的縮寫 （2。6。0+） ——> 。。。
在這裡引數是監聽的事件名。
修飾符
修飾符是以半形句號
.
指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，
.prevent
修飾符告訴
v-on
指令對於觸發的事件呼叫
event.preventDefault()
：
使用者輸入
在 input 輸入框中我們可以使用 v-model 指令來實現雙向資料繫結：
雙向資料繫結
{{ message }}
縮寫
v-bind 縮寫
Vue。js 為兩個最為常用的指令提供了特別的縮寫：
v-on 縮寫
試例：
1、資料控制 input 元素是否禁止編輯
v-bind：disabled = “myDisabled”，資料繫結 disabled 屬性
2、只取第一次的資料
使用 v-once 修飾後，message 只取 data 中 message 的第一次賦值，這裡顯示 hello，而不是 hello world
3、資料控制元素是否顯示
4、資料與 title 屬性繫結
使用 v-bind：title=“title” 將 data 中的 title 變數 與 template 中的 title 屬性繫結
5、為元素新增事件
使用 v-on：click=“myClick”，將 methods 中的 myClick 方法繫結為點選事件。
6、動態屬性
：［attribute］=“title”，屬性也與資料關聯
7、 動態事件
