模仿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

输入框值发生变化时，在输入框下方会显示输入的内容（仅仅为了演示效果，忽略实际意义）
每输入一条新的todo，下面就会多一项列表项
点击列表项右边删除按钮能够删除当前列表项

demo虽然简单，但包含了vue全部核心功能后端

双向值绑定(v-model)
响应式，值发生变化，绑定的节点值也同步变化
事件响应(v-on:click)
循环指令(v-for)

后面的章节，咱们不引入vue.js文件，一步步实现一样的功能。app