1-2. Vue.js核心知識之模板渲染

Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。

插值

<!-- 隨變量msg的值進行更新 -->
<p>普通文本，雙向綁定: {{ msg }}</p>
<!-- 不隨msg的值進行更新 -->
<p v-once>普通文本，單次綁定: {{ msg }}</p>
<!-- 能夠輸出帶html標籤的富文本 -->
<p>輸出html代碼: <span v-html="rawHtml"></span></p>
<!-- 按鈕是否可用取決於變量isDisabled轉換的布爾取值 -->
<button v-bind:disabled="isDisabled">動態改變屬性值</button>
<!-- 顯示'是'仍是'否'取決於變量value的布爾取值 -->
<p>{{ value ? '是' : '否' }}</p>
<!-- 字符串反轉，若是message的值是123，則顯示321 -->
<p>{{ message.split('').reverse().join('') }}</p>

條件

vue中使用v-if、v-else和v-else-if來實現條件渲染

<!-- 當isOk爲真時顯示是，爲假時顯示否-->
<p>
 <span v-if="isOk">是</span>
 <span v-else>否</span>
</p>
<!-- 條件渲染分組，當isRender爲真時，纔會去渲染裏面的DOM內容 -->
<template v-if="isRender">
 <h1>標題</h1>
 <p>段落 1</p>
 <p>段落 2</p>
</template>

另外一個用於根據條件展現元素的方法是使用v-show

<!-- 當isShow爲真時，顯示DOM內容 -->
<h1 v-show="isShow">顯示內容</h1>

v-if 是惰性的，若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
v-show 就簡單得多，無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

列表

vue中使用 v-for 把數組渲染成選項列表。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組，item 是數組元素迭代的別名。

<!-- 把items數組渲染成列表 -->
<ul id="list">
 <li v-for="item in items">
  {{ item.message }}
 </li>
</ul>
<!-- items數組中的數據 -->
<script>
  new Vue({
   el: '#list',
   data: {
    items: [
     { message: '列表項1' },
     { message: '列表項2' },
     { message: '列表項3' },
    ]
   }
  })
</script>

也能夠用 v-for 經過一個對象的屬性來迭代。

<!-- 將object對象的屬性渲染成列表 -->
<ul id="object">
 <li v-for="value in object">
  {{ value }}
 </li>
</ul>
<!-- object對象中的數據 -->
new Vue({
 el: '#object',
 data: {
  object: {
   firstName: 'John',
   lastName: 'Doe',
   age: 30
  }
 }
}

指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性。當指令對應的表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

<!-- 變量seen的值影響p標籤的渲染 -->
<p v-if="seen">如今你看到我了</p>
<!-- 變量url的值就是a標籤的連接地址 -->
<a v-bind:href="url">這裏是個連接</a>
<!-- 變量doSomething是一個函數，a標籤點擊時會觸發運行doSomething函數 -->
<a v-on:click="doSomething">點擊觸發事件</a>
<!-- prevent修飾符做用是阻止默認表單提交事件 -->
<form v-on:submit.prevent="onSubmit">修飾符做用</form>

小結

本節主要學習了vue模板渲染的幾種形式：文本插值、屬性渲染、條件渲染、列表渲染和指令改變渲染。咱們經過這些渲染方式就能夠輕鬆的經過數據控制頁面的顯示內容了。