快捷導(dǎo)航

基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目

更新時(shí)間：2017年04月11日 11:50:47 作者：返回主頁 chenxj

這篇文章主要為大家詳細(xì)介紹了基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用vue.js實(shí)現(xiàn)一個(gè)todolist項(xiàng)目：input輸入框輸入的值會(huì)呈現(xiàn)在下方，并且會(huì)保存在localStorage里面，而且下方的列表點(diǎn)擊之后也會(huì)有變化：

完整代碼：

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))
 }
}

詳細(xì)解析

ES6的寫法：

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

export default 和 export 區(qū)別：

　　1）.export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
　　2）.你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用
　　3）.在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
　　4）.通過export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要

1.export

//demo1.js
export const str = 'hello world'
export function f(a){ return a+1}
對(duì)應(yīng)的導(dǎo)入方式：

//demo2.js
import { str, f } from 'demo1' //也可以分開寫兩次，導(dǎo)入的時(shí)候帶花括號(hào)

2.export default

//demo1.js
export default const str = 'hello world'
對(duì)應(yīng)的導(dǎo)入方式：

//demo2.js
import str from 'demo1' //導(dǎo)入的時(shí)候沒有花括號(hào)

當(dāng)最簡(jiǎn)單導(dǎo)入的時(shí)候，這個(gè)值是將被認(rèn)為是”入口”導(dǎo)出值。

在App.vue中完成項(xiàng)目編寫：

組件布局將在這里設(shè)置，.vue文件將由vue-loader進(jìn)行加載，.vue內(nèi)同時(shí)包含html、css、js源碼，使組件的獨(dú)立，組件之間可以盡可能地解耦，便于開發(fā)維護(hù)

先看一個(gè)簡(jiǎn)單示例：只要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>

對(duì)于class的控制如上：如果是數(shù)組的話則可以渲染多個(gè)。

再進(jìn)一步完成功能：點(diǎn)擊沒有下劃線的li就會(huì)加下劃線，有下劃線就會(huì)去除下劃線。

需要綁定事件：

復(fù)制代碼代碼如下:

<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對(duì)象添加：

newItem:""

添加方法：

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

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

使用localStorage來存儲(chǔ)

使用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))
 }
}

兩個(gè)方法：一個(gè)設(shè)置，一個(gè)獲取

導(dǎo)入：

import Store from './store'

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

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

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

可以看到打印出：

使用save()方法：

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

一有變化就會(huì)觸發(fā)。

將fetch()方法也加進(jìn)去：

<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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: