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>