Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")

注意这里的 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 = '';
        }
    }
});