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

Question

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

Answer 1

# 下载最新的vue$ npm install vuejs 引用 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)}}})

Answer 2

参考如下：下载最新的vue$ npm install vuejs 引用 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)}}})&nbsp;