怎么正确使用Vue.js的组件

Question

怎么正确使用Vue.js的组件

Answer 1

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051使用Vue.js的组件#&nbsp;下载最新的vue$&nbsp;npm&nbsp;install&nbsp;vuejs&nbsp;引用&nbsp;vue.js开始代码，感受vue强大的双向数据绑定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="app">&nbsp;&nbsp;<p>{{&nbsp;message&nbsp;}}</p>&nbsp;&nbsp;<input&nbsp;v-model="message"></div>&nbsp;&nbsp;&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;}})&nbsp;&nbsp;&nbsp;&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;&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;}})&nbsp;

Answer 2

正确使用Vue.js的组件：最基本一个vue结构如下：var vue = new Vue({el: 'body',data: {//这里负责数据myData: {},},ready: function () {//这里是vue初始化完成后执行的函数this.test();},methods: {//这里是自定义的方法test: function () {alert('test');}}});