如何正确使用Vue.js的组件?

Question

如何正确使用Vue.js的组件

Answer 1

# 下载最新的vue$ npm install vuejs 引用 vue.js开始代码，感受vue强大的双向数据绑定<div&nbsp;id="app">&nbsp;&nbsp;<p>{{&nbsp;message&nbsp;}}</p>&nbsp;&nbsp;<input&nbsp;v-model="message"></div>&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;Vue({&nbsp;&nbsp;el:&nbsp;'#app',&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;'Hello&nbsp;Vue.js!'&nbsp;&nbsp;}})实战代码：<div&nbsp;id="app">&nbsp;&nbsp;<input&nbsp;v-model="newTodo"&nbsp;v-on:keyup.enter="addTodo">&nbsp;&nbsp;<ul>&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;v-for="todo&nbsp;in&nbsp;todos">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{&nbsp;todo.text&nbsp;}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;v-on:click="removeTodo($index)">X</button>&nbsp;&nbsp;&nbsp;&nbsp;</li>&nbsp;&nbsp;</ul></div>&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;Vue({&nbsp;&nbsp;el:&nbsp;'#app',&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;newTodo:&nbsp;'',&nbsp;&nbsp;&nbsp;&nbsp;todos:&nbsp;[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;text:&nbsp;'Add&nbsp;some&nbsp;todos'&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;]&nbsp;&nbsp;},&nbsp;&nbsp;methods:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;addTodo:&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;text&nbsp;=&nbsp;this.newTodo.trim()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(text)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todos.push({&nbsp;text:&nbsp;text&nbsp;})&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.newTodo&nbsp;=&nbsp;''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;removeTodo:&nbsp;function&nbsp;(index)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.todos.splice(index,&nbsp;1)&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;}})Vue整个生命周期示意图：