當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2025/3/15 vue 41 豆豆

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

學過了前面11個章節的知識，可以說你已經對vue2.0的基礎知識有了一定程度的掌握，雖然在真正開發過程中，一些知識的使用會稍有不同，但是別慌，我們會把那部分內容在進階系列，比如：單文件組件，過渡效果，狀態管理vuex，路由vue-router，網絡請求vue-resource等等。

那是不是就意味著我們現在還不能用基礎知識做開發，當然不是，加強動手能力是進步的最好方式，我們今天就來用學過的基礎知識，來動手做一個demo：todoList案例，以此來鞏固一下學過的知識，并且練練手。

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

（gif圖，加載需要一丟丟時間）

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

如果你還沒看完前面的11個章節，建議你先學習，否則欲速則不達。

磨刀不誤砍柴工，在動手之前，我們理一下思緒該如何實現：

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

?2.用戶勾選表示已完成，通過動態修改樣式來標識已完成。

?3.用戶點擊按鈕“delete”，通過v-show來控制任務隱藏。

通過這個思路，我們就可以把之前11個章節的部分內容串聯起來，運用到這個案例中。

來吧，開始準備我們需要的工具：

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

webstorm2017 ，我選用它的原因是因為webstorm2017增加對vue的完美支持，當然，如果你的電腦跑不起，或者不習慣，你也可以使用你喜歡的IDE。

安裝vue.js

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

先看看目錄結構，十分簡單：一個todo.html，一個本地的vue2.0.js。

（非常簡單）

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

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

創建vue實例

利用第三節的知識，創建一個vue實例，超簡單！?

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

順利地創建了一個vue的實例app！

數據綁定

接下來，我們就實現思路的第一步：數據綁定。

在綁定之前，我們來設計關于任務的數據結構，一個任務包括：任務內容，是否完成，是否刪除。

因此，我們可以得到一個完成的任務數據結構：

{
??? content:"任務內容",
??? finished:false,//是否完成
??deleted:false//是否刪除
}
?

那么，我們給實例的data添加代碼：

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

默認初始化任務task的內容content為空，finished狀態為false表示未完成，deleted狀態為false表示未刪除。

任務task的數據結構有了，我們就把它和頁面的用戶輸入關聯起來，還記得使用哪個指令嗎？（花5秒鐘時間回憶一下）

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

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

我們通過控制臺檢驗一下是否成功地綁定了：

（gif效果圖，加載需要一丟丟時間）

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

.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樣式，它的外觀就變成我們想要的效果：

用戶不停地輸入多個任務，我們要用一個數組list[ ]來存儲用戶輸入的每一個任務task。

按鍵修飾符

假設：用戶輸入任務內容后，按下enter鍵表示完成輸入。所以，我們要實現監聽鍵盤事件。

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

在監聽鍵盤事件時，我們經常需要監測常見的鍵值。Vue允許為?v-on?在監聽鍵盤事件時添加按鍵修飾符。

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

我們增加了@keydown.enter表示監聽鍵盤中的enter鍵的按下事件，而addTask則是實例app中的methods方法，所以，我們也會給實例增加methods。如下：

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

接下來，我們就來編寫addTask( )方法，實現將用戶輸入的內容存儲起來，因為我們在之前就通過?v-model?l將用戶輸入的內容和task中的content關聯起來，所以我們只需要把task.content存儲起來就可以了，存在哪里呢？我們用一個數組list[ ]來存儲它們。如下：

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

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

任務列表list數組既然有了，我們就可以通關?v-for?循環，把它遍歷并展示出來了。那我們就來編寫列表的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鍵添加的任務，能否成功地展示在任務列表上，演示一下：

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

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

動態修改樣式

但我們的工作還沒結束，案例中，當勾選框被選中的時候，表示任務已完成，切換相應的樣式，未選中的時候，表示任務未完成，也會切換樣式。

接下來，我們就來實現這一步，我們用到了第十一節的動態class綁定的知識。

首先，我們先為每個checkbox綁定點擊事件，并且動態渲染是否選中，稍微修改上面的代碼：

點擊checkbox，我們通過編寫一個changeState( )方法來實現切換該任務的狀態，所以我們來編寫一下changeState( )方法：

//點擊修改任務狀態
changeState:function(index){
??let curState =? this.list[index].finished;
? this.list[index].finished = !curState;
}

就這樣，我們就順利地實現了點擊checkbox來修改每個任務task對應的狀態finished（切換true或者false）。

既然修改了狀態，我們就要在頁面上看到相應的效果，我們通過動態的修改class來實現。

我們把這行代碼：

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

修改成：

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

學習過第十一節我們知道，當改任務的finished為true的時候，就會添加樣式?class='finish'?；否則則不會。

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

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

好了，所有代碼都準備好了，演示一下效果：

（gif效果圖，加載需要一丟丟時間）

切換是否成功狀態也成功了實現了。

刪除任務

還差最后一步，我們來實現刪除任務，當我們編寫錯誤的任務的時候，就可以點擊刪除按鈕來刪掉它。

我們先為每個任務添加刪除按鈕，并添加點擊事件：?

同樣，少不了.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;
}

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

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

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

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

刪除任務的功能也順利實現了。

為了稍做完善，當我們沒有任何任務展示的時候，我們會在頁面上顯示“暫無任務”的文字提示。這樣的提示對用戶體驗來說會比較友好一點。

我們增加html代碼，如下：

css樣式，如下：

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

那么，我們如何控制這個提示是否渲染呢？這里就用到了我們學過的?v-if??條件渲染指令，當我們的list[ ]數組的長度為0的時候，表示無任務，可展示“暫無任務”，反之則不渲染。

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

我們在之前的章節說過，綁定數據的時候，可以使用簡單的javascript表達式，上面的案例，我們就使用了簡單的全等判斷，你也可以使用計算屬性computed來實現，留給大家自己動手去實現。?

好了，我們繼續來看效果：

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

寫到這里，我們就完成了整個demo案例。你動手了嗎？

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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