vue的简单用法

设计

image.png

1、输入框输入待做事件，回车之后展示在下面的列表里
2、已经完成的待做事件，下面会出现下划线。没有做完的事件则不会出现
3、点击未完成待做事件，则表示已经完成了这个事情，则下面会出现下划线。点击已完成事件，下划线消失，表示这个事情没有完成
4、刷新页面，这些待做的事情列表还能继续展现，而不能消失，这意味着需要把信息存储到浏览器上本地上

@keyup.enter 表示绑定回车事件
v-for：遍历
v-on:click：点击事件
:class：绑定css样式
v-model：将input值和vue双向绑定。即input值名为message

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{msg}}</p>
    <input @keyup.enter="addTask" v-model="message">
    <ol>
      <li v-for='item in list' :class="{finish:item.isfinish}" v-on:click="doThis(item)" >
        {{item.label}}
      </li>
    </ol>
  </div>
</template>

<script>
import Store from "./store" //引入store。js文件

export default {
  data:function(){
    return{
      msg:'this is my todo list',
      list:Store.fetch(),
      message:""
    }
  },
  watch:{ //监听list值发生变化的事件
    list:{
      handler: function (list) {
        Store.save(list);
      },
      deep: true  //为true，isfinish变化也能被触发该事件
    }
  },
  methods: {
    doThis:function(item){
      //点击事件，改变item的isfinish
      item.isfinish = !item.isfinish
    },
    addTask:function(){ //回车事件，将输入框中的内容放入lists集合中，再清空输入框
      this.list.push({label:this.message,isfinish:false})
      this.message = ""
    }
  }
}
</script>

<style>
  .finish{
    text-decoration:underline
  }
#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;
}
</style>

Store.js

const STORAGE_KEY = 'todos-vuejs'
export default { //相当于输出匿名对象
    fetch:function (){
        //返回存储到客户端的localStorage的数据，若没有则返回[]
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY  || '[]') ) 
    },
    save:function (items){
        //存储内容到localStorage，并把数据转成json格式的string类型
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    }
}