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

Question

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

Answer 1

1. # 下载最新的vue$ npm install vue

2. js 引用 vue.js

3. 开始代码，感受vue强大的双向数据绑定

1 2 3 4 5 6 7 8 9 10 11

<div id="app">   <p>{{ message }}</p>   <input v-model="message"> </div>       new Vue({   el: '#app',   data: {     message: 'Hello Vue.js!'   } })

实战代码：

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

<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整个生命周期示意图：

 

Answer 2

var vue = new Vue({

el: 'body',
data: {
//这里负责数据
myData: {},
},
ready: function () {
//这里是vue初始化完成后执行的函数
this.test();
},
methods: {
//这里是自定义的方法
test: function () {
alert('test');
}
}

});