Vue實現todo應用的示例
背景
首先聲明，本人並不是前端大神，看過我之前的內容應該知道，我擅長做後端，雖然前端略有涉略，但談不上精通，連熟悉都勉強。寫這個系列的目的僅僅隻是出於好奇，好奇為何前幾年還是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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="newTodo"></input>
<button v-on:click="addTodo()">添加</button>
<div>輸入的文字:{{newTodo}}</div>
<ul>
<div v-for="(todo,index) in todos" style="margin-bottom: 20px;">
<li style="float: left;margin-right: 20px;">
{{todo.text}}
</li>
<button v-on:click="deleteTodo(index)">刪除</button>
</div>
</ul>
</div>
<script>
var appx = new Vue({
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應用的資料請關註WalkonNet其它相關文章！