用vuejs實現一個todolist項目

用vue.js實現一個todolist項目：input輸入框輸入的值會呈現在下方，並且會保存在localStorage里面，而且下方的列表點擊之后也會有變化：

完整代碼：

App.vue

<template>
  <div id="app">
    <h1 v-html = "title"></h1>
    <input v-model="newItem" v-on:keyup.enter="addNew" ></input>
    <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 Todolist",
      items:Store.fetch(),
      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,
        "isFinished":false 
      })
      this.newItem=""
    }
  }
}
</script>

<style>
.finished{
  text-decoration:underline;
}
li{
  list-style:none;
  font-size:1.6em;
  margin-top:10px;
}
#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;
}
input{
  width:230px;
  height:40px;
  border-radius:20px;
  padding: 0.4em 0.35em;
  border:3px solid #CFCFCF;
  font-size: 1.55em;
}
</style>

store.js:

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

 

詳細解析

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' //導入的時候沒有花括號

當最簡單導入的時候，這個值是將被認為是”入口”導出值。

在App.vue中完成項目編寫：

組件布局將在這里設置，.vue文件將由vue-loader進行加載，.vue內同時包含html、css、js源碼，使組件的獨立，組件之間可以盡可能地解耦，便於開發維護

先看一個簡單示例：只要isFinished為true就加下划線，false就不加下划線：

<template>
  <div id="app">
    <h1 v-html = "title"></h1>
    <ul>
      <li v-for="item in items" v-bind:class="{finished:item.isFinished}">{{item.label}}</li>
    </ul>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  data:function(){
    return {
      title:"this is a todolist",
      items:[
        {
          label:"coding",
          "isFinished":false
        },
        {
          label:"walking",
          "isFinished":true
        }
      ]
    }
  }
}
</script>

<style>
.finished{
  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>

對於class的控制如上：如果是數組的話則可以渲染多個。

再進一步完成功能：點擊沒有下划線的li就會加下划線，有下划線就會去除下划線。

需要綁定事件：

<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</li>

還要添加方法toggleFinish()：

  methods:{
    toggleFinish:function(item){
      item.isFinished = !item.isFinished
    }
  }

將input輸入的值添加到列表下面

添加input：

<input v-model="newItem" v-on:keyup.enter="addNew" ></input>

data對象添加：

newItem:""

添加方法：

//addNew:function(){
//   alert(this.newItem)
//   this.newItem=""          //添加后加輸入框清空
//}

addNew:function(){
  this.items.push({
    label:this.newItem,
    "isFinished":false 
  })
  this.newItem=""
}

使用localStorage來存儲

使用store.js：

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

兩個方法：一個設置，一個獲取

導入：

import Store from './store'

打印一下Store,console.log(Store)，可以看到：

由於加入代碼中每次都需要添加還有刪除等等，如果每次都用到store的方法，這就有點麻煩了，所以這里就要用到watch觀察。

  watch:{
    items:{
      handler:function(val,oldVal){
        console.log(val,oldVal)
      },
      deep:true
    }
  },

可以看到打印出：

使用save()方法：

  watch:{
    items:{
      handler:function(items){
        Store.save(items)
      },
      deep:true
    }
  },

一有變化就會觸發。

將fetch()方法也加進去：

<script>
import Store from './store'
export default {
  data:function(){
    return {
      title:"<span>?</span>this is a todolist",
      items:Store.fetch(),
      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,
        "isFinished":false 
      })
      this.newItem=""
    }
  }
}
</script>

 

 

Vue.js計算屬性和樣式       --2017.03.07