怎么正確使用Vue.js的組件
怎么正確使用Vue.js的組件
慕尼黑8549860
2019-06-07 07:06:11
2 回答
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
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) } } }) |
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
正確使用Vue.js的組件：
最基本一個vue結構如下：
var vue = new Vue({
el: 'body',
data: {
//這里負責數據
myData: {},
},
ready: function () {
//這里是vue初始化完成后執行的函數
this.test();
},
methods: {
//這里是自定義的方法
test: function () {
alert('test');
}
}
});
添加回答
舉報
0/150
提交
取消