當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue实战案例：用学过的知识做一个小demo

發(fā)布時(shí)間：2025/3/15 vue 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue实战案例：用学过的知识做一个小demo 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

學(xué)過了前面11個(gè)章節(jié)的知識(shí)，可以說你已經(jīng)對(duì)vue2.0的基礎(chǔ)知識(shí)有了一定程度的掌握，雖然在真正開發(fā)過程中，一些知識(shí)的使用會(huì)稍有不同，但是別慌，我們會(huì)把那部分內(nèi)容在進(jìn)階系列，比如：單文件組件，過渡效果，狀態(tài)管理vuex，路由vue-router，網(wǎng)絡(luò)請(qǐng)求vue-resource等等。

那是不是就意味著我們現(xiàn)在還不能用基礎(chǔ)知識(shí)做開發(fā)，當(dāng)然不是，加強(qiáng)動(dòng)手能力是進(jìn)步的最好方式，我們今天就來用學(xué)過的基礎(chǔ)知識(shí)，來動(dòng)手做一個(gè)demo：todoList案例，以此來鞏固一下學(xué)過的知識(shí)，并且練練手。

看一個(gè)todo案例的效果圖，然后我們來模仿它做一個(gè)：

（gif圖，加載需要一丟丟時(shí)間）

本來是打算錄制成視頻，但是demo相對(duì)容易，通過圖文并茂的形式也能讓大家很好的接收，倘若后期有需要視頻的反饋，我再嘗試錄制成視頻的形式。

如果你還沒看完前面的11個(gè)章節(jié)，建議你先學(xué)習(xí)，否則欲速則不達(dá)。

磨刀不誤砍柴工，在動(dòng)手之前，我們理一下思緒該如何實(shí)現(xiàn)：

?1.利用vue的mvvm的特性，綁定用戶輸入的內(nèi)容和展示在列表的內(nèi)容。

?2.用戶勾選表示已完成，通過動(dòng)態(tài)修改樣式來標(biāo)識(shí)已完成。

?3.用戶點(diǎn)擊按鈕“delete”，通過v-show來控制任務(wù)隱藏。

通過這個(gè)思路，我們就可以把之前11個(gè)章節(jié)的部分內(nèi)容串聯(lián)起來，運(yùn)用到這個(gè)案例中。

來吧，開始準(zhǔn)備我們需要的工具：

chrome瀏覽器，或者一個(gè)支持ES5的Object.defineProperty特性的瀏覽器即可。

webstorm2017 ，我選用它的原因是因?yàn)閣ebstorm2017增加對(duì)vue的完美支持，當(dāng)然，如果你的電腦跑不起，或者不習(xí)慣，你也可以使用你喜歡的IDE。

安裝vue.js

這里我用第二節(jié)的簡(jiǎn)易安裝方式，并且是直接下載vue.js文件到本地，非cdn資源文件。

先看看目錄結(jié)構(gòu)，十分簡(jiǎn)單：一個(gè)todo.html，一個(gè)本地的vue2.0.js。

（非常簡(jiǎn)單）

在head中，載入vue.2.0.js文件。

成功載入之后，我們就可以來編寫代碼了。?

創(chuàng)建vue實(shí)例

利用第三節(jié)的知識(shí)，創(chuàng)建一個(gè)vue實(shí)例，超簡(jiǎn)單！?

<div id="app"></div>
<script>
??? const app = new Vue({
??????? el:"#app"
??? });
</script>

順利地創(chuàng)建了一個(gè)vue的實(shí)例app！

數(shù)據(jù)綁定

接下來，我們就實(shí)現(xiàn)思路的第一步：數(shù)據(jù)綁定。

在綁定之前，我們來設(shè)計(jì)關(guān)于任務(wù)的數(shù)據(jù)結(jié)構(gòu)，一個(gè)任務(wù)包括：任務(wù)內(nèi)容，是否完成，是否刪除。

因此，我們可以得到一個(gè)完成的任務(wù)數(shù)據(jù)結(jié)構(gòu)：

{
??? content:"任務(wù)內(nèi)容",
??? finished:false,//是否完成
??deleted:false//是否刪除
}
?

那么，我們給實(shí)例的data添加代碼：

const app = new Vue({
??? el:"#app",
??? data:{
??????//默認(rèn)
???task:{
??????? content:'',//內(nèi)容為空
???? finished:false,//未完成
???? deleted:false//未刪除
????}
??? }
});

默認(rèn)初始化任務(wù)task的內(nèi)容content為空，finished狀態(tài)為false表示未完成，deleted狀態(tài)為false表示未刪除。

任務(wù)task的數(shù)據(jù)結(jié)構(gòu)有了，我們就把它和頁面的用戶輸入關(guān)聯(lián)起來，還記得使用哪個(gè)指令嗎？（花5秒鐘時(shí)間回憶一下）

