Vue實現(xiàn)todo應用的示例

更新時間：2021年02月20日 10:25:20 作者：鄭劍峰

這篇文章主要介紹了Vue實現(xiàn)todo應用的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下

背景

首先聲明，本人并不是前端大神，看過我之前的內(nèi)容應該知道，我擅長做后端，雖然前端略有涉略，但談不上精通，連熟悉都勉強。寫這個系列的目的僅僅只是出于好奇，好奇為何前幾年還是JQuery一統(tǒng)天下的前端局面如今為何如此混亂，好奇好好的js是如何被玩的親媽都不認識，之所以選擇vue作為切入點，完全是因為vue簡單，基本看下demo就能入門，既然vue作為目前流行的前端三大框架之一，那么只要了解vue是怎么實現(xiàn)的，是不是對前端稍微有了一點認識，于是在這種想法的促使下，有了這個系列。

這里模仿vue并不是指我把vue的源碼看了一遍，看懂了然后模仿vue寫，而是語法還是vue的語法，但是實現(xiàn)我自己想辦法實現(xiàn)，當然可以參考vue，但以我前端的水平想完全看懂vue難度有點大，所以如果你想了解vue源碼實現(xiàn)，這個系列不適合你，但如果你和我一樣，稍微會點js，又對vue源碼無從下手，但又想知道如何實現(xiàn)跟vue一樣的功能，那么就跟著我一起，我們不看源碼，自己琢磨實現(xiàn)一個簡單的vue。

vue實現(xiàn)todo應用

本系列的思路是，用vue實現(xiàn)一個簡單應用，應用中用到vue相關核心功能，然后代碼保持不變，把vue.js文件替換成我們自己的實現(xiàn)，最終達到和vue一樣的效果。這里用vue實現(xiàn)一個超簡單的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>

效果如下：