# 下载最新的vue
$ npm install vue
js 引用 vue.js
开始代码，感受vue强大的双向数据绑定
<div id="app"><p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
实战代码：
<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>
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)
}
}
})
Vue整个生命周期示意图：
vuemain.js注册的方法vue组件的data中引用报错，需要解决循环引用报错问题。具体操作步骤如下：1、打开vuemain.js项目，使用全局引入组件。
2、在vue实例化前，在main.js里完成引入。
3、通过import，selFile代码，修改vue组件的data引用方式即可。
