使用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項目目錄就可以快速構建好了。
目錄如下：
二、完成一個簡單的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、判斷列表任務完成狀態(tài)，若完成則添加相應的樣式
3、在輸入框中動態(tài)添加todo項目，點擊回車在列表中顯示
4、點擊相應的項目轉換狀態(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的組件，并導出。
判斷任務的完成狀態(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框內容
用到的知識：
監(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>
點擊內容進行狀態(tài)轉換
在li標簽上綁定一個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/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中如何通過函數(shù)傳參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3?中一個組件從創(chuàng)建到掛在,會經(jīng)過3個重點步驟：創(chuàng)建組件實例,設置組件實例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實例、設置組件實例?這兩個過程都做了什么,這部分邏輯很簡單,但你會從中學習到?Vue?優(yōu)秀的實踐技巧,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了如何在Vue中導入Excel文件，文中的示例代碼講解詳細，對我們學習或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
webpack+vue+express(hot)熱啟動調試簡單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動調試簡單配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細介紹了如何在Element?Plus中使用iconfont，簡單的說就是要將其封裝成SVG，并且支持動態(tài)修改顏色，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了vue3如何利用父子傳值實現(xiàn)彈框功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
最近公司開發(fā)一個項目,采用的前后端分離的方式,前端采用vue,但是再項目開發(fā)過程中遇到一個比較麻煩的問題,下面這篇文章主要給大家介紹了關于vue?ui的安裝步驟以及使用的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue?$event作為參數(shù)傳遞使用demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了vue中的路由傳值與重調本路由改變參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文詳細介紹了speak-tss插件在Vue3中的使用方法和配置,首先需要下載依賴,然后引入插件,并進行實例化和配置,配置項包括音量、語言、語音、語速、音調等,speak-tss支持多種語言和語音,適用于需要文本語音播報的場景2024-09-09