模板語法

一痢虹、概要

Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)店诗。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析脆丁。

在底層實(shí)際上是，Vue將模板編譯成虛擬DOM渲染函數(shù)动雹。結(jié)合響應(yīng)系統(tǒng)偎快，Vue能夠智能的計算出最少需要重新渲染多少組件，并把DOM操作次數(shù)減少到最少

二洽胶、插值

1晒夹、說明

將數(shù)據(jù)插入到html文檔中，包含文本姊氓、html元素丐怯、元素屬性等相當(dāng)于我們Jquery里的DOM操作

2、文本插值

說明

文本插值中用得最多的就是用雙大括號{{變量}}的形式
示例代碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<h1>{{title}}</h1>
</div>
<script>
new Vue({
el: "#app",
//數(shù)據(jù)綁定區(qū)
data: {
title: "就是這么簡單",
},
});
</script> </pre>

3翔横、HTML插值

說明

是在HTML標(biāo)簽中插入內(nèi)容,被插入的內(nèi)容都會被當(dāng)做 HTML 數(shù)據(jù)綁定會被忽略读跷。語法格式 v-html="變量" 的方式
示例代碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n25" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<p v-html="msg"></p>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "<span>在標(biāo)簽中插入的內(nèi)容</span>",
}
})
</script></pre>
渲染效果圖

Vue
注意

你不能使用 v-html 來復(fù)合局部模板，因?yàn)?Vue 不是基于字符串的模板引擎禾唁。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元

三效览、其它指令(v-)

1、說明

指令 (Directives) 是帶有 v- 前綴的特殊屬性

當(dāng)表達(dá)式的值改變時荡短，將其產(chǎn)生的連帶影響丐枉，響應(yīng)式地作用于 DOM

語法格式 v-指令 : [參數(shù).[修飾符] ]= "值", 大部分指令接受一個參數(shù),值的話就是Vue實(shí)例data中的變量,也支持簡單js表達(dá)式

2、v-text

說明

更新元素的的內(nèi)容,作用等同于{{ }}
語法格式

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="vue" cid="n45" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-text="val"</pre>
參數(shù)說明

對應(yīng)Vue對象中的中data的屬性
示例代碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n51" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<p>價格：{{ price }}</p>
<p v-text="'價格：' + price"></p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
price: 99.00,
}
})
</script>
?</pre>
注意
- 在Vue中要想輸出字符串掘托，必須添加單引號瘦锹，否則會報錯。比如<h1 v-text="'文本內(nèi)容：' +text"></h1>闪盔。
- {{}}代表的就是""弯院，所以在v-text=""中，我們在內(nèi)容里面就不需要再寫{{}}了泪掀，直接寫數(shù)據(jù)屬性就行了听绳。
區(qū)別
- {{text}}：將數(shù)據(jù)解析為純文本，不能輸出真正的html异赫，在頁面加載時顯示{{}}椅挣，所以通常使用v-html和v-text代替，且花括號方式在以后可能被取消
- v-html="html"：輸出真正的html
- v-text="text"：將數(shù)據(jù)解析為純文本祝辣，不能輸出真正的html贴妻，與花括號的區(qū)別是在頁面加載時不顯示{{}}

3、v-bind

說明

當(dāng)表達(dá)式的值改變時蝙斜，將其產(chǎn)生的連帶影響名惩，響應(yīng)式地作用于 DOM
語法格式

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="vue" cid="n75" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-bind:property="val"
// 或者簡寫方式
:property="val"</pre>
參數(shù)
- property
  
  html元素的屬性
- val
  
  對應(yīng)vue對象里的data的變量名
示例代碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n87" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">

<a v-bind:href="url" v-text="content"></a>

<a :href="url" v-text="content"></a>
<img :img="img" >
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
content:"百度一下",
url: 'https://www.baidu.com',
img:"http://ts.51ui.cn/pc/9-160Q2215F4.jpg"
}
})
</script></pre>
后接值

對于v-bind:后接的屬性值，不同的表單控件是不同的孕荠，如：
- input的checkbox娩鹉，使用true-value和false-value
- input的radio攻谁，使用pick
- select的情況下，使用selected
- 其他的文本類弯予，使用value

4戚宦、v-on

說明

給元素綁定事件,綁定的事件從methods中獲取.
語法格式

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="vue" cid="n107" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-on:event="fun"
// or
v-on:event="fun(param,...)"
// or 簡寫方式
@event="fun"
//綁定多個事件,多個事件以‘，’號隔開
v-on={event:fun,event:fun,....}</pre>
參數(shù)說明
- event
  
  事件名
