JavaScript如何实现一个简单的Vue?


【JavaScript如何实现一个简单的Vue?】我是一名前端 。先前用了很久的react 。最近用了三个月的vue 。我来回答一下这个问题!
目前很多的公司都在使用vue来开发和维护自己的站点 。我认为vue这么流行 。主要有以下几点原因:
1、性能好(dom的基本操作都有框架完成 。引入虚拟dom后性能更加卓越)
2、易学(能力强的前端2天即可上手干活)
用过vue的同学肯定知道一个vue文件主要包括两个部分(不算css):
1、vue的模板
2、vue的生命周期逻辑
如果自己要手写一个vuejs 。其实就是如何把vue生命周期中的js逻辑对应到模板中 。并且实现双向绑定 。能够实时的把数据展现在模板中 。下面我们尝试着简单的实现一把!

JavaScript如何实现一个简单的Vue?

文章插图
实现功能:div的宽度是100px 。每点击一次加10px 。宽度的数值还可以实时反映到p标签中 。
实现思路如下:
1、首先我们将两个配置收集到vModel中 。w就是div的初始化宽度 。change函数很明显就是点击的回调函数
JavaScript如何实现一个简单的Vue?

文章插图
JavaScript如何实现一个简单的Vue?

文章插图
综上 。通过这三步基本可以实现一个微型的vue 。大家可以自己试着玩一玩!
喜欢我的回答就关注我吧 。有问题可以发表评论 。我们一起学习 。共同成长!

    推荐阅读