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其它相關文章!