Vue是如何进行模板编译的?(二)

前言

上一节笼统介绍了Vue进行模板编译的过程,但其实其背后的复杂度绝对是超呼想象,要当其为一个庞大的工程来处理。众所周知,归根结底,Vue项目也是一html5页面,要对其进行模板编译,也就时相当于去把这个页面所有的内容都给爬下来对其中的标签、属性等等进行一步步取值处理。下面,就一步步来欣赏其中的精彩: 继续阅读“Vue是如何进行模板编译的?(二)”

Gastby V2安装过程中常见问题

前言

之前在cnblogs上写过一篇《Gatsby上手指南 – 让你的静态网站用react来高逼格的写》介绍Gastby V1版本的使用,但现在V2版本出来了,想尝尝新,发现这版本改动不是一般的大,单单是安装过程就已经要折腾许久,安装方式也有点不一样,以前V1版直接建议全局安装Gastby脚手架,然后通过脚手架来初始化创建项目,V2版则建议使用npm的新命令npx来临时安装Gastby脚手架,然后初始化Gastby项目后,脚手架会自动被删除,官网也有解释原因是因为怕用了不同的版本会导致依赖包混乱导致一些依赖关系错误问题。下面就罗列一些安装过程中可能遇到的坑: 继续阅读“Gastby V2安装过程中常见问题”

对大型综合管理类平台前端架构的思考

背景

谈到后台管理平台,很多人用过林林种种的各种各样的后台管理平台,前端还没兴起的时候,后台管理平台一直是后端一锅端的。各种开源的后台CMS类的管理平台,不管你是基于何种后端语言的,总可以找到不少开源的管理平台类的代码,但版面设计风格是比较死板和带着强烈的第二次工业革命的感觉。 继续阅读“对大型综合管理类平台前端架构的思考”

Vue是如何进行模板编译的?(一)

前言

如果以简单使用者的角度来学习vue,当然了解其相关的概念及使用方式足够,但如果是深度用户的话,或多或少会踩到不少框架及底层设计方式带来的不少的坑。比如,我们理所当然的认为,更新了状态,视图层会自动相应的更新,但现实是假如状态中使用到了数组,则我们经常会遇到更新了数组的值后,视图并没有按预期去自动更新, 继续阅读“Vue是如何进行模板编译的?(一)”

前端mvvm框架底层学习(七、双向绑定优化)

前言

上一篇《前端mvvm框架学习(六、最初级的双向绑定)》介绍了我们如何实现一个简单的MVVM对input输入框进行双向绑定的例子,有个历史遗留的问题,就是更新数据会失去焦点。这一篇我们再来优化之前的双向绑定,怎么简单怎么来吧,我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧,还是使用模版函数来处理,直接用lodash的template函数,但在这里,我们引入了高级的玩意,我们引入了snabbdom的全家桶,一个最为流行的virtual dom解决方案。 继续阅读“前端mvvm框架底层学习(七、双向绑定优化)”

前端mvvm框架底层学习(六、最初级的双向绑定)

前言

上一篇《前端mvvm框架学习(五、json对象+简单css及style处理)》介绍了我们如何实现一个简单的MVVM处理对象中函样式的处理属性的例子。真实项目中,我们要处理的内容其实不只是css及style样式处理,其他的属性值,如value等,在这一篇中我们来实现对一个input框进行最简单双向绑定,怎么简单怎么来吧,我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧,还是使用模版函数来处理,直接用lodash的template函数,然后我们给input框绑定oninput的函数来进行反向绑定。 继续阅读“前端mvvm框架底层学习(六、最初级的双向绑定)”

前端mvvm框架底层学习(五、json对象+简单css及style处理)

前言

上一篇《前端mvvm框架学习(四、json对象+数组处理)》介绍了我们如何实现一个简单的MVVM处理内含数组对象数据的例子。真实项目中,我们要处理的内容其实不只是数据,还有css及style样式处理,怎么简单怎么来吧,我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧,还是使用模版函数来处理,直接用lodash的template函数,然后我们引入了virtual node虚拟节点的概念,专门用来处理后期样式处理。 继续阅读“前端mvvm框架底层学习(五、json对象+简单css及style处理)”

前端mvvm框架底层学习(四、json对象+数组处理)

前言

上一篇《前端mvvm框架学习(三、json对象处理)》介绍了我们如何实现一个最简单的MVVM处理对象数据的例子。但如果要处理的数据是json对象里面包含数组呢?这一篇我们尝试来处理json对象里面包含数组的情况,怎么简单怎么来吧,我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧,还是使用模版函数来处理,直接用lodash的template函数,但这次我们跟上次有点不一样,需要在模版里面执行javascript来循环生成html。 继续阅读“前端mvvm框架底层学习(四、json对象+数组处理)”

前端mvvm框架底层学习(三、json对象处理)

前言

上一篇《前端mvvm框架学习(二、数组处理)》介绍了我们如何实现一个最简单的MVVM处理数组数据的例子。但如果要处理的数据是一个json对象呢?这一篇我们尝试来处理json对象,怎么简单怎么来吧,我们还是引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧,但本次我们直接高级一点,使用模版处理直接用lodash的template函数继续阅读“前端mvvm框架底层学习(三、json对象处理)”

前端mvvm框架底层学习(二、数组处理)

前言

上一篇《前端mvvm框架学习(一、我们来实现一个最简单的MVVM)》介绍了我们如何实现一个最简单的MVVM。但之前处理过的model数值都只是最原始的数值(即primitive类型,如string,number,symbol,boolean)。这一篇我们尝试来处理数组类型,怎么简单怎么来吧,我们引用lodash库和还是用传统的方式拼接html字符串的方式来处理View层吧。 继续阅读“前端mvvm框架底层学习(二、数组处理)”