亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue_簡單項(xiàng)目todolist

Richard_Gao / 2154人閱讀

摘要：強(qiáng)大的漸進(jìn)式渲染引擎使得我們越來越不需要手動控制數(shù)據(jù)的變化，那么下面我們來看一看。上面所有的依賴在下面引入就可以了。

Vue強(qiáng)大的漸進(jìn)式渲染引擎使得我們越來越不需要手動控制數(shù)據(jù)的變化，那么下面我們來看一看。如何用Vue寫一個todolist。

開始

首先，創(chuàng)建一個文件夾，用命令行初始化
npm init -y
然后安裝需要的插件
npm i -S underscore vue todomvc-app-css
在這里我們需要用到vue ，css樣式npm上的todo-app-css 插件html我們可以采用http://todomvc.com/examples/b...上面的html并將其格式化 ，然后下載underscore對數(shù)組進(jìn)行操作。
上面所有的依賴在下面引入就可以了。

新建實(shí)例

新建vue的實(shí)例
寫一個默認(rèn)的任務(wù)：todoList: [{}]



刪除任務(wù)方法


methods: {
  ...
  // 刪除任務(wù)
  deleteTodo(todo) {
    this.todoList = _.without(this.todoList, todo)
  }
}


編輯任務(wù)

添加一個數(shù)據(jù)項(xiàng)：
data: {
  // 正在編輯的任務(wù)索引
  editingIndex: -1,
  ...
}
綁定雙擊事件：


methods: {
  ...
  // 編輯任務(wù)
  editTodo(index) {
    // 設(shè)置一下當(dāng)前正在編輯的索引
    this.editingIndex = index;
  }
}


