1.模板語(yǔ)法—插值

{{可以寫(xiě)什么}}
（1）在data中聲明的變量，函數(shù)
（2）常量
（3）合法的javascript表達(dá)式
（4）模板表達(dá)式都被放在沙盒中，只能訪問(wèn)全局變量的一個(gè)白名單，如Math, Date

2.模板語(yǔ)法—指令語(yǔ)法

Vue中所有指令都是以HTML標(biāo)簽當(dāng)中的屬性存在的。

（1）指令的位置

<HTML標(biāo)簽 指令的位置>{{插值語(yǔ)法的位置}}</HTML標(biāo)簽>

<HTML標(biāo)簽 v-標(biāo)簽名:參數(shù)="表達(dá)式">{{xxx}}</HTML標(biāo)簽>

（2）指令的語(yǔ)法規(guī)則
v-標(biāo)簽名:參數(shù)=“表達(dá)式”
其中表達(dá)式，之前在插值語(yǔ)法中{{這里可以寫(xiě)什么}}，那么指令當(dāng)中的表達(dá)式就可以寫(xiě)什么。

（3）注意
有的指令，不需要參數(shù)，也不需要表達(dá)式：v-once
有的指令，不需要參數(shù)，但是需要表達(dá)式：v-if=“表達(dá)式”
有的指令，即需要參數(shù)，又需要表達(dá)式：v-bind:參數(shù)=“表達(dá)式”

2.1v-once

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能。

• v-if = “表達(dá)式”
  表達(dá)式的結(jié)果是一個(gè)布爾值，true,則這個(gè)指令所在標(biāo)簽，會(huì)被渲染到瀏覽器當(dāng)中，false,則這個(gè)指令所在標(biāo)簽，不會(huì)渲染到瀏覽器當(dāng)中。

2.2 v-bind

作用：可以讓HTML標(biāo)簽的某個(gè)屬性的值產(chǎn)生動(dòng)態(tài)的效果。

語(yǔ)法格式：<HTML標(biāo)簽 v-bind:參數(shù)=“表達(dá)式”></HTML標(biāo)簽>

編譯原理：
編譯前<HTML標(biāo)簽 v-bind:參數(shù)=“表達(dá)式”></HTML標(biāo)簽>
編譯后<HTML標(biāo)簽 參數(shù)=“表達(dá)式執(zhí)行的結(jié)果”></HTML標(biāo)簽>

注意：
編譯的時(shí)候，參數(shù)名會(huì)被編譯為HTML的屬性名。
表達(dá)式會(huì)關(guān)聯(lián)data。

簡(jiǎn)寫(xiě)：<HTML標(biāo)簽 :參數(shù)=“表達(dá)式”></HTML標(biāo)簽>

區(qū)別插值：
凡是標(biāo)簽體當(dāng)中的內(nèi)容想要改變，則使用插值語(yǔ)法，凡是標(biāo)簽中的屬性想要改變，則使用指令語(yǔ)法

2.3 v-model

與v-bind的區(qū)別：
v-bind是單向綁定 （數(shù)據(jù)–>視圖）
v-model是雙向綁定 （數(shù)據(jù)<–>視圖）

簡(jiǎn)寫(xiě)：<HTML標(biāo)簽 v-model:value="表達(dá)式"></HTML標(biāo)簽>
簡(jiǎn)寫(xiě)為：<HTML標(biāo)簽 v-model="表達(dá)式"></HTML標(biāo)簽>

2.4 v-on

• 語(yǔ)法格式：
  <標(biāo)簽 v-on: 事件名="表達(dá)式">

• 表達(dá)式的內(nèi)容
  常量 JS表達(dá)式 Vue實(shí)例所管理的

• 事件關(guān)聯(lián)回調(diào)函數(shù)
  當(dāng)所有事件所關(guān)聯(lián)的回調(diào)函數(shù)，需要在Vue實(shí)例的配置項(xiàng)methods中定義。
  methods是一個(gè)對(duì)象：{}，在這個(gè)methods對(duì)象中可以定義多個(gè)回調(diào)函數(shù)。

• 簡(jiǎn)寫(xiě)

v-on:click                 @click
v-on:keydown               @keydown
v-on:mouserover            @mouserover

• 綁定的回調(diào)函數(shù)，如果函數(shù)調(diào)用時(shí)不需要傳遞任何參數(shù)，則（）可以省略。
• Vue在調(diào)用回調(diào)函數(shù)的時(shí)候，會(huì)自動(dòng)給回調(diào)函數(shù)傳遞一個(gè)對(duì)象，這個(gè)對(duì)象是：當(dāng)前發(fā)生的事件對(duì)象。
• 在綁定回調(diào)函數(shù)的時(shí)候，可以在回調(diào)函數(shù)的參數(shù)上使用$event占位符，Vue框架看到這個(gè)$event占位符，會(huì)自動(dòng)將當(dāng)前事件以對(duì)象的形式傳遞過(guò)去。

3.MVVM

4.事件回調(diào)函數(shù)中的this

上例中回調(diào)函數(shù)中的this指向的是Vue實(shí)例。
但是上例中的函數(shù)不能寫(xiě)成箭頭函數(shù)，如果寫(xiě)成箭頭函數(shù)，則this指向的是window。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-461800.html

到了這里，關(guān)于【Vue】二：Vue核心處理---模板語(yǔ)法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！