入门Vue.js 官方Todo例子解析

Vue的强大之处在一个小例子上都能体现出来，实现一个Todo的看例子仅需短短二三十行代码。

官方Todo例子源码

# html 模板代码
<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

# Vue源码
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})

HTML源码中使用的一些指令

指令：v-model

v-model用于在表单控件上创建双向绑定，类型随表单控件类型不同而不同。
参考资料 – 表单控件绑定

指令：v-on

绑定事件侦听器，事件类型由参数传入。普通元素只能侦听原生DOM事件，自定义元素可以侦听自定义事件。
v-on指令可以缩写为@
参考资料 – 方法与事件处理器

指令：v-for

类似于原生的for循环，基于数据源重复数次。
参考资料 – 列表渲染

Vue的JS源码中使用的指令

new Vue()

用于创建一个Vue实例

el

为Vue实例提供挂载元素，可以是CSS选择符，或者实际的HTML元素，或者返回HTML元素的函数。

data

Vue实例的数据对象，这个对象必须是普通对象。

定义组件时，data必须是一个函数，每次创建一个实例，都会调用这个函数，返回一个新的原始数据对象的副本。

不能使用_或者$开头的属性。
参考资料 – 深入响应式原理

methods

实例的方法，实例可以直接访问这些方法。方法的this自动绑定到实例。也可以直接在模板上直接调用本实例的方法。

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

参考资料 – 方法与事件处理器