Hello, !

```

双向绑定

用户更新 View，Model 的数据也自动被更新
用v-model指令把某个<input>和 Model 的某个属性作双向绑定

```html

```

window.vm.$data 查看 Model 的内容，window.vm.name 查看 Model 的 name 属性

多个 checkbox 对应 Model language: ['zh', 'en']
单个 checkbox 对应 Model subscribe: true
下拉框<select>绑定的 value 而非文本

处理事件

html <form id="vm" v-on:submit.prevent="register">

v-on:submit="register" 监听表单的 submit 事件，并调用 register 方法处理该事件。使用 .prevent 表示阻止事件冒泡(.stop?)

javascrip var vm = new Vue({ el: '#vm', data: { ... }, methods: { register: function () { // 显示JSON格式的Model: alert(JSON.stringify(this.$data)); // TODO: AJAX POST... } } });

同步 DOM

v-for 指令把数组和一组 <li> 元素绑定

javascrip todos: [obj1, obj2, ...rest]

```html

1. {{ t.name }}

   {{ t.description }}

```

Vue 之所以能够监听 Model 状态的变化，是因为 JavaScript 语言本身提供了 Proxy 或者 Object.observe() 机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听

类似 todos[0] = new_obj 无法更新 View

集成 API

vue-resource 扩展

```javascrip var vm = new Vue({ ... created: function () { this.init(); }, methods: { init: function () { var that = this; that.$resource('/api/todos').get().then(function (resp) { // 调用API成功时调用json()异步返回结果: resp.json().then(function (result) { // 更新VM的todos: that.todos = result.todos; }); }, function (resp) { // 调用API失败: alert('error'); }); } create: function (todo) { var that = this; that.$resource('/api/todos').save(todo).then(function (resp) { resp.json().then(function (result) { that.todos.push(result); }); }, showError); }, update: function (todo, prop, e) { ... }, remove: function (todo) { ... } } });

// 另一个 Vue 对象负责操作表单 var vmAdd = new Vue({ el: '#vmAdd', data: { ... }, methods: { submit: function () { vm.create(this.$data); } } }); ```

-->