加上class


  v-for="(todo,index) in todoList" :key=""todo-"+index" >```

自定義指令：

// 注冊一個全局自定義指令 v-focus


Vue.directive("focus", {
  // 當(dāng)綁定元素插入到 DOM 中。
  inserted(el) {
    // 聚焦元素
    el.focus()
  },
  // 當(dāng)綁定元素更新的時候
  update(el) {
    el.focus();
  }
})


使用自定義指令

添加保存todo, 實(shí)際上就是把input框取消

保存的方法


methods: {
  ...
  // 保存任務(wù)，因?yàn)槭莿討B(tài)綁定的，不需要再保存，只需要把input框隱藏即可
  saveTodo(todo) {
    this.editingIndex = -1
    if (todo.text.trim().length < 1) {
      this.deleteTodo(todo)
    }
  }
}


未完成的數(shù)量


computed: {
  ....
  // 未完成的任務(wù)數(shù)量
  activeCount() {
    return this.todoList.filter(item => {
      return !item.checked
    }).length;
  }
}


數(shù)據(jù)持久化到本地localStorage
新建store.js


var STORAGE_KEY = "todoList"
window.todoStorage = {
    fetch() {
    try {
      return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    } catch(error) {
      return [];
    }
    },
    save(todoList) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(todoList));
    }
}


引入store.js

修改初始化數(shù)據(jù)：


data: {
  ...
  todoList: todoStorage.fetch()
}


在Vue實(shí)例中添加一個屬性變化觀察
// 觀察屬性變化


watch: {
  todoList: {
    deep: true,
    handler: todoStorage.save
  }
},

全部完成功能

添加計(jì)算屬性：


computed: {
  // 是否所有任務(wù)都完成
  allDone: {
    get() {
      // 未完成的數(shù)量為0表示全部完成,全部完成返回true
      return this.activeCount === 0;
    },
    set(value) {
      this.todoList.forEach(todo => {
        todo.checked = value
      });
    }
  }
}


使用v-model綁定：


實(shí)現(xiàn)過濾所有，已完成，未完成的功能
在實(shí)例化Vue對象外面放一個普通的過濾對象：


// 一個普通的過濾的對象, 用來過濾任務(wù)列表
var filters = {
  all: function (todos) {
    return todos;
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.checked;
    });
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.checked;
    });
  }
};


添加一個屬性visibility 來表示我們要顯示所有，還是顯示未完成，或已完成


data: {
  visibility: "all",
}


修改一下未完成的數(shù)量這個計(jì)算屬性，使用上面的filters對象去過濾


computed: {
   // 未完成的任務(wù)數(shù)量
  activeCount() {
    return filters.active(this.todoList).length;
  },
}

添加任務(wù)過濾的計(jì)算屬性：

computed: {
  // 過濾任務(wù)列表
  filteredTodoList: function () {
    return filters[this.visibility](this.todoList);
  }
}


在DOM當(dāng)中添加點(diǎn)擊事件，點(diǎn)擊的時候修改visiblity屬性即可


  •   所有
    • 

  •   未完成
    • 

  •   已完成
    • 

    列表渲染的循環(huán)語句修改：
    

  • 

    添加一個變量，得到hash值：
    

    var visibility = location.hash.substr(location.hash.indexOf("/")+1);
visibility = visibility === "" ? "all" : visibility
    

    設(shè)置visibility屬性的值為當(dāng)前的這個變量：
    

    data: {
  visibility: visibility,
 }
    
點(diǎn)擊清空已完成功能：

    添加一個已完成的任務(wù)數(shù)量計(jì)算屬性：
    

    computed: {
  // 已完成的任務(wù)數(shù)量
  completedCount() {
    return filters.completed(this.todoList).length;
  }
}
    

    添加一個清空已完成的方法：
    

    methods: {
  // 清空已完成的任務(wù)列表
  clearCompleted() {
    this.todoList = filters.active(this.todoList)
  }
}
    

    DOM元素綁定事件，以及v-show:
    

    

    好了，到這里我們的功能基本就實(shí)現(xiàn)了，可以看看效果todolist.html,后面的話我們還可以加路由了解數(shù)據(jù)庫然后做成云端todolist，還可以上線。

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/89725.html

    相關(guān)文章

    • 應(yīng)用vue2+vuex+vue-router+webpack2+es6+express+mysql技

      摘要：其實(shí)這里還是有漏洞的，坐等高手指出來微笑臉后臺沒有用生成一個完整的架構(gòu)。來自不同視圖的行為需要變更同一狀態(tài)。 最近對vue很感興趣，趁閑暇時間，模仿了wunderlist里面的部分功能，編寫了前后端分離的基于vue技術(shù)棧和express的todolist小項(xiàng)目。寫這篇博文來總結(jié)思考下。項(xiàng)目所在github,可以自行參考克隆。 本人博客 總體概覽 整個項(xiàng)目最終做成的樣子如下： showI...

      voidking 評論0 收藏0

    • TodoList：適合初學(xué)者的vue+node小項(xiàng)目

      摘要：一個簡單的項(xiàng)目，前端由實(shí)現(xiàn)，后端由，數(shù)據(jù)庫采用。路由項(xiàng)目啟動項(xiàng)目進(jìn)入項(xiàng)目，安裝依賴安裝客戶端依賴安裝服務(wù)器端依賴啟動項(xiàng)目啟動服務(wù)器啟動客戶端開發(fā)模式瀏覽器訪問完整代碼點(diǎn)我，有用的話給個哦，謝謝 TodoList 一個簡單的vue + nodejs項(xiàng)目，前端由vue實(shí)現(xiàn)，后端由nodejs(express)，數(shù)據(jù)庫采用mongodb。 github項(xiàng)目地址 在線效果展示 showI...

      lovXin 評論0 收藏0

    • vue的TodoMVC事例總結(jié)

      摘要：縮寫為數(shù)據(jù)鍵盤事件添加事項(xiàng)指令指令監(jiān)聽事件。這塊內(nèi)容只會在指令的表達(dá)式返回值的時候被渲染。清空已辦事項(xiàng)全選取消全選方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。 gitHub地址：https://github.com/gaozhixiao... 功能拆分： 渲染數(shù)據(jù) 鍵盤事件：添加事項(xiàng) 鼠標(biāo)點(diǎn)擊事件：移除事項(xiàng) 顯示未辦事項(xiàng)數(shù)據(jù) 全部事項(xiàng)、未辦事項(xiàng)、已辦事項(xiàng)狀態(tài)切換 清除全部完成...

      CKJOKER 評論0 收藏0

    • 用Vue搭建一個應(yīng)用盒子（一）：todo-list

      摘要：最近在研究的相關(guān)知識，最好的學(xué)習(xí)方法莫過于自己開發(fā)一個，這樣帶著問題來學(xué)習(xí)，進(jìn)步自然飛速。在首頁里，我們會用寫一個導(dǎo)航，通過的路由導(dǎo)航到不同的應(yīng)用。我們在文件夾里創(chuàng)建一個新的組件。 最近在研究vue的相關(guān)知識，最好的學(xué)習(xí)方法莫過于自己開發(fā)一個SPA，這樣帶著問題來學(xué)習(xí)，進(jìn)步自然飛速。于是邊查邊寫差不多花了2周寫完了一個todo-list，功能不夠完備，但是麻雀雖小，卻也是五臟俱全，基本...

      MAX_zuo 評論0 收藏0

    • 簡單抽象工廠

      摘要：抽象工廠模式定義抽象工廠模式是指當(dāng)有多個抽象角色時，使用的一種工廠模式。 抽象工廠模式 定義：抽象工廠模式是指當(dāng)有多個抽象角色時，使用的一種工廠模式。抽象工廠模式可以向客戶端提供一個接口，使客戶端在不必指定產(chǎn)品的具體的情況下，創(chuàng)建多個產(chǎn)品族中的產(chǎn)品對象 優(yōu)點(diǎn)： 1.它分離了具體的類 2.它使得易于交換產(chǎn)品系列 3.它有利于產(chǎn)品的一致性 缺點(diǎn)： 難以支持新種類的產(chǎn)品 showImg...

      Tony 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <