建議學(xué)習(xí)時(shí)長(zhǎng)： 60分鐘
學(xué)習(xí)方式：深入

學(xué)習(xí)目標(biāo)

• 知道如何創(chuàng)建個(gè) Vue 實(shí)例罚攀。知道實(shí)例上的數(shù)據(jù)和函數(shù)應(yīng)該怎么寫(xiě)。
• 知道如何遍歷數(shù)據(jù)雌澄，條件輸出數(shù)據(jù)斋泄。
• 知道如何綁定事件。

詳細(xì)介紹

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

看這幾塊：

• Vue 實(shí)例
• 模板語(yǔ)法
• 條件渲染
• 列表渲染
• 事件處理器

下面是一些示例：

循環(huán)數(shù)組

<ul>
  <li v-for="item in items">{{ item.message }}</li>
  <!-- 獲取當(dāng)前數(shù)組下標(biāo) -->
  <li v-for="(item, index) in items"> 第{{ index }}條:{{ item.message }}</li>
  <!-- 通過(guò)加key 募胃，讓 Vue 能跟蹤節(jié)點(diǎn)的身份，從而提高性能畦浓。key 的值是在數(shù)組中是不能重復(fù)的痹束。 -->
  <li v-for="item in items" :key="item.id"> {{ item.message }}</li>
</ul>

items 的結(jié)構(gòu)類(lèi)似這樣

[{
  id: 1,
  message: 'foo'
}, {
  id: 2,
  message: 'bar'
}]

循環(huán)對(duì)象

<li v-for="(value, key) in obj">key is {{key}}, value is {{value}}</li>

循環(huán)數(shù)字

<!-- n 從 1 開(kāi)始  -->
<span v-for="n in 10">{{ n }} </span>

條件

<!-- 如果ok為false, 不輸出在 HTML 中 -->
<div v-if="ok">Yes</div>
<div v-else>No</div>

<!-- 如果ok為false,只是 display:none 而已 -->
<h1 v-show="ok">Hello!</h1>

事件綁定

<button v-on:click="say('hi')">點(diǎn)擊</button>
<!-- 簡(jiǎn)寫(xiě) -->
<button @click="say('hi')">點(diǎn)擊</button>
<!-- 傳入 event 對(duì)象 -->
<button @click="say('hi', $event)">點(diǎn)擊</button>
<!-- 阻止單擊事件冒泡 -->
<button @click.stop="doSth">點(diǎn)擊</button>
<!-- 阻止默認(rèn)行為 -->
<button @submit.prevent="doSth">點(diǎn)擊</button>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div @click.self="doThat">...</div>
<!-- 修飾符可以串聯(lián) -->
<a @click.stop.prevent="doThat"></a>
<!-- 按鍵修飾符：回車(chē)時(shí)才會(huì)執(zhí)行 -->
<input @keyup.13="submit"><!-- 13 為 keycode -->
<input @keyup.enter="submit">
<!-- 支持的按鈕有 enter, tab, delete, space, up, down, left, right -->

綁定屬性

<div v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<div v-bind:class="classArr"></div> <!-- classArr 是一個(gè)數(shù)組 -->
<!-- 簡(jiǎn)寫(xiě) -->
<div :class="{ 'class-a': isA, 'class-b': isB }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
![](imgSrc)
<a :href="baseURL + '/path'">

如果屬性值是變量，必須用綁定屬性的寫(xiě)法讶请。

// wrong
![]({{imgSrc}})
// right
![](imgSrc)

避免閃爍： v-cloak

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

編譯結(jié)束后祷嘶，Vue 會(huì)刪除元素上的 cloak 屬性。

輸出 HTML

<div v-html="raw_html"></div>

注意：只在可信內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上论巍，否則會(huì)導(dǎo)致XSS攻擊剿牺。

計(jì)算屬性

<div id="demo">{{fullName}}</div>

new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
});