2、vuejs五脏

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)
}
}
})

<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>

构成一个vuejs应用最基本的代码就是new Vue({})，里面放上基本的零件：

1、el： app的id

2、页面所用到的数据对象

3、页面中所用到的方法，通过v-on绑定事件。

vue可以使用双向绑定：

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

在表单中添加v-model，绑定变量。