(32)Vue模板語法

模板語法

文本：

<span>Message: {{ msg }}</span>

v-once
一次性地插值，當數據改變時，插值處的內容不會更新

<span v-once>這個將不會改變: {{ msg }}</span>

v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<div v-bind:id="dynamicId"></div>

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

<p v-if="seen">如今你看到我了</p>

v-if 指令將根據表達式 seen 的值的真假來插入/移除 元素

<a v-bind:href="url">...</a>

深入理解語義化

Web 語義化是指使用恰當語義的 HTML 標籤、Class 類名等內容

HTML 爲網頁文檔內容提供上下文結構和含義

CSS語義就是class和ID命名的語義
Class 屬性做爲 HTML 與 CSS 銜接的紐帶，其本意是用來描述元素內容的

html語義化就是讓頁面的內容結構化

Web語義化是指使用恰當語義的html標籤、class類名等內容，讓頁面具備良好的結構與含義，從而讓人和機器都能快速理解網頁內容

html語義化及css命名語義化
利於 SEO，便於閱讀維護理解

Web標準-結構、樣式和行爲的分離

結構部分、樣式部分和行爲部分
結構部分主要包括XML標準、XHTML標準
樣式標準主要是指CSS標準
行爲標準主要包括DOM標準和ECMAScript標準

HTML：超文本標記語言，負責網頁的結構

一般語義化HTML會使代碼變的更少，使頁面加載更快

語義化HTML會使HTML結構變的清晰，有利於維護代碼和添加樣式

提高網頁的可訪問性和交互操做性

提高搜索引擎優化(SEO)的效果

v-on 指令，它用於監聽 DOM 事件

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

計算屬性和偵聽器

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

計算屬性緩存，方法，計算屬性，偵聽屬性，計算屬性的setter

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在組件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

計算屬性是基於它們的響應式依賴進行緩存的

只在相關響應式依賴發生改變時它們纔會從新求值

只要 message 尚未發生改變
屢次訪問 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數

偵聽屬性

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

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。

---