vue1.0學習總結

前言

　　使用vue已經有3、四個月了，可是隻是學着使用了一些基本方法。由於如今的前端框架愈來愈多（Angular，React...），可是我相信萬變不離其宗，不少用法框架之間仍是想通的，因此借總結的vue的機會深刻了解vue到每一個細節，之後能更加熟練地使用vue，有機會也能在別的框架中體會相通的思想。

1、基本&&重點介紹

• 兼容性：vue不支持IE8及如下版本，由於IE8不支持vue所使用的ECMAScript5語法
• 數據驅動視圖：不須要操做DOM
• 支持雙向綁定：可是默認爲數據從父組件到子組件的單向綁定
• 組件化：每個用vue搭建起來的項目，其實都是一個組件樹

2、數據綁定語法

• 模板
  • Mustache 語法
  • 寫法： {{}} 插文本  {{{}}}插html　　
  • 能夠插在屬性裏 eg.<div id="item-{{ id }}"></div>
• 指令
  • 以v-爲前綴，後面能夠帶一個參數以:鏈接，此外還能夠帶一個修飾符以.鏈接   eg. v-bind:href="xxx",v-on:click="onClick"
  • 縮寫： v-bind:href ---> :href="xxx"    v-on:click ---> @click="xxx"

3、計算屬性

• 計算屬性會有一個響應依賴，而且它會持續追蹤它的響應依賴，若是響應依賴沒有變化，則會返回緩存結果。只有響應依賴變化的時候纔會觸發視圖更新。
• 計算屬性默認只是 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 也會有相應更新。　　

 

4、Class與Style的綁定

• class的綁定
  • 能夠經過變量的布爾值，來控制class最後的渲染結果
  • eg. <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> （ 顯示class-a或class-b是否加入到class裏，取決於isA和isB的布爾值）
• style的綁定

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

 

5、條件渲染

• v-if: 支持使用<template></template>做爲包裝元素，不用直接操控元素，且最終渲染結果不會包括它(<template></template>)
• v-show:  至關於控制display,不支持<template></template>

　　　注意：v-show直接用在組件上時，v-else會出現問題，能夠用v-show代替v-else

<custom-component v-show="condition"></custom-component>
<p v-show="!condition">這可能也是一個組件</p>

• v-if 和 v-show的區別： v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。由於v-if裏有數據和子組件，故操做時會不斷銷燬和重建，成本較高。可是v-show裏的元素會被始終編譯和保留

 

6、列表渲染

 　　v-for

• 遍歷數組
  • 塊內特殊變量： $index (數組索引)　
  • <template></template>包裝元素：適用
  • track-by: 指定數組以指定的某種順序來渲染視圖  eg.track-by="$index"

基本寫法一：
<ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>

基本寫法二：
<div v-for="(index, item) in items">
  {{ index }} {{ item.message }}
</div>

　　

• 遍歷對象
  • 塊內特殊變量：$key(對象中的key)

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

基本寫法一：
<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ $key }} : {{ value }}
  </li>
</ul>

基本寫法二：
<div v-for="(key, val) in object">
  {{ key }} {{ val }}
</div>

　　

　　數組變更檢測

• 數組方法：可觸發視圖更新

　　eg. .push()、.pop()、.shift()、.unshift()、.splice()、.sort()、.reverse()　

• 數組的限制：

　　1.不能之間用索引設置元素,eg.   vm.items[0] = {}；    解決辦法：使用$set方法，如 example.items.$set(0,{aaa:'changed!'})，這樣就能夠觸發新視圖了

　　2.不能直接設置數組的長短, eg.   vm.items.length = 0;    解決辦法：直接賦給一個空數組

• 數組的特殊方法

　　1. $set(數組索引，要修改的值)

　　使用方法：如上第一點的使用方法

　　2.$remove(下標) 

 

7、方法與事件處理器

• 事件中的特殊變量：$event  

<button v-on:click="say('hello!', $event)">Submit</button>

