vue.js

案例知识点：
1.vue.js基础知识
2.HTML5 本地存储localstorage

store.js代码

const STORAGE_KEY = 'todos-vue.js'export default{    fetch(){        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')    },    save(items){        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));    }}

App.vue代码

<template>  <div id="app">    <h1 v-text="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='toogleFinish(item)'>        {{item.label}}      </li>    </ul>  </div></template><script>import Store from './store'export default {  name: 'app',  data () {    return {      title: 'this is a todo list',      items:Store.fetch(),      newItem:''    }  },  watch:{      items:{        handler(items){     //经过变化的数组会作为第一个参数传入          Store.save(items)          console.log(Store.fetch());        },        deep:true       //深度复制      }  },  methods:{    toogleFinish(item){      item.isFinished = !item.isFinished    },    addNew(){      this.items.push({        label:this.newItem,        isFinished: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>