- fun
  
  定義在vue對象里methods里的方法,如果方法沒有參數(shù),可以省略()
- param
  
  方法中的參數(shù)
備注

支持的事件類型參考

常見的事件有@click 锈嫩，@focus受楼，@blur，@submit呼寸，@mousemove艳汽，@mouseleave，@mouseout等
示例代碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n126" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<p>
<span v-text="'價格:' + price"></span>
<span v-text="'數(shù)量:' + num"></span>
</p>

<button v-on:click="btn">結(jié)算</button>

<button @click="btn">結(jié)算</button>
<p>小計: {{ total }}</p>

<button @click="multip(num,price)">傳遞參數(shù)</button>
</div>
?
<script>
new Vue({
el: '#app',
data: {
total: 0,
num: 1,
price: 20.00,
numbers: 1
},
methods: {
btn: function () {
this.total = this.num * this.price
},
multip: function (num, price) {
this.total=num * price
}
}
})
</script></pre>
事件修飾符
- .stop 阻止冒泡对雪，調(diào)用 event.stopPropagation()
- .prevent 阻止默認(rèn)事件河狐，調(diào)用 event.preventDefault()
- .capture 添加事件偵聽器時使用事件捕獲模式
- .self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調(diào)
- .once 事件只觸發(fā)一次
示例代碼

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n142" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">
<button @click.stop="do"></button>

<button @click.prevent="do"></button>

<form @submit.prevent></form>

<button @click.stop.prevent="do"></button>

<button v-on:click.once="do"></button></pre>

5、v-model

說明

在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定, 監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)

v-model會忽略所有表單元素的value/checked/selected特性的初始值瑟捣，應(yīng)該通過js在組件的data中聲明初始值
語法格式

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n151" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-model="val"</pre>
參數(shù)
- val
示例代碼

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n159" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<span v-text="msg"></span>
<input type="text" v-model="msg">
</div>

<script>
new Vue({
el: "#app",
data: {
msg: "msg",
}
})
</script></pre>
修飾符
- lazy
  
  v-model.lazy:自動延遲事件作用
- number
  
  v-model.number:自動將用戶輸入的值轉(zhuǎn)為Number類型
- trim:
  
  v-model.trim:自動過濾用戶輸入的首尾空格

6馋艺、v-for

說明

當(dāng)需要將一個數(shù)組或者對象循環(huán)遍歷顯示的時候可以使用v-for指令

也支持用在templete（包裹元素）元素上的，以此來進(jìn)行多個元素的渲染
語法格式

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n180" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">// 遍歷數(shù)組 index 可選
v-for = "item in items"
v-for = "(item,[index]) in items"
// 遍歷對象
v-for =" (item,[key],[index]) in items"</pre>
參數(shù)說明
- 括號及其內(nèi)的遍歷結(jié)果信息（item, key, index）
  
  item 是遍歷得到的屬性值迈套，key 是遍歷得到的屬性名捐祠，index 是遍歷次序，這里的 key/index 都是可選參數(shù)交汤，如果不需要雏赦，這個指令其實(shí)可以寫成 v-for="item in items"；
- 遍歷關(guān)鍵詞 in
  
  in 可以使用 of 替代芙扎，官方的說法是它是最接近 JavaScript 迭代器的語法，但其實(shí)使用上并沒有任何區(qū)別填大；
- 被遍歷對象items
  
  items 是綁定在實(shí)例 data 屬性上的一個屬性
示例代碼

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n195" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">
<div id="app">

<p v-for="(item,index) in nums">
{{index + ' : ' + item}}
</p>

<p v-for="(item, key, index) in user">
{{index + ' : ' + key + ' : ' + item}}
</p>

<p v-for="item in name">
{{item}}
</p>

<p v-for="item in num">
{{item}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
nums: [10, 20, 30, 40, 50],
user: {name: '嬌嬌', age: 18},
name: '小明',
num: 4
}
})
</script></pre>

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n196" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">
<div id="app">
<ul>
<li v-for="num in nums">
<p v-text="num"></p>
</li>
</ul>
</div>

<script>
let app = new Vue({
el: '#app',
data: {
nums: [10, 20, 30, 40, 50],
}
})
</script></pre>
增強(qiáng)數(shù)組更新的方法

官方說明

Vue 包含一組觀察數(shù)組的變異方法戒洼，所以它們也將會觸發(fā)視圖更新
- push()
  
  向數(shù)組的末尾添加一個或更多元素
- pop()
  
  刪除并返回數(shù)組的最后一個元素
- shift()
  
  數(shù)組的第一個元素從其中刪除
