首頁(yè) 猿問(wèn) 如何正確使用Vue.js的組件

如何正確使用Vue.js的組件

Vue.js

慕的地6264312 2019-03-03 15:04:53

如何正確使用Vue.js的組件

查看完整描述

2 回答

慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

# 下載最新的vue
$ npm install vue
js 引用 vue.js
開(kāi)始代碼，感受vue強(qiáng)大的雙向數(shù)據(jù)綁定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

實(shí)戰(zhàn)代碼：
<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)
}
}
})

反對(duì) 回復(fù) 2019-03-11

慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗(yàn) 獲得超8個(gè)贊

參考如下：
下載最新的vue
$ npm install vue
js 引用 vue.js
開(kāi)始代碼，感受vue強(qiáng)大的雙向數(shù)據(jù)綁定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
實(shí)戰(zhàn)代碼：
<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)
}
}
})