注意这里的 is="todo-item"
属性。这种做法在使用 DOM 模板时是十分必要的,因为在 <ul>
元素内只有 <li>
元素会被看作有效内容。
这样做实现的效果与 <todo-item>
相同,但是可以避开一些潜在的浏览器解析错误。
注意: 2.2.0+ 的版本里,当在组件中使用 v-for
时,key
现在是必须的。
HTML内容:
<div id="todo-list-example">
<input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
>
</li>
</ul>
</div>
JS内容:
然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要用 props
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
});
new Vue({
el: '#todo-list-example',
data: {
/* -- this.newTodoText = '' 是为了让input的value值为空,避免要用户先删除原来的value值,才可以输入自己想要输入的值 --- */
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
});
this.newTodoText = '';
}
}
});