vue1.0學習總結

前言

　　使用vue已經有三、四個月了，但是只是學着使用了一些基本方法。因為現在的前端框架越來越多（Angular，React...），但是我相信萬變不離其宗，很多用法框架之間還是想通的，所以借總結的vue的機會深入了解vue到每個細節，以后能更加熟練地使用vue，有機會也能在別的框架中體會相通的思想。

一、基本&&重點介紹

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

二、數據綁定語法

• 模板
  • 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"

三、計算屬性

• 計算屬性會有一個響應依賴，並且它會持續追蹤它的響應依賴，如果響應依賴沒有變化，則會返回緩存結果。只有響應依賴變化的時候才會觸發視圖更新。
• 計算屬性默認只是 getter，不過在需要時你也可以提供一個 setter：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// ... 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 也會有相應更新。　　

 

四、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的綁定

1 2 3 4 5 6 7

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

 

五、條件渲染

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

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

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

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

 

六、列表渲染

 　　v-for

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

1 2 3 4 5 6 7 8 9 10 11

基本寫法一： <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)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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(下標) 

 

七、方法與事件處理器

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

1 2 3 4 5 6 7 8

<button v-on:click= "say('hello!', $event)" >Submit</button> <br> // ... methods: {    say:  function  (msg, event) {      // 現在我們可以訪問原生事件對象      event.preventDefault()    } }

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

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

　　

八、表單控件綁定

　　表單控件的綁定，主要由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：輸入延遲

 

九、過渡

　　動畫類處理方法，跳過

 

十、組件

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

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

1 2 3 4 5 6 7 8 9 10

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

 

props

　　可以從父組件傳給子組件的一些數據

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

1 2 3 4 5 6

<!-- 默認為單向綁定 --> <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()：廣播事件，父組件傳遞到子組件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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

　　我們將這個示例分為幾個步驟解讀：

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

 

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

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

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