使用Vue完成一個簡單的todolist的方法
看了兩天的Vue，還是上手寫一個簡單的todolist更實用（文末有彩蛋）。
一、使用vue-cli腳手架快速搭建一個框架
利用vue-cli來自動生成我們項目的前端目錄及文件，方法：
npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev
這樣我們的一個基于webpack的vue項目目錄就可以快速構(gòu)建好了。
目錄如下：
二、完成一個簡單的todolist
接下來就看一下webpack.base.conf文件，這是核心文件，必須執(zhí)行的文件，這里可以看到entry和output，這就是入口和輸出路徑，在入口處看到了./src/main.js，這就找到了界面的入口處了。在main.js中可以看到創(chuàng)建了一個vue實例，并加載了模板組件App.vue，所以我們的todo list代碼就可以寫在App.vue中。
簡單的todolist我們可以完成這幾個功能：
1、顯示todo列表
2、判斷列表任務(wù)完成狀態(tài)，若完成則添加相應(yīng)的樣式
3、在輸入框中動態(tài)添加todo項目，點擊回車在列表中顯示
4、點擊相應(yī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后面跟的對象，會作為 new Vue()的參數(shù)，來創(chuàng)建一個Vue的組件，并導(dǎo)出。
判斷任務(wù)的完成狀態(tài)，完成則添加text-decoration樣式
官方文檔中我們可以看到：
綁定class樣式
如果v-bind中class后是一個對象的話，鍵代表添加的class的名稱，value值代表一個布爾值，用來控制這個class屬性的有無。
所以我們就可以這樣：
<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，點擊回車完成添加列表并顯示同時清空input框內(nèi)容
用到的知識：
監(jiān)聽回車
表單控件監(jiān)聽
<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>
點擊內(nèi)容進(jìn)行狀態(tài)轉(zhuǎn)換
在li標(biāo)簽上綁定一個click事件，點擊時修改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
}
}
這樣一個簡單的todolist的基本功能已經(jīng)完成。
動圖效果
小彩蛋：linux下制作GIF動圖
上網(wǎng)查找了很多辦法，很多不適合linux平臺，發(fā)現(xiàn)這個辦法不錯:
下載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/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vue點擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關(guān)于vite基本常見配置講解的相關(guān)資料,最近做項目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中的dom節(jié)點和window對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項目數(shù)據(jù)動態(tài)過濾實踐及實現(xiàn)思路
這篇文章主要介紹了Vue項目數(shù)據(jù)動態(tài)過濾實踐,，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
vue項目使用electron進(jìn)行打包操作的全過程
我們都知道Electron項目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項目,下面這篇文章主要給大家介紹了關(guān)于vue項目使用electron進(jìn)行打包操作的全過程,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue實現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
記錄使用Nginx將純前端的Vue3項目部署到阿里云服務(wù)器（Ubuntu?22.04）上,包含通過Nginx代理實現(xiàn)跨域請求、以及個人踩坑記錄,感興趣的朋友一起看看吧2024-04-04
vue部署到線上為啥會出現(xiàn)404的原因分析及解決
這篇文章主要介紹了vue部署到線上為啥會出現(xiàn)404的原因分析及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04