如何正確使用Vue.js的組件
2 回答
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
# 下載最新的vue$ npm install vue
js 引用 vue.js
開始代碼，感受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整個生命周期示意圖：
臨摹微笑
TA貢獻1982條經驗 獲得超2個贊
var vue = new Vue({
el: 'body',
data: {
//這里負責數據
myData: {},
},
ready: function () {
//這里是vue初始化完成后執行的函數
this.test();
},
methods: {
//這里是自定義的方法
test: function () {
alert('test');
}
}
});
添加回答
舉報
0/150
提交
取消