Vue 教程第二篇—— 模版語法

模版語法

模版語法已成爲前端在數據驅動模式上 V 層最好的實現。

插值

<div id="app">
  <!-- 文本 當對 data.message 發生改變時，對應插值的內容也會自動改變-->
  <fieldset>
    <legend>文本</legend>
    <div>{{message}}</div>
  </fieldset>

  <!-- 純 HTML {{}} 這種形式最終會被解釋成文本，若是要想輸入 HTML 結構，使用要用到 v-html="對象"-->
  <fieldset>
    <legend>純 HTML</legend>
    <div v-html="rawHtml"></div>
  </fieldset>        

  <!-- 屬性 元素的任意屬性（包含自定義屬性）均可以和對象綁定 :屬性名(或者 v-bind:屬性名)=「對象」-->
  <fieldset>
    <legend>屬性</legend>
    <img :src="src" alt="" />
    <img v-bind:src="'../imgs/red.jpg'" alt="" />
  </fieldset>    

  <!-- js 表達式 {{}} 能夠用來解釋 js 的表達式-->
  <fieldset>
    <legend>js 表達式</legend>
    <div>{{1 + 1}}</div>
    <div>{{status ? 'YES' : 'NO'}}</div>
    <div>{{message.split('').reverse().join('')}}</div>
  </fieldset>    
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: '我是文本',
    rawHtml: '<h1>我是 h1 標籤</h1>',
    src: '../imgs/green.jpg',
    status: true,
  }
})

插值效果預覽

縮寫

v-bind 縮寫

<!--完整寫法-->
  <img v-bind:src="'../imgs/red.jpg'" alt="" />
  <!--縮寫-->
  <img :src="src" alt="" />

v-on 縮寫

<!--完整語法-->
  <button v-on:click="greet">Greet</button>
  <!--縮寫語法-->
  <button @click="greet">Greet</button>

指令

指令（Directive），換句話說就是元素的自定義屬性，在 Vue 中是以 v- 爲前綴的自定義屬性，屬性值爲對象或 js 表達式

指令	類型	用法
v-text	string	<!--v-text--> ` html <span v-text="msg"></span> <!--效果等同於--> <!--v-text 的權重高於 {{}}--> <span>{{msg}}</span> `
v-html	string	<!--v-html--> ` html <div v-html="html"></div> `
v-show	boolean	<!--v-show--> ` html <!--show 的值會直接影響 div 在文檔中是否顯示--> <div v-show="show"></div> `
v-if	boolean	<!--v-if--> ` html <!--status 的值會直接影響 div 在文檔中是否存在--> <div v-if="status"></div> `
v-else-if	boolean	<!--v-else-if--> ` html <div v-if="flag == 1">1</div> <!--必須跟 v-if 或者 v-else-if 元素後面--> <div v-else-if="flag == 2">2</div> `
v-else	不須要表達式	<!--v-else--> ` html <div v-if="flag == 1">1</div> <div v-else-if="flag == 2">2</div> <!--必須跟 v-if 或者 v-else-if 元素後面--> <div v-else>2</div> `
v-for	Array | Object | Number | String	<!--v-for--> ` html <!-- data = 3 結果會生成 3 個 div， value 的值分類爲 1, 2, 3 index 的值分別爲 0, 1, 2 --> <div v-for="(value, index) in data"> <span v-text="value"></span> <span>{{index}}</span> </div> <!--也能夠這樣寫--> <div v-for="value in data"> <span v-text="value"></span> </div> <!-- data = "abc" 結果會生成 data.length 個 div， value 的值分類爲 a, b, c index 的值分別爲 0, 1, 2 --> <div v-for="(value, index) in data"> <span v-text="value"></span> <span>{{index}}</span> </div> <!--也能夠這樣寫--> <div v-for="value in data"> <span v-text="value"></span> </div> <!-- data = {name: 'dk', age: 18} 結果會生成 data 屬性個數 個 div， value 的值分類爲 dk, 18 key 的值分別爲 name, age --> <div v-for="(value, key) in data"> <span v-text="key"></span> <span>{{value}}</span> </div> <!--也能夠這樣寫--> <div v-for="value in data"> <span v-text="value"></span> </div> <!-- data = [{name: 'dk1', age: 18}, {name: 'dk2', age: 20}] 結果會生成 data.length 個 div， obj 的值分類爲 data[0], data[1] index 的值分別爲0, 1 --> <div v-for="(obj, index) in data"> <span v-text="JSON.stringify(obj)"></span> <span>{{index}}</span> </div> <!--也能夠這樣寫--> <div v-for="obj in data"> <span v-text="JSON.stringify(obj)"></span> </div> `
v-on	Function	<!--v-on--> ` html <!--click事件直接綁定一個方法--> <button v-on:click="say1">say1</button> <!--縮寫方式--> <!--click事件使用內聯語句--> <button @click="say2('調用了 say2', $event)">say2</button> `
v-bind	Object	<!--v-bind--> ` html <img v-bind:src="'imgs/red.jpg'" /> <!--縮寫方式--> <img :src="'imgs/yellow.jpg'" /> `
v-model	表單元素的值	<!--v-model--> ` html <!--僅限於表單元素，雙向綁定--> <input type="text" v-model="mess"/> `
v-pre	不須要表達式	<!--v-pre--> ` html <!--{{}} 不編譯，當字符串輸出--> <span v-pre>{{mess}}</span> `
v-cloak	不須要表達式	<!--v-cloak--> ` html <!-- mess = 'abc' span 還沒被 vue 解析的時候會顯示 {{mess}} 解析後會顯示 123 用於解決這兩個轉換的過程不友好的顯示 尤爲是在頁面加載過慢的狀況很容易出現這種狀況 --> <span v-cloak>{{mess}}</span> `
v-once	不須要表達式	<!--v-once--> ` html <!--內容只解釋一次，當改變 mess 時不會再次映射到 span--> <span v-once>{{mess}}</span> `

指令效果預覽

綜合案例預覽