1.声明式渲染

vue.js核心是允许你采用简洁的模板语法来声明式的将数据渲染进DOM系统。通过{{}}绑定DOM内容和vue实例的某属性内容，通过v-bind指令绑定元素的某个属性和vue实例的某个属性。

2.条件与循环

控制一个元素显示或者隐藏，只需要给元素添加v-if="seen",在vue实例里的data属性的seen属性值为true或者false。

v-for 指令可以绑定数据到数组来渲染一个列表：

<--html-->

<div id="app-4">
　　<ol>
　　　　<li v-for="todo in todos">
　　　　　　{{ todo.text }}
　　　　</li>
　　</ol>
</div>
<--js-->
var app4 = new Vue({
　　el: '#app-4',
　　data: {
　　todos: [
　　　　{ text: 'Learn JavaScript' },
　　　　{ text: 'Learn Vue' },
　　　　{ text: 'Build something awesome' }
　　　　]
　　}
})
3.处理用户输入
用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法。
<--html-->
<div id="app-5">
　　<p>{{ message }}</p>
　　<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<--js-->
var app5 = new Vue({
　　el: '#app-5',
　　data: {
　　　　message: 'Hello Vue.js!'
　　},
　　methods: {
　　　　reverseMessage: function () {
　　　　this.message = this.message.split('').reverse().join('')
　　}
　　}
})
用v-model 指令，在表单输入和应用状态中做双向数据绑定。
4.用组件构建
在vue里一个组件实际上是一个拥有预定义选项的vue实例。
Vue.component('todo-item', {//定义一个组件
　　template: '<li>This is a todo</li>'
})
<ol><!--写入组件，但是每一个todo会渲染一样的文本-->
　　<todo-item></todo-item>
</ol>
Vue.component('todo-item', {//重新定义组件，使它接受一个props字段
　　props: ['todo'],
　　template: '<li>{{ todo.text }}</li>'
})
<div id="app-7"><!--用v-bind 指令将 todo 传到每一个重复的组件中：-->
　　<ol>
　　　　<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
　　</ol>
</div>