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

Question

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

Answer 1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

使用Vue.js的组件 # 下载最新的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)     }   } })

 

Answer 2

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