基于vuejs實現(xiàn)一個todolist項目

發(fā)布時間：2020-09-22 11:47:46 來源：腳本之家閱讀：176 作者：返回主頁 chenxj 欄目：web開發(fā)

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

完整代碼：

App.vue

<template>
 <div id="app">
 <h2 v-html = "title"></h2>
 <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 區(qū)別：

　　1）.export與export default均可用于導出常量、函數(shù)、文件、模塊等
　　2）.你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導入，以便能夠?qū)ζ溥M行使用
　　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中完成項目編寫：

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

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

<template>
 <div id="app">
 <h2 v-html = "title"></h2>
 <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的控制如上：如果是數(shù)組的話則可以渲染多個。

再進一步完成功能：點擊沒有下劃線的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))
 }
}

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

導入：

import Store from './store'

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

基于vuejs實現(xiàn)一個todolist項目

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

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

可以看到打印出：

基于vuejs實現(xiàn)一個todolist項目

使用save()方法：

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

基于vuejs實現(xiàn)一個todolist項目

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

基于vuejs實現(xiàn)一個todolist項目

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