接著，我們就來寫html代碼：

通過v-model指令，就可以成功地綁定task的content，用戶在輸入的同時(shí)，實(shí)例app的data也會(huì)實(shí)時(shí)地更新自身的數(shù)據(jù)。

我們通過控制臺(tái)檢驗(yàn)一下是否成功地綁定了：

（gif效果圖，加載需要一丟丟時(shí)間）

雖然成功地綁定了task的content，但是我們的input沒有添加樣式，缺少美感，我們來給它添加class類“edit”和相關(guān)的樣式。

.edit{
??? display:block ;
??? width:80%;
??? height: 35px;
??? line-height: 35px;
??? margin: 30px auto;
??? box-sizing: border-box;
??? padding-left: 4px;
??? border-radius: 4px;
??? border:1px solid #ccc;
??? outline: 0;
??? box-shadow: 0 0 5px #ccc;
}

給input控件添加以上的css樣式，它的外觀就變成我們想要的效果：

用戶不停地輸入多個(gè)任務(wù)，我們要用一個(gè)數(shù)組list[ ]來存儲(chǔ)用戶輸入的每一個(gè)任務(wù)task。

按鍵修飾符

假設(shè)：用戶輸入任務(wù)內(nèi)容后，按下enter鍵表示完成輸入。所以，我們要實(shí)現(xiàn)監(jiān)聽鍵盤事件。

這里我們會(huì)用到vue提供給我們的按鍵修飾符：

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要監(jiān)測(cè)常見的鍵值。Vue允許為?v-on?在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符。

所以，我們給input控件添加鍵盤事件keydown的監(jiān)聽，最終代碼如下：

我們?cè)黾恿?strong>@keydown.enter表示監(jiān)聽鍵盤中的enter鍵的按下事件，而addTask則是實(shí)例app中的methods方法，所以，我們也會(huì)給實(shí)例增加methods。如下：

const app = new Vue({
??? el:"#app",
??? data:{
??????? //默認(rèn)
????task:{
????????? content:'',//內(nèi)容為空
????? finished:false,//未完成
????? deleted:false//未刪除
????}
??? },
??? methods:{
??????? //添加任務(wù)
???? addTask:function(){
????????? //.....
??????? }
??? }
});

接下來，我們就來編寫addTask( )方法，實(shí)現(xiàn)將用戶輸入的內(nèi)容存儲(chǔ)起來，因?yàn)槲覀冊(cè)谥熬屯ㄟ^?v-model?l將用戶輸入的內(nèi)容和task中的content關(guān)聯(lián)起來，所以我們只需要把task.content存儲(chǔ)起來就可以了，存在哪里呢？我們用一個(gè)數(shù)組list[ ]來存儲(chǔ)它們。如下：

const app = new Vue({
??? el:"#app",
??? data:{
??????? //默認(rèn)
????task:{
??????????content:'',//內(nèi)容為空
????? finished:false,//未完成
????? deleted:false//未刪除
????},
???? ??//任務(wù)列表
????list:[]
??? },
??? methods:{
??????? //添加任務(wù)
???? addTask:function(){
???????????//將task存入list數(shù)組
??????this.list.push(this.task);
?????????? //存入list[]后，重置task
?????????? this.task = {
????????????? content:'',//內(nèi)容為空
??????? finished:false,//未完成
??????? deleted:false//未刪除
??????}
??????? }
??? }
});

上面的代碼，我們給data增加了list，并且通過push方法，成功地把每個(gè)任務(wù)存放在list數(shù)組中。

任務(wù)列表list數(shù)組既然有了，我們就可以通關(guān)?v-for?循環(huán)，把它遍歷并展示出來了。那我們就來編寫列表的html代碼，如下：

<div class="list">
??? <div class="unit"
???????? v-for="(item,index) in list">
??????? <input type="checkbox">
??????? <span>{{item.content}}</span>
??? </div>
</div>

有html還不夠，加上css樣式：?

.list{
??? margin: 0 auto;
??? width:80%;
}
.unit{
??? position: relative;
??? padding: 10px 0;
??? border-bottom: 1px solid #efefef;
}
.unit:last-child{
?? border-bottom: 0;
}

樣式也加上了，我們來看看通過按下鍵盤enter鍵添加的任務(wù)，能否成功地展示在任務(wù)列表上，演示一下：

(gif效果圖，加載需要一丟丟時(shí)間)

我們輸入任務(wù)，并按下回車鍵，任務(wù)內(nèi)容成功地添加到了list[ ]數(shù)組，并通過?v-for?遍歷到頁面上，十分順利。

動(dòng)態(tài)修改樣式

但我們的工作還沒結(jié)束，案例中，當(dāng)勾選框被選中的時(shí)候，表示任務(wù)已完成，切換相應(yīng)的樣式，未選中的時(shí)候，表示任務(wù)未完成，也會(huì)切換樣式。

