**### 数据与方法

// 我们的数据对象var data = { a: 1 }// 该对象被加入到一个 Vue 实例中var vm = new Vue({  data: data})// 获得这个实例上的属性// 返回源数据中对应的字段vm.a == data.a // => true// 设置属性也会影响到原始数据vm.a = 2data.a // => 2// ……反之亦然data.a = 3vm.a // => 3***当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data})vm.$data === data // => truevm.$el === document.getElementById('example') // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) {  // 这个回调将在 `vm.a` 改变后调用})

实例生命周期钩子

比如 created 钩子可以用来在一个实例被创建之后执行代码：new Vue({  data: {    a: 1  },  created: function () {    // `this` 指向 vm 实例    console.log('a is: ' + this.a)  }})// => "a is: 1"也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

模板语法(插值：文本)

Message: {
   { msg }}Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：这个将不会改变: {
   { msg }}

模板语法(插值：原始 HTML)

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
Using v-html directive: 

模板语法(插值：特性)

Button如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的  元素中

模板语法(插值：使用 JavaScript 表达式)

{
   { number + 1 }}{
   { ok ? 'YES' : 'NO' }}{
   { message.split('').reverse().join('') }}
    

模板语法（指令）

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

模板语法（指令：参数）

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：...在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

模板语法（指令：参数）

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
    
     ...
    

语法模板缩写

    ...
    ...
    ...
    ...

计算属性和侦听器

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

对于任何复杂逻辑，你都应当使用计算属性。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
    
  
     
Original message: "{
   { message }}"
  
     
Computed reversed message: "{
   { reversedMessage }}"
    
var vm = new Vue({  el: '#example',  data: {    message: 'Hello'  },  computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }})

方法：
Reversed message: "{
   { reversedMessage() }}"
// 在组件中methods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  }}不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性 vs 侦听属性
    
     {
   { fullName }}
    
var vm = new Vue({  el: '#demo',  data: {    firstName: 'Foo',    lastName: 'Bar',    fullName: 'Foo Bar'  },  watch: {    firstName: function (val) {      this.fullName = val + ' ' + this.lastName    },    lastName: function (val) {      this.fullName = this.firstName + ' ' + val    }  }})

Class 与 Style 绑定

    
data: {  isActive: true,  hasError: false}

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

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

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

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

    
data: {  activeColor: 'red',  fontSize: 30}

    
data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}

条件渲染

    
       A
    
    
       B
    
    
       C
    
    
       Not A/B/C
    

列表渲染

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

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

Vue.set(vm.items, indexOfItem, newValue)vm.items.splice(indexOfItem, 1, newValue)vm.$set(vm.items, indexOfItem, newValue)vm.items.splice(newLength)

var vm = new Vue({  data: {    userProfile: {      name: 'Anika'    }  }})Vue.set(vm.userProfile, 'age', 27)vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，vm.userProfile = Object.assign({}, vm.userProfile, {  age: 27,  favoriteColor: 'Vue Green'})

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

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

事件处理

    
  
       
     Greet
    
var example2 = new Vue({  el: '#example-2',  data: {    name: 'Vue.js'  },  // 在 `methods` 对象中定义方法  methods: {    greet: function (event) {      // `this` 在方法里指向当前 Vue 实例      alert('Hello ' + this.name + '!')      // `event` 是原生 DOM 事件      if (event) {        alert(event.target.tagName)      }    }  }})// 也可以用 JavaScript 直接调用方法example2.greet() // => 'Hello Vue.js!'

    
  
     Say hi  
     Say what
    
new Vue({  el: '#example-3',  methods: {    say: function (message) {      alert(message)    }  }})

  Submit// ...methods: {  warn: function (message, event) {    // 现在我们可以访问原生事件对象    if (event) event.preventDefault()    alert(message)  }}

    
    
    
    
    
    
    
    
    
     ...
    
    
    
    
     ...
    
v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
    
    
    
    
     ...
    
    
    
    
    

表单输入绑定

Message is: {
   { message }}

{
   { checked }}

    
  
       
     Jack  
       
     John  
       
     Mike  
     
  
     Checked names: {
   { checkedNames }}
    
new Vue({  el: '#example-3',  data: {    checkedNames: []  }})

单选按钮
    
  
       
     One  
     
  
       
     Two  
     
  
     Picked: {
   { picked }}
    
new Vue({  el: '#example-4',  data: {    picked: ''  }})

选择框
    
  
         请选择    A    B    C    
     Selected: {
   { selected }}
    

      {
   { option.text }}  Selected: {
   { selected }}new Vue({  el: '...',  data: {    selected: 'A',    options: [      { text: 'One', value: 'A' },      { text: 'Two', value: 'B' },      { text: 'Three', value: 'C' }    ]  }})

// 当选中时vm.toggle === 'yes'// 当没有选中时vm.toggle === 'no'

// 当选中时vm.pick === vm.a