摘要：以下內(nèi)容根據(jù)部分速記。同時，需要在父組件標(biāo)簽中添加這個屬性，該屬性才能傳遞到子組件內(nèi)。把父組件傳遞的數(shù)據(jù)當(dāng)做子組件的初始值。

以下內(nèi)容根據(jù)Vue.js Guide Essentials部分速記。
不含動畫/mixin/SSR/路由/狀態(tài)管理等部分.

Introduction

建議閱讀原文 https://vuejs.org/v2/guide/in...

什么是Vue  
開始  
聲明式渲染  
條件與循環(huán)  
處理用戶輸入  
組件

The Vue Instance

建議閱讀原文 https://vuejs.org/v2/guide/in...

創(chuàng)建Vue實例  
data & methods  
實例生命周期及其鉤子函數(shù)  
生命周期圖表

Template Syntax

模板語法 https://vuejs.org/v2/guide/sy...

Mustache模板中插入值

html標(biāo)簽內(nèi)的文本:使用{{變量名}}
原始html:標(biāo)簽屬性內(nèi)使用v-html="變量名"
標(biāo)簽內(nèi)的屬性:v-bind:屬性名="變量名"
也可用JS的表達(dá)式來替換上述"變量名",但只能是單條表達(dá)式,不能是語句

v-if等指令

argument:如v-bind:href中的href
modifier:如v-on:submit.prevent="onSubmit"中的.prevent

v-bind、v-on簡寫

v-bind:href等同于:href
v-on:click="doSth"等同于@cllick="doSth"

Computed Properties and Watchers

https://vuejs.org/v2/guide/co...

Computed Properties

js內(nèi)的computed函數(shù)
computed屬性會被緩存,出于性能考慮,不建議在{{}}中的表達(dá)式內(nèi)執(zhí)行method
computed屬性會被緩存,即使是一個函數(shù),也并不會每次都執(zhí)行
computed是根據(jù)已有變量計算出的新變量

Watchers

watch用來監(jiān)視已有變量,執(zhí)行進(jìn)一步操作.

Class and Style Bindings

(html標(biāo)簽中的)class與style綁定 https://vuejs.org/v2/guide/cl...

class

v-bind:class內(nèi)的表達(dá)式會自動和class內(nèi)已有class同時存在

可以:


data: {
  isActive: true,
  hasError: false
}  
結(jié)果: 


也可以:

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

也可以使用computed函數(shù)計算出的屬性值/對象為class內(nèi)的屬性值/對象做數(shù)據(jù)來源

也可以使用數(shù)組來應(yīng)用多個class名:

data: {
  activeClass: "active",
  errorClass: "text-danger"
}
結(jié)果: 

與其在array內(nèi)使用三目運算符,不如嵌套使用object與array:

使用js定義組件時的class先出現(xiàn),使用組件時添加的class(無論直接使用class還是v-bind:class)后出現(xiàn).

Vue.component("my-component", {
  template: "
Hi
"
})

1.


結(jié)果: 
Hi

2.
  
結(jié)果: 
Hi

style 內(nèi)聯(lián)樣式

和class很像,但必須是object

可以:

data: {
  activeColor: "red",
  fontSize: 30
}
也可以:

data: {
  styleObject: {
    color: "red",
    fontSize: "13px"
  }
}  
也可以使用computed  

也可以用對象數(shù)組:

(baseStyles/overridingStyles都是object)

使用v-bind:style會自動加上prefix
也可以手動加:

Conditional Rendering

條件渲染 https://vuejs.org/v2/guide/co...

v-if/v-else/v-else-if

Yes
也可以配合else使用: 
No

v-if可以和template元素結(jié)合使用,最終結(jié)果不包含template標(biāo)簽:

v-else必須緊跟v-if或v-else-if
v-else-if:

  A


  B


  C


  Not A/B/C

v-else-if必須緊跟v-if或v-else-if

相同元素自動復(fù)用:

修改loginType的值不會產(chǎn)生新的input元素
會自動復(fù)用之前的元素
如果想避免自動復(fù)用,給input標(biāo)簽加上不同的key:

(label標(biāo)簽依然會被復(fù)用,因為沒有指定key)

v-show

只控制css的display.
不支持template元素,不支持和v-else同時使用
經(jīng)常切換顯示隱藏,使用v-show
偶爾顯示,變動少,使用v-if

v-if和v-for配合使用

v-for的優(yōu)先級高.(見下一節(jié))

List Rendering

列表渲染 https://vuejs.org/v2/guide/li...

v-for遍歷array

  

    {{ item.message }}
  

var example1 = new Vue({
  el: "#example-1",
  data: {
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
})

v-for內(nèi)部可以訪問外部的所有變量,
還可以獲取index:

  

    {{ parentMessage }} - {{ index }} - {{ item.message }}
  

var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
})

  

    {{ parentMessage }} - {{ index }} - {{ item.message }}
  

var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
})
注意v-for內(nèi)的index和parentMessage

v-for遍歷object

  

    {{ value }}
  

new Vue({
  el: "#v-for-object",
  data: {
    object: {
      firstName: "John",
      lastName: "Doe",
      age: 30
    }
  }
})
結(jié)果:

  
John
  
Doe
  
30

(只有值,不管鍵名)

或者:

  {{ key }}: {{ value }}


  {{ index }}. {{ key }}: {{ value }}

(有index/鍵名/值)

內(nèi)部引擎使用Object.keys()來遍歷,不保證所有瀏覽器都表現(xiàn)一致

key

如果數(shù)據(jù)的順序變動,vue不是調(diào)整各個子元素的順序,而是直接修改現(xiàn)有子元素的內(nèi)容
為了規(guī)避以上情況,可以給每個子元素綁定key:

探測數(shù)組更改情況

以下的數(shù)組方法都已經(jīng)被Vue封裝好,vue可以觀察到原有數(shù)組的更改

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替換數(shù)組:

filter()
concat()
slice()
...

以上方法不改變原有數(shù)組,直接返回新數(shù)組.
vue的使用方法如下:

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

數(shù)組更改警告

由于JS的限制,以下兩種情況無法被vue觀察到,請使用替代方案:

直接用索引設(shè)置某項的值

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
或者
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

修改數(shù)組的長度

example1.items.splice(newLength)

對象更改警告

由于JS限制,vue觀察不到動態(tài)添加根級別的屬性到已有的實例:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

但是允許內(nèi)層的object添加屬性:

var vm = new Vue({
  data: {
    userProfile: {
      name: "Anika"
    }
  }
})

可以使用
Vue.set(vm.userProfile, "age", 27)
或者
vm.$set(this.userProfile, "age", 27)

如果需要更新多個屬性,直接使用添加屬性后的新對象替換原有對象,
不要:

Object.assign(this.userProfile, {
  age: 27,
  favoriteColor: "Vue Green"
})

而應(yīng)該這樣:

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: "Vue Green"
})

篩選與排序

不對原始數(shù)據(jù)修改,僅對需要顯示的作篩選排序等.
靈活運用computed或methods:

computed:

{{ n }}

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

methods(在嵌套v-for循環(huán)內(nèi)尤其有用):

{{ n }}

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for with a Range

v-for可以直接遍歷整數(shù):

  {{ n }} 

v-for on a