本篇文章給大家總結(jié)了vue的基礎(chǔ)語法，其中包括計(jì)算屬性、事件監(jiān)聽、條件渲染、以及列表渲染等等相關(guān)問題，希望對(duì)大家有幫助。

Vue筆記二：基礎(chǔ)語法

1、 插值（動(dòng)態(tài)內(nèi)容）

Mustache語法(雙大括號(hào))

將data中的文本數(shù)據(jù)，插入到HTML中，此時(shí)數(shù)據(jù)是響應(yīng)式的。

<span>Message: {{ msg }}</span> <span>{{firstName}}{{lastName}}</span> <span>{{firstName+lastName}}</span> <span>{{firstName+""+lastName}}</span> //使用 JavaScript 表達(dá)式 <h2> {{counter*2}}</h2> <h2>{{ number + 1 }}</h2> <h2>{{ ok ? 'YES' : 'NO' }}</h2> <h2>{{ message.split('').reverse().join('') }}</h2>

指令

• v-once：執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新

<span v-once>這個(gè)將不會(huì)改變: {{ msg }}</span>

• v-html :解析html并展示
• v-text：渲染指定dom的內(nèi)容文本，類似Mustache，一般不用，不夠靈活，會(huì)覆蓋標(biāo)簽內(nèi)所有內(nèi)容
• v-pre：原封不動(dòng)展示標(biāo)簽內(nèi)容，不進(jìn)行解析

<h2 v-pre>{{message}} </h2>

結(jié)果：{{message}}

• v-cloak：解決vue解析卡頓會(huì)出現(xiàn){{}}閃爍的問題
  vue解析之前，p有屬性v-cloak，解析后沒有此屬性。
  所以 可以通過這個(gè)指令隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢

  <p id="app" v-cloak>{{message}}</p>

  <style>       [v-cloak]{ display:none; }   </style>

2、綁定屬性（動(dòng)態(tài)屬性）

v-bind用于綁定一個(gè)或多個(gè)屬性值，或者向另一個(gè)組件傳遞props值。簡寫為冒號(hào):

1、元素的src和href

<img :src="ImgUrl" /><a :href="aHref">百度</a>

2、class綁定

對(duì)象語法

我們可以傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class

<p v-bind:class="{ active: isActive }"></p>

上面的語法表示 active 這個(gè) class 存在與否將取決于數(shù)據(jù) property isActive 的 truthiness。
你可以在對(duì)象中傳入