Vue源码解析—mustache模板引擎

一、什么是模版引擎
Vue源码解析—mustache模板引擎_第1张图片

二、数组join()法

Vue源码解析—mustache模板引擎_第2张图片

三、反引号法

Vue源码解析—mustache模板引擎_第3张图片

四、mustache基本语法

mustache库可以通过npm安装。因此可以值node以及浏览器中使用

1、mustache便利数组对象

Vue源码解析—mustache模板引擎_第4张图片

2.mustache 字段直接使用

Vue源码解析—mustache模板引擎_第5张图片

3.mustache .代表本数组元素

Vue源码解析—mustache模板引擎_第6张图片

4.mustache 多层数组嵌套

Vue源码解析—mustache模板引擎_第7张图片

5.mustache 布尔值

Vue源码解析—mustache模板引擎_第8张图片

mustache使用规则可参考:https://blog.csdn.net/yzding1225/article/details/117787747?spm=1001.2014.3001.5502

五、正则表达式思路替换

六、底层tokens思想

1.mustache库机理

mustache.js源码地址:https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js

将模版字符串编译为tokens形式

将tokens结合数据,解析为dom字符串

Vue源码解析—mustache模板引擎_第9张图片

2.什么是tokens

tokens是一个js嵌套数组,说白了,就是模版字符串的js表示

他是“抽象语法树”、“虚拟节点”的开山鼻祖

Vue源码解析—mustache模板引擎_第10张图片

3.模版解析原理

Vue源码解析—mustache模板引擎_第11张图片

4.循环情况下的tokens

当模版字符串中有循环存在时,他将编译为嵌套更深的tokens

Vue源码解析—mustache模板引擎_第12张图片

5.双重循环情况下的tokens

Vue源码解析—mustache模板引擎_第13张图片

你可能感兴趣的:(Vue源码解析,vue,js)