Vue.js入门——打造todo应用

在App.vue的script标签中，有三部分内容，分别是data（用来存放数据的变量），methods（被调用的方法），watch（监控页面某个变量变化产生相应的变化）

1.首先，用v-html来获取data中title的数据

2.v-for对items中的每一项数据进行循环获取

3.v-bind：class，通过isFinished属性给其设置一个class，用来设置并改变状态

4.点击时，状态切换，v-on：click调用methods中的函数，来动态改变事项的状态

5.增加一个输入框input来添加新的item，点击时调用函数，使用v-on:keyup.enter=“addNew”；（没增加一项，在函数中要设置input的v-model为空，这样可以自动清理输入框）

6.增加在localstorage中存储items，import引入文件（包含两个函数）

7.watch监听items，发生变化的时候，调用save函数将数据存入localstorage中——键值对的形式

代码：

<template>
<div id="app">
<!--v-html可以把span当成html，而v-text只能将其当成文本解释出来-->
<h1 v-html="title"></h1>
<input v-model="newItem" v-on:keyup.enter="addNew">
<ul>
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div>
</template>

<script>
import Store from './store'
export default {
data: function () {
return {
title: 'This is a todo list',
items: [

],
newItem:""
}

},
watch:{
items:{
handler:function (items) {
Store.save(items)
},
deep:true
}
},
methods: {
toggleFinish: function (item) {
item.isFinished = !item.isFinished
},
addNew:function () {
this.items.push({
label:this.newItem,
inFinished:false
})
this.newItem=""
}

}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.finished{
text-decoration: underline;
}
</style>