使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
看了兩天的Vue，還是上手寫一個(gè)簡(jiǎn)單的todolist更實(shí)用（文末有彩蛋）。
一、使用vue-cli腳手架快速搭建一個(gè)框架
利用vue-cli來(lái)自動(dòng)生成我們項(xiàng)目的前端目錄及文件，方法：
npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev
這樣我們的一個(gè)基于webpack的vue項(xiàng)目目錄就可以快速構(gòu)建好了。
目錄如下：
二、完成一個(gè)簡(jiǎn)單的todolist
接下來(lái)就看一下webpack.base.conf文件，這是核心文件，必須執(zhí)行的文件，這里可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。在main.js中可以看到創(chuàng)建了一個(gè)vue實(shí)例，并加載了模板組件App.vue，所以我們的todo list代碼就可以寫在App.vue中。
簡(jiǎn)單的todolist我們可以完成這幾個(gè)功能：
1、顯示todo列表
2、判斷列表任務(wù)完成狀態(tài)，若完成則添加相應(yīng)的樣式
3、在輸入框中動(dòng)態(tài)添加todo項(xiàng)目，點(diǎn)擊回車在列表中顯示
4、點(diǎn)擊相應(yīng)的項(xiàng)目轉(zhuǎn)換狀態(tài)
首先我們完成顯示列表的功能：
<template>
<div id="app">
<input/>
<ul>
<li v-for="item in items">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
]
}
}
}
</script>
效果
export后面跟的對(duì)象，會(huì)作為 new Vue()的參數(shù)，來(lái)創(chuàng)建一個(gè)Vue的組件，并導(dǎo)出。
判斷任務(wù)的完成狀態(tài)，完成則添加text-decoration樣式
官方文檔中我們可以看到：
綁定class樣式
如果v-bind中class后是一個(gè)對(duì)象的話，鍵代表添加的class的名稱，value值代表一個(gè)布爾值，用來(lái)控制這個(gè)class屬性的有無(wú)。
所以我們就可以這樣：
<template>
<div id="app">
<input/>
<ul>
<li v-for="item in items" v-bind:class={finished:item.isFinished}>
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
]
}
}
}
</script>
<style>
.finished {
text-decoration: line-through;
}
</style>
效果
在輸入框中填寫item，點(diǎn)擊回車完成添加列表并顯示同時(shí)清空input框內(nèi)容
用到的知識(shí)：
監(jiān)聽(tīng)回車
表單控件監(jiān)聽(tīng)
<template>
<div id="app">
<input v-on:keyup.enter="addNewItem" v-model="newItem"/>
<ul>
<li v-for="item in items" v-bind:class={finished:item.isFinished}>
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
],
newItem: ''
}
},
methods: {
addNewItem () {
this.items.push({label: this.newItem,isFinished: false})
this.newItem = '' //清空輸入框
}
}
}
</script>
<style>
.finished {
text-decoration: line-through;
}
</style>
點(diǎn)擊內(nèi)容進(jìn)行狀態(tài)轉(zhuǎn)換
在li標(biāo)簽上綁定一個(gè)click事件，點(diǎn)擊時(shí)修改isFinished
//添加代碼
<li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)">
{{item.label}}
</li>
methods: {
finish (item) {
item.isFinished = !item.isFinished
}
}
這樣一個(gè)簡(jiǎn)單的todolist的基本功能已經(jīng)完成。
動(dòng)圖效果
小彩蛋：linux下制作GIF動(dòng)圖
上網(wǎng)查找了很多辦法，很多不適合linux平臺(tái)，發(fā)現(xiàn)這個(gè)辦法不錯(cuò):
下載SimpleScreenRecoder軟件：
三條命令：
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder sudo apt-get update sudo apt-get install simplescreenrecorder
安裝好后你可以選擇錄制區(qū)域
參考資料：
Vue官方API文檔：https://cn.vuejs.org/v2/api/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue3實(shí)現(xiàn)一個(gè)todo-list
- vue組件編寫之todolist組件實(shí)例詳解
- vue實(shí)現(xiàn)留言板todolist功能
- 詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- 基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
- vue實(shí)現(xiàn)todolist單頁(yè)面應(yīng)用
- vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
- vue3組合式API實(shí)現(xiàn)todo列表效果
相關(guān)文章
這篇文章主要介紹了vue中如何通過(guò)函數(shù)傳參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3?中一個(gè)組件從創(chuàng)建到掛在,會(huì)經(jīng)過(guò)3個(gè)重點(diǎn)步驟：創(chuàng)建組件實(shí)例,設(shè)置組件實(shí)例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實(shí)例、設(shè)置組件實(shí)例?這兩個(gè)過(guò)程都做了什么,這部分邏輯很簡(jiǎn)單,但你會(huì)從中學(xué)習(xí)到?Vue?優(yōu)秀的實(shí)踐技巧,需要的朋友可以參考下2024-07-07
詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
webpack+vue+express(hot)熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細(xì)介紹了如何在Element?Plus中使用iconfont，簡(jiǎn)單的說(shuō)就是要將其封裝成SVG，并且支持動(dòng)態(tài)修改顏色，需要的朋友可以參考下2022-08-08
vue3父子傳值實(shí)現(xiàn)彈框功能的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何利用父子傳值實(shí)現(xiàn)彈框功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
最近公司開(kāi)發(fā)一個(gè)項(xiàng)目,采用的前后端分離的方式,前端采用vue,但是再項(xiàng)目開(kāi)發(fā)過(guò)程中遇到一個(gè)比較麻煩的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue?$event作為參數(shù)傳遞使用demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue中的路由傳值與重調(diào)本路由改變參數(shù)
這篇文章主要介紹了vue中的路由傳值與重調(diào)本路由改變參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue使用關(guān)于speak-tss插件的詳細(xì)介紹及一些配置項(xiàng)
本文詳細(xì)介紹了speak-tss插件在Vue3中的使用方法和配置,首先需要下載依賴,然后引入插件,并進(jìn)行實(shí)例化和配置,配置項(xiàng)包括音量、語(yǔ)言、語(yǔ)音、語(yǔ)速、音調(diào)等,speak-tss支持多種語(yǔ)言和語(yǔ)音,適用于需要文本語(yǔ)音播報(bào)的場(chǎng)景2024-09-09