<component :is="currentView"></component> <ul> <li><label><input type="radio" value='todo' v-model='currentView'> Home</label></li> <li><label><input type="radio" value='about' v-model='currentView'> About</label></li> </ul>
上面的代码有两处需要注意：
•通过 component这个特殊标签，然后用 :is 属性来进行组件的切换。
•radio 通过双向绑定来修改 currentView 字段，从而实现点击之后就可以进行切换。
数据绑定的实现原理
Vue 把双向绑定称作 reactive，可以翻译为响应式数据绑定。内部是通过 ES5 定义的 getter 和 setter 方法实现的，所以不支持 IE8 及以下浏览器，这种实现方式有两个容易犯错的地方：
•如果在 data 上直接添加和删除属性是无法被检测到的，一般删除是不会的，但是可能会动态添加，这个时候应该通过 vm.$set(“name”, value) 的方式来添加。
•无法检测到对象内部的变化，也就是只能检测 data 的属性变化，如果 data.a 是一个对象，那么 data.a.b = 1 这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 就行了。
异步更新机制
Vue 对DOM的更新是异步的！ 这个异步是在一个异步队列中进行的，不过这个异步队列会在当前的 Event Loop 中执行完，所以如果修改了 Data 立刻去DOM中做查询操作是不对的，这个时候DOM还没有更新，正确的做法是这样做：
vm.msg = 'new message' // change data vm.$el.textContent === 'new message' // false Vue.nextTick(function () { vm.$el.textContent === 'new message' // true })
或者这样：
vm.$nextTick(function () { this.$el.textContent === 'new message' // true })