如何正確使用Vue.js的組件
如何正確使用Vue.js的組件?
ibeautiful
2018-10-01 09:05:48
1 回答
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
# 下載最新的vue
$ npm install vuejs 引用 vue.js
開始代碼，感受vue強大的雙向數據綁定
| 1234567891011 | <div id="app"> <p>{{ message }}</p> <input v-model="message"></div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }}) |
實戰代碼：
| 12345678910111213141516171819202122232425262728293031 | <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整個生命周期示意圖：
添加回答
舉報
0/150
提交
取消