为何将<HelloWorld/>放在前一处不会报错，放在后一处就会报错？
<template>
<div id="app">
<h1 v-text="title"></h1>
<input v-model="newItem" v-on:keyup.enter="addNew">
<!-- 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 -->
<!-- keyup.enter的意思是敲击回车键时触发事件 -->
<ul>
<!-- <li v-for="item in items" v-bind:class="[liClass]"> -->
<!-- 此时的[liClass]其实是一个var对应在script中的liClass，真实的是'class:"finished"' -->
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
<!-- 而此处的{}中实现了根据item.isFinished是否是true而决定是否渲染finished样式 -->
{{item.label}}
</li>
</ul>
<HelloWorld/>
</div>
<!-- <div><HelloWorld/></div> -->
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Store from './store'
export default {
data: function(){
return{
title:'this is a todo list',
items:Store.fetch(),
/*liClass:'finished'*/
newItem:''
}
},
watch:{
items:{
handler: function(items){
Store.save(items);
},
deep: true
}
},
methods: {
toggleFinish:function(item){
alert(item.label);
item.isFinished = !item.isFinished;
},
addNew:function(){
this.items.push({
label: this.newItem,
isFinished: false
});
this.newItem = '';
}
},
components:{
HelloWorld
}
}
</script>
<style>
.finished {
text-decoration: underline;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
