【vue】todolist小练习

参考链接：

http://www.imooc.com/learn/694

http://www.cnblogs.com/Chen-XiaoJun/p/6238137.html

http://blog.csdn.net/sinat_17775997/article/details/52536010

ES6的写法：

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

export default 和 export 区别：

　　1.export与export default均可用于导出常量、函数、文件、模块等
　　2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
　　3.在一个文件或模块中，export、import可以有多个，export default仅有一个
　　4.通过export方式导出，在导入时要加{ }，export default则不需要

1.export
//demo1.js
export const str = 'hello world'
export function f(a){ return a+1}
对应的导入方式：

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

2.export default
//demo1.js
export default const str = 'hello world'
对应的导入方式：

//demo2.js
import str from 'demo1' //导入的时候没有花括号　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

html部分

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <input v-model="newItem" @keyup.enter="addNew"/>
    <ul> 
      <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
               <span v-on:click="deleteThis(item)">delete</span>    
        {{item.label}}
        <hr/>
      </li>
    </ul>
  </div>
</template>

js部分

结合localStorage和JSON将item序列化为JSON格式存储

const STORAGE_KEY = 'todos-vuejs'//es6语法 const定义一个常量
export default {
    fetch () {//es6语法 相当于 fetch:function(){}
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    },
    save (items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
    }
}

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

<script>
import Store from './assets/js/store'
import componentA from './components/componentA'
//相当于module.export
export default {
  /*function data(){
    return...
  }*/
  /*相当于var vue = new vue({data: function(){}})*/
  data () {
    return {
      title: 'TODO LIST',
      items: Store.fetch() || [],
      newItem: '',
      childWords: ''
    }
  },
  components: {
    componentA
  },
  watch: {
    items: {   //这是深度watch，监控items变化的时候，自动执行函数
      handler: function(items){
        Store.save(items)
      },
      deep: true   //也检测item内部的变化
    }
  },
  methods: {
    toggleFinish: function(item) {
      item.isFinished = !item.isFinished
    },
    addNew: function() {
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = ''
    },
    deleteThis: function(item) {
      this.items.splice(this.items.indexOf(item), 1)
      Store.save(this.items)
    }
  }
}
</script>

CSS部分：

<style>
*{
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
#app {
  color: #2c3e50;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
  width: 60%;
}
#app a {
  color: #42b983;
  text-decoration: none;
}
#app h1:nth-child(1) {
  line-height: 3;
  position: absolute;
  top: 5%;
}
#app input {
  width: 60%;
  line-height: 24px;
  font-size: 24px;
  position: absolute;
  top: 25%; left: 20%;
}
ul {
  position: absolute;
  top: 35%;
  text-align: left;
  width: 60%;
  height: 55%;
  overflow: auto;
}
ul li {
  list-style: none;
  line-height: 2;
  font-size: 24px;
}
span {
  font-size: 16px;
  color: #fff;
  padding: 2px 5px;
  text-align: left;
  background-color: indigo;
  border-radius: 5px;
}
.finished {
  color: #ccc;
}
hr {
  border-top:1px dashed #ccc;
}
</style>

 最终效果