模仿vue本身動手寫響應式框架(一) - Vue實現todo應用

時間 2020-07-16

標籤模仿 vue 本身手寫響應框架實現 todo 應用简体版

原文原文鏈接

背景

首先聲明，本人並非前端大神，看過我以前的內容應該知道，我擅長作後端，雖然前端略有涉略，但談不上精通，連熟悉都勉強。寫這個系列的目的僅僅只是出於好奇，好奇爲什麼前幾年仍是JQuery一統天下的前端局面現在爲什麼如此混亂，好奇好好的js是如何被玩的親媽都不認識，之因此選擇vue做爲切入點，徹底是由於vue簡單，基本看下demo就能入門，既然vue做爲目前流行的前端三大框架之一，那麼只要瞭解vue是怎麼實現的，是否是對前端稍微有了一點認識，因而在這種想法的促使下，有了這個系列。html

這裏模仿vue並非指我把vue的源碼看了一遍，看懂了而後模仿vue寫，而是語法仍是vue的語法，可是實現我本身想辦法實現，固然能夠參考vue，但以我前端的水平想徹底看懂vue難度有點大，因此若是你想了解vue源碼實現，這個系列不適合你，但若是你和我同樣，稍微會點js，又對vue源碼無從下手，但又想知道如何實現跟vue同樣的功能，那麼就跟着我一塊兒，咱們不看源碼，本身琢磨實現一個簡單的vue。前端

vue實現todo應用

本系列的思路是，用vue實現一個簡單應用，應用中用到vue相關核心功能，而後代碼保持不變，把vue.js文件替換成咱們本身的實現，最終達到和vue同樣的效果。這裏用vue實現一個超簡單的todo應用，代碼以下：vue

<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 app = 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>

效果以下：npm