Vue學習記錄

Vue學習記錄

Vue實例

Vue實例的創建

var vm = new Vue({
  // 選項
})

數據凍結

使用 Object.freeze()，這會阻止修改現有的屬性，也意味着響應系統無法再追蹤變化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- 這裏的 `foo` 不會更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

$

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回調將在 `vm.a` 改變後調用
})

以後你可以在 API 參考中查閱到完整的實例屬性和方法的列表。

實例生命週期鉤子

比如 created 鉤子可以用來在一個實例被創建之後執行代碼：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的鉤子，在實例生命週期的不同階段被調用，如 mounted、updated和 destroyed。生命週期鉤子的 this 上下文指向調用它的 Vue 實例。

下圖展示了實例的生命週期。你不需要立馬弄明白所有的東西，不過隨着你的不斷學習和使用，它的參考價值會越來越高。

模板語法

插值

文本

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

v-once

通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：

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

v-html

<span v-html="rawHtml"></span></p>

v-bind:

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

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。

JS表達式

{{ number + 1 }}

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

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

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

每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

指令

<p v-if="seen">現在你看到我了</p>

這裏，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

參數

一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 特性：

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

在這裏 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。

<a v-on:click="doSomething">...</a>

縮寫

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

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

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

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

計算屬性和偵聽器

計算屬性 computed

<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('')
    }
  }
})

計算屬性緩存 vs 方法

通過在表達式中調用方法來達到同樣的效果：

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

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

我們可以將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的依賴進行緩存的。

下面的計算屬性將不再更新

computed: {
  now: function () {
    return Date.now()
  }
}

計算屬性 vs 偵聽屬性

computed: {  /*computed 中定義的計算屬性 表示一個屬性由其他屬性計算而來 ， 如果firstName 或者 lastName沒有改變時， 當再次使用它時 ， 它會直接使用上次使用的緩存結果*/
    fullName : function(){
        return this.firstName + ' ' + this.lastName;
    }
}

計算屬性的 setter

計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：

// ...
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]
    }
  }
}
// ...

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

偵聽器 watch

watch 選項提供了一個更通用的方法，來響應數據的變化

vm.$watch API。

Class 與 Style 綁定

我們可以傳給 v-bind:class 一個對象，以動態地切換 class：

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

上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive

你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

結果渲染爲：

<div class="static active"></div>

綁定的數據對象不必內聯定義在模板裏：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的結果和上面一樣。

我們也可以在這裏綁定一個返回對象的計算屬性。這是一個常用且強大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

數組語法 ： 我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染爲：

<div class="active text-danger"></div>

如果你也想根據條件切換列表中的 class，可以用三元表達式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>