vue.js 学习笔记 制作简单的todo list

//只粘贴了部分代码 这是其中一个component下面的一个组件

<template>
<div class="list">
<h1>{{message}}</h1>
<!--输入框中输入的内容，enter后添加到列表中-->
<input v-model="newItem"  v-on:keyup.enter="addNew">
<ol>
<!--遍历初li列表内容-->
<li v-for="item in items">
{{item.value}}
</li>
</ol>
<router-link to="/Bar">go Bar</router-link>
</div>
</template>
<script>
//  引入store来进行存储itms
import store from '@/router/store'
export default {
name: 'list',
data:function(){
return {
message: 'this is a work list',
items:[
{value:'coding'},
],
newItem:''
}
},
watch:{
items:{
handler:function (items) {
store.save(items)
},
}
},
methods:{
addNew:function(){
this.items.push({
value:this.newItem
});
//          输入按enter后，清空输入框
this.newItem=''
}
}
}
</script>
<style scoped>
input{
width: 250px;
height: 20px;
}
.list{
width: 300px;
height: 300px;
background-color: #42b983;
margin: 0 auto;
}
h1{
font-size:30px;
color: #ffd02d;
}
</style>