- unshift()
  
  向數(shù)組的開頭添加一個或更多元素
- splice()
  
  向/從數(shù)組中添加/刪除
- sort()
  
  對數(shù)組的元素進(jìn)行排序
- reverse()
  
  顛倒數(shù)組中元素的順序
注意: 通過數(shù)組下標(biāo)來修改或者添加是無效的，頁面不會重新渲染允华，即使數(shù)據(jù)已經(jīng)改變了圈浇。

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n224" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">app.numbs.push(6)

其它方法跟js的數(shù)組操作方法一樣</pre>
關(guān)于設(shè)置key

使用v-for更新已渲染的元素列表時,默認(rèn)使用復(fù)用策略;當(dāng)列表數(shù)據(jù)修改的時候,他會根據(jù)key值去判斷某個值是否修改,如果修改,則重新渲染這一項(xiàng),否則復(fù)用之前的元素;

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n228" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<ul>

<li v-for="(shop,index) in shops" :key="shop.id" >
<p v-text="index + shop.name"></p>
</li>
</ul>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
shops: [
{
id: 1,
name: "Apple iPhone XS Max"
},
{
id: 2,
name: "小米8"
},
]
}
})</pre>

7、v-if

說明

v-if是條件渲染指令靴寂，它根據(jù)表達(dá)式的真假來刪除和插入元素
語法格式

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="vue" cid="n236" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-if="expression"
v-else-if="expression"
v-else</pre>
參數(shù)說明
- expression
  
  是一個返回bool值的表達(dá)式磷蜀，表達(dá)式可以是一個bool屬性，也可以是一個返回bool的運(yùn)算式
示例代碼

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n245" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
```

<div v-if="isLogin">
    <p v-text="user.name"></p>
</div>

<div v-else>
    <a href="#">登錄</a>
    <a href="#">注冊</a>
</div>
```
</div>

<script>
let app = new Vue({
el: "#app",
data: {
isLogin: false,
user: {
name: 'vue'
},
}
})
</script>

</pre>

8百炬、v-show

說明

與v-if語句一樣都是簡單的理解都是用來做顯示隱藏元素,

vue-show通過標(biāo)簽display屬性設(shè)置為none褐隆，控制隱藏,

v-if動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素
語法格式

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n255" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-show="expression"</pre>
參數(shù)說明

是一個返回bool值的表達(dá)式，表達(dá)式可以是一個bool屬性剖踊，也可以是一個返回bool的運(yùn)算式
示例代碼

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="html" cid="n261" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<h1 v-show="ok">條件為TRUE庶弃，輸出</h1>
<h1 v-show="error">條件為false衫贬，不輸出</h1>
<h1 v-show="10>5">10大于5，輸出!</h1>
<h1 v-show="2>10">不大于10歇攻，不輸出!</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
error: false
}
})
</script></pre>
區(qū)別

1固惯、實(shí)現(xiàn)本質(zhì)方法區(qū)別
- vue-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏
- vue-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素
2缴守、編譯的區(qū)別
- v-show其實(shí)就是在控制css
- v-if切換有一個局部編譯/卸載的過程葬毫，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件
3、編譯的條件
- v-show都會編譯屡穗，初始值為false贴捡，只是將display設(shè)為none，
- v-if初始值為false鸡捐，就不會編譯了
4栈暇、性能
- v-show只編譯一次，后面其實(shí)就是控制css箍镜，而v-if不停的銷毀和創(chuàng)建源祈，故在某些情況下v-show性能更好一點(diǎn)。

9色迂、v-once

說明

只渲染元素和組件一次香缺，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會繼續(xù)更新歇僧，使用了此指令的元素/組件及其所有的子節(jié)點(diǎn)图张，不會在渲染，這可以用于優(yōu)化更新性能
語法格式

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n293" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">v-once</pre>
示例代碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n296" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit;"><div id="app">
<p v-text="msg"></p>
<p v-once v-text="'v-once:' + msg"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: '先定個小目標(biāo),一天擼1萬行代碼'
}
})
</script></pre>

Vue模板語法

Vue模板語法

模板語法

一痢虹、概要

二洽胶、插值

1晒夹、說明

2、文本插值

3翔横、HTML插值

三效览、其它指令(v-)

1、說明

2、v-text

3、v-bind

4戚宦、v-on

5、v-model

6馋艺、v-for

其它方法跟js的數(shù)組操作方法一樣</pre>

7、v-if

8百炬、v-show

1固惯、實(shí)現(xiàn)本質(zhì)方法區(qū)別

2缴守、編譯的區(qū)別

3、編譯的條件

4栈暇、性能

9色迂、v-once