Vue實現todo應用的示例
阿新 • • 發佈：2021-02-24
背景
首先宣告，本人並不是前端大神，看過我之前的內容應該知道，我擅長做後端，雖然前端略有涉略，但談不上精通，連熟悉都勉強。寫這個系列的目的僅僅只是出於好奇，好奇為何前幾年還是JQuery一統天下的前端局面如今為何如此混亂，好奇好好的js是如何被玩的親媽都不認識，之所以選擇vue作為切入點，完全是因為vue簡單，基本看下demo就能入門，既然vue作為目前流行的前端三大框架之一，那麼只要瞭解vue是怎麼實現的，是不是對前端稍微有了一點認識，於是在這種想法的促使下，有了這個系列。
這裡模仿vue並不是指我把vue的原始碼看了一遍，看懂了然後模仿vue寫，而是語法還是vue的語法，但是實現我自己想辦法實現，當然可以參考vue，但以我前端的水平想完全看懂vue難度有點大，所以如果你想了解vue原始碼實現，這個系列不適合你，但如果你和我一樣，稍微會點js，又對vue原始碼無從下手，但又想知道如何實現跟vue一樣的功能，那麼就跟著我一起，我們不看原始碼，自己琢磨實現一個簡單的vue。
vue實現todo應用
本系列的思路是，用vue實現一個簡單應用，應用中用到vue相關核心功能，然後程式碼保持不變，把vue.js檔案替換成我們自己的實現，最終達到和vue一樣的效果。這裡用vue實現一個超簡單的todo應用，程式碼如下：
<html>
<head>
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<divid="app">
<inputv-model="newTodo"></input>
<buttonv-on:click="addTodo()">新增</button>
<div>輸入的文字:{{newTodo}}</div>
<ul>
<divv-for="(todo,index)intodos"style="margin-bottom:20px;">
<listyle="float:left;margin-right:20px;">
{{todo.text}}
</li>
<buttonv-on:click="deleteTodo(index)">刪除</button>
</div>
</ul>
</div>
<script>
varappx=newVue({
el:'#app',data:{
newTodo:'',todos:[]
},methods:{
addTodo:function(){
this.todos.push({text:this.newTodo});
this.newTodo='';
},deleteTodo:function(index){
this.todos.splice(index,1);
}
}
})
</script>
</body>
</html>效果如下：
- 輸入框值發生變化時，在輸入框下方會顯示輸入的內容（僅僅為了演示效果，忽略實際意義）
- 每輸入一條新的todo，下面就會多一項列表項
- 點選列表項右邊刪除按鈕可以刪除當前列表項
demo雖然簡單，但包含了vue所有核心功能
- 雙向值繫結(v-model)
- 響應式，值發生變化，繫結的節點值也同步變化
- 事件響應(v-on:click)
- 迴圈指令(v-for)
後面的章節，我們不引入vue.js檔案，一步步實現同樣的功能。
以上就是Vue實現todo應用的示例的詳細內容，更多關於Vue實現todo應用的資料請關注我們其它相關文章！