摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。

以下内容根据Vue.js Guide Essentials部分速记。
不含动画/mixin/SSR/路由/状态管理等部分.

Introduction

建议阅读原文 https://vuejs.org/v2/guide/in...

什么是Vue  
开始  
声明式渲染  
条件与循环  
处理用户输入  
组件

The Vue Instance

建议阅读原文 https://vuejs.org/v2/guide/in...

创建Vue实例  
data & methods  
实例生命周期及其钩子函数  
生命周期图表

Template Syntax

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

Mustache模板中插入值

html标签内的文本:使用{{变量名}}
原始html:标签属性内使用v-html="变量名"
标签内的属性:v-bind:属性名="变量名"
也可用JS的表达式来替换上述"变量名",但只能是单条表达式,不能是语句

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内的computed函数
computed属性会被缓存,出于性能考虑,不建议在{{}}中的表达式内执行method
computed属性会被缓存,即使是一个函数,也并不会每次都执行
computed是根据已有变量计算出的新变量

Watchers

watch用来监视已有变量,执行进一步操作.

Class and Style Bindings

(html标签中的)class与style绑定 https://vuejs.org/v2/guide/cl...

class

v-bind:class内的表达式会自动和class内已有class同时存在

可以:


data: {
  isActive: true,
  hasError: false
}  
结果: 


也可以:

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

也可以使用computed函数计算出的属性值/对象为class内的属性值/对象做数据来源

也可以使用数组来应用多个class名:

data: {
  activeClass: "active",
  errorClass: "text-danger"
}
结果: 

与其在array内使用三目运算符,不如嵌套使用object与array:

使用js定义组件时的class先出现,使用组件时添加的class(无论直接使用class还是v-bind:class)后出现.

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

1.


结果: 
Hi

2.
  
结果: 
Hi

style 内联样式

和class很像,但必须是object

可以:

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

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

也可以用对象数组:

(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元素结合使用,最终结果不包含template标签:

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

相同元素自动复用:

修改loginType的值不会产生新的input元素
会自动复用之前的元素
如果想避免自动复用,给input标签加上不同的key:

(label标签依然会被复用,因为没有指定key)

v-show

只控制css的display.
不支持template元素,不支持和v-else同时使用
经常切换显示隐藏,使用v-show
偶尔显示,变动少,使用v-if

v-if和v-for配合使用

v-for的优先级高.(见下一节)

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内部可以访问外部的所有变量,
还可以获取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内的index和parentMessage

v-for遍历object

  

    {{ value }}
  

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

  
John
  
Doe
  
30

(只有值,不管键名)

或者:

  {{ key }}: {{ value }}


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

(有index/键名/值)

内部引擎使用Object.keys()来遍历,不保证所有浏览器都表现一致

key

如果数据的顺序变动,vue不是调整各个子元素的顺序,而是直接修改现有子元素的内容
为了规避以上情况,可以给每个子元素绑定key:

探测数组更改情况

以下的数组方法都已经被Vue封装好,vue可以观察到原有数组的更改

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

替换数组:

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

以上方法不改变原有数组,直接返回新数组.
vue的使用方法如下:

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

数组更改警告

由于JS的限制,以下两种情况无法被vue观察到,请使用替代方案:

直接用索引设置某项的值

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

修改数组的长度

example1.items.splice(newLength)

对象更改警告

由于JS限制,vue观察不到动态添加根级别的属性到已有的实例:

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

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

但是允许内层的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"
})

而应该这样:

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

筛选与排序

不对原始数据修改,仅对需要显示的作筛选排序等.
灵活运用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循环内尤其有用):

{{ 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可以直接遍历整数:

  {{ n }} 

v-for on a