1.引入组件需要注意的事项说明和步骤：
第一步，引入对应的组件：
import Hello2 from './components/Hello2'
第二步：
需要注册该组件才可以使用
<script>
import Store from './store'
import Hello2 from './components/Hello2'
export default {
data: function () {
return {
title: 'this is todo list',
items: Store.fetch(),
newItem: ''
}
},
components: {Hello2},//进行组件注册
watch: {
items: {
handler: function (items) {
console.log(items)
Store.save(items)
},
deep: true
}
},
methods: {
toggleFinish: function (item) {
console.log(item)
},
addNew: function () {
console.log(this.newItem)
this.items.push({
label: this.newItem,
isFinished: false
})
this.newItem = ''
Store.save()
}
}
}
</script>
第三步:模板中需要载人对应的组件，需要转成对应的驼峰格式
<template >
<div id="app">
<h1 v-text="title"></h1>
<input type="text" v-model="newItem" @keyup.enter="addNew">
<ul>
<li v-for="(list,index) in items" :class="{finished: list.isFinished}" @click="toggleFinish(list)" :key="index" :id="index">
{{list.label}}
</li>
</ul>
<hello2>引入组件</hello2>
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