接下來，我們就來實(shí)現(xiàn)這一步，我們用到了第十一節(jié)的動(dòng)態(tài)class綁定的知識(shí)。

首先，我們先為每個(gè)checkbox綁定點(diǎn)擊事件，并且動(dòng)態(tài)渲染是否選中，稍微修改上面的代碼：

點(diǎn)擊checkbox，我們通過編寫一個(gè)changeState( )方法來實(shí)現(xiàn)切換該任務(wù)的狀態(tài)，所以我們來編寫一下changeState( )方法：

//點(diǎn)擊修改任務(wù)狀態(tài)
changeState:function(index){
??let curState =? this.list[index].finished;
? this.list[index].finished = !curState;
}

就這樣，我們就順利地實(shí)現(xiàn)了點(diǎn)擊checkbox來修改每個(gè)任務(wù)task對(duì)應(yīng)的狀態(tài)finished（切換true或者false）。

既然修改了狀態(tài)，我們就要在頁面上看到相應(yīng)的效果，我們通過動(dòng)態(tài)的修改class來實(shí)現(xiàn)。

我們把這行代碼：

<span>{{item.content}}</span>

修改成：

<span :class="{'finish':item.finished}">
? ?{{item.content}}
</span>

學(xué)習(xí)過第十一節(jié)我們知道，當(dāng)改任務(wù)的finished為true的時(shí)候，就會(huì)添加樣式?class='finish'?；否則則不會(huì)。

所以，少不了finish的樣式類代碼：

.finish{
??? text-decoration: line-through;
??? color: #ccc;
}

好了，所有代碼都準(zhǔn)備好了，演示一下效果：

（gif效果圖，加載需要一丟丟時(shí)間）

切換是否成功狀態(tài)也成功了實(shí)現(xiàn)了。

刪除任務(wù)

還差最后一步，我們來實(shí)現(xiàn)刪除任務(wù)，當(dāng)我們編寫錯(cuò)誤的任務(wù)的時(shí)候，就可以點(diǎn)擊刪除按鈕來刪掉它。

我們先為每個(gè)任務(wù)添加刪除按鈕，并添加點(diǎn)擊事件：?

同樣，少不了.del類的樣式：?

.del{
??? background: red;
??? text-decoration: none;
??? position: absolute;
??? right:0;
??? font-size: 12px;
??? border: 0;
??? outline: 0;
??? padding: 2px 5px;
??? border-radius: 5px;
??? color: #fff;
}

點(diǎn)擊事件我們綁定的是removeTask方法名，那么我們就來編寫一個(gè)removeTask( )方法：

removeTask:function(index){
??? //使用splice操作刪除數(shù)組指定項(xiàng)
??? this.list.splice(index,1);
}

每個(gè)任務(wù)都添加了刪除按鈕，并綁定了相應(yīng)的處理程序，那么我們就來看看效果，是否可以刪除指定的任務(wù)：?

(gif效果圖，加載需要一丟丟時(shí)間)

刪除任務(wù)的功能也順利實(shí)現(xiàn)了。

為了稍做完善，當(dāng)我們沒有任何任務(wù)展示的時(shí)候，我們會(huì)在頁面上顯示“暫無任務(wù)”的文字提示。這樣的提示對(duì)用戶體驗(yàn)來說會(huì)比較友好一點(diǎn)。

我們?cè)黾觝tml代碼，如下：

css樣式，如下：

.empty{
??? font-size: 13px;
??? color: #ccc;
??? text-align: center;
??? padding: 10px 0;
}

那么，我們?nèi)绾慰刂七@個(gè)提示是否渲染呢？這里就用到了我們學(xué)過的?v-if??條件渲染指令，當(dāng)我們的list[ ]數(shù)組的長(zhǎng)度為0的時(shí)候，表示無任務(wù)，可展示“暫無任務(wù)”，反之則不渲染。

那好，我們就用v-if指令來稍做修改html代碼：

我們?cè)谥暗恼鹿?jié)說過，綁定數(shù)據(jù)的時(shí)候，可以使用簡(jiǎn)單的javascript表達(dá)式，上面的案例，我們就使用了簡(jiǎn)單的全等判斷，你也可以使用計(jì)算屬性computed來實(shí)現(xiàn)，留給大家自己動(dòng)手去實(shí)現(xiàn)。?

好了，我們繼續(xù)來看效果：

(gif效果圖，加載需要一丟丟時(shí)間)

寫到這里，我們就完成了整個(gè)demo案例。你動(dòng)手了嗎？

擴(kuò)展閱讀

?1.《ECMAScript 6 系列》原創(chuàng)教程

總結(jié)

以上是生活随笔為你收集整理的vue实战案例：用学过的知识做一个小demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： ustc小道消息20220107
下一篇： [云炬python3玩转机器学习] 6-