建站
咨詢
售后
建站咨詢
新聞中心
今天就跟大家聊聊有關(guān)vue2的todolist怎么用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
項(xiàng)目用到了vue.jsvue.cliwebpackES6node環(huán)境，完成項(xiàng)目后會對這些技術(shù)棧有了些了解。
準(zhǔn)備開發(fā)環(huán)境
$ npm install -g vue-cli $ vue init ，比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev
安裝谷歌插件vue.js devtools
下載vue.js的webpack模板
下載todomvc的模板 (提供html和css)（也可以直接$ git clone https://github.com/tastejs/todomvc-app-template.git 來下載）
把todomvc的index.html拖到todolist文件夾去覆蓋里面的index.html
打開todomvc的json文件，會看到 “todomvc-app-css”: “^2.0.0”,就是要你 npm install todomvc-app-css -S 從而下載該css
刪點(diǎn)todolsit index.html的默認(rèn)css，js引用，src文件夾下的main.js引入模板css（import‘todomvc-app-css/index.css'）
引入vue（import Vue form ‘vue'）
等寫完代碼后 $npm run build 一鍵打包構(gòu)建，會看到dist文件夾
main.js的代碼
//后面的為注釋講解， ~表示串聯(lián)index.html的對應(yīng)內(nèi)容
import 'todomvc-app-css/index.css'
import Vue from 'vue'
//添加localStorage
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
fetch: function () {
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
todos.forEach(function (todo, index) {
todo.id = index
})
todoStorage.uid = todos.length
return todos
},
save: function (todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
}
}
//用過濾器篩選出三種狀態(tài)
var filters = {
all(todos) {
return todos
},
active(todos) {
return todos.filter((todo) => {
return !todo.completed
})
},
completed(todos) {
return todos.filter((todo) => {
return todo.completed
})
},
}
let app = new Vue({
el: '.todoapp', // ~
data: {
msg: 'hello world',
title: '待做清單', // 渲染標(biāo)題 ~ {{title}}
newTodo: '',
todos: todoStorage.fetch(), // ~ v-show="todos.length" ； ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos"
editedTodo: '', // 空的編輯對象
hashName: 'all'
},
watch: {
todos: {
handler: function (todos) {
todoStorage.save(todos)
},
deep: true
}
},
computed: {
remain() {
return filters.active(this.todos).length //未完成事項(xiàng)的數(shù)量 ~ {{remain}}
},
isAll: { // ~ v-model="isAll"
get() {
return this.remain === 0
},
set(value) {
this.todos.forEach((todo) => {
todo.completed = value
})
}
},
filteredTodos() { //用hashName過濾出當(dāng)前頁面的todos ~ v-for="(todo,index) in filteredTodos"
return filters[this.hashName](this.todos)
}
},
methods: {
addTodo(e) { //輸入值為空時，不添加（trim去除前后空格） ~ v-model.trim="newTodo"
if (!this.newTodo) {
return
}
this.todos.push({
id: todoStorage.uid++,
content: this.newTodo,
completed: false //結(jié)合v-model 根據(jù)completed狀態(tài)綁定樣式 ~:class="{completed:todo.completed； ~ v-model="todo.completed"
})
this.newTodo = ''
},
removeTodo(index) { //綁定x樣式，點(diǎn)擊刪除該todo ~ @click="removeTodo(index)"
this.todos.splice(index, 1)
},
editTodo(todo) { //編輯 ~ @dblclick="editTodo(todo)"
this.editCache = todo.content //儲存編輯前的內(nèi)容
this.editedTodo = todo // 點(diǎn)擊編輯里面的內(nèi)容而不是只是空文本框~ editing:todo==editedTodo}"
},
doneEdit(todo, index) { //失去焦點(diǎn)后 ~ @blur="doneEdit(todo)"；@keyup.enter="doneEdit(todo)"
this.editedTodo = null //不存在編輯了或者說編輯已完成
if (!todo.content) { //如果編輯后沒有內(nèi)容了，刪除該todo
this.removeTodo(index)
}
},
cancelEdit(todo) { //按esc鍵取消此次編輯操作 ~ @keyup.esc="cancelEdit(todo)">
this.editedTodo = null
todo.content = this.editCache //當(dāng)esc取消編輯時，還原編輯前的內(nèi)容
},
clear() { //點(diǎn)擊清除已完成的功能 ~ @click="clear"
this.todos = filters.active(this.todos) //獲取并渲染未完成的事項(xiàng) ~
}
},
directives: { //自定義屬性 ~ v-focus="todo == editedTodo"
focus(el, value) { //文本框雙擊獲取焦點(diǎn)
if (value) {
el.focus()
}
}
}
})
//hash（url地址中#以及之后的字符）
function hashChange() {
// ~ :class="{selected:hashName=='all'}"；:class="{selected:hashName=='active'}"；:class="{selected:hashName=='completed'}"
let hashName = location.hash.replace(/#\/?/, '') //正則表達(dá)式去除#/？，獲取如all，active，completed
if (filters[hashName]) { //如果過濾狀態(tài)的hashName存在
app.hashName = hashName //給整個app變量里的hashName賦上那個值
} else {
location.hash = '' //取消
app.hashName = 'all' //否則就賦值‘a(chǎn)ll'，回到全部事項(xiàng)的頁面
}
}
window.addEventListener('hashchange', hashChange) //全局監(jiān)聽hash 看完上述內(nèi)容，你們對vue2的todolist怎么用有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文標(biāo)題：vue2的todolist怎么用-創(chuàng)新互聯(lián)
文章鏈接：http://ef60e0e.cn/article/codepj.html