// ...
methods: {
  say: function (msg, event) {
    // 如今咱們能夠訪問原生事件對象
    event.preventDefault()
  }
}

• 事件修飾符： .prevent阻止默認事件  .stop阻止冒泡事件 .self只在事件發生在該元素自己（不爲子元素）時觸發回調  .capture添加事件監聽器時
• 按鍵修飾符：enter 、tab、delete、esc、space、up、down、left、right

<input v-on:keyup.enter="submit">

　　

8、表單控件綁定

　　表單控件的綁定，主要由v-model進行雙向綁定

　　表單

• text/textarea: v-model 綁定的值就是text的值
• checkbox: v-model綁定的值默認爲布爾值（也能夠自定義），多個checkbox綁定同一個值，對應每一個checkbox的值爲其value值
• radio: v-model綁定的值爲其value值，多個radio綁定同一個值，對應每一個radio的值爲其value值
• select: 單選時，v-model綁定的值爲option中value;多選時，要在select上加multiple

　　參數特性　

• lazy：在默認狀況下，v-model 在input 事件中同步輸入框值與數據，能夠添加一個特性 lazy，從而改到在 change 事件中同步
• number：自動將用戶輸入的轉成Number
• debounce：輸入延遲

 

9、過渡

　　動畫類處理方法，跳過

 

10、組件

　　前面提到vue的項目就是一個組件樹，一個頁面的全部可見的模塊均可以細化成一個組件。

　　想要實現一個組件主要先從初始化根實例，定義組件和註冊組件

// 定義
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// 註冊
Vue.component('my-component', MyComponent)
// 建立根實例
new Vue({
  el: '#example'
})

 

props

　　能夠從父組件傳給子組件的一些數據

• 綁定修飾符：.sync 和 .once　

<!-- 默認爲單向綁定 -->
<child :msg="parentMsg"></child>
<!-- 雙向綁定 -->
<child :msg.sync="parentMsg"></child>
<!-- 單次綁定 -->
<child :msg.once="parentMsg"></child>

• props中的type驗證： Stirng、Number、Object、Function、Boolean、Array

父子組件通訊

• 自定義事件
  • $on() 監聽事件，通常在ready時就要進行監聽，否則相似$dispatch事件沒辦法傳遞數據
  • $emit()　　
  • $dispatch() 派發事件，子組件派發到父組件
  • $broadcast()：廣播事件，父組件傳遞到子組件

<!-- 子組件模板 -->
<template id="child-template">
  <input v-model="msg">
  <button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父組件模板 -->
<div id="events-example">
  <p>Messages: {{ messages | json }}</p>
  <child></child>
</div>

// 註冊子組件
// 將當前消息派發出去
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        this.$dispatch('child-msg', this.msg)
        this.msg = ''
      }
    }
  }
})

// 初始化父組件
// 將收到消息時將事件推入一個數組
var parent = new Vue({
  el: '#events-example',
  data: {
    messages: []
  },
  // 在建立實例時 `events` 選項簡單地調用 `$on`
  events: {
    'child-msg': function (msg) {
      // 事件回調內的 `this` 自動綁定到註冊它的實例上
      this.messages.push(msg)
    }
  }
})

　　咱們將這個示例分爲幾個步驟解讀：

1. 子組件的button元素綁定了click事件，該事件指向notify方法
2. 子組件的notify方法在處理時，調用了$dispatch，將事件派發到父組件的child-msg事件，並給該該事件提供了一個msg參數
3. 父組件的events選項中定義了child-msg事件，父組件接收到子組件的派發後，調用child-msg事件。

 

• 用v-on綁定自定義事件　　

<child v-on:child-msg="handleIt"></child>

　　當子組件觸發了 "child-msg" 事件，父組件的 handleIt 方法將被調用。全部影響父組件狀態的代碼放到父組件的 handleIt 方法中；子組件只關注觸發事件。

 

 

 

參考資料：

http://www.cnblogs.com/keepfool/

http://v1-cn.vuejs.org/guide/components.html