(尚052)Vue_源码分析_模板解析_大括号表达式+(尚053)Vue_源码分析_模板解析_大括号表达式

模板解析

什么是模板?

html嵌套了js代码

js代码以什么样的形式存在于页面代码中呢?

2种语法:

1)指令形式

2)表达式

=========================================================================================================

模板解析

1. 模板解析的基本流程

1) 将 el 的所有子节点取出, 添加到一个新建的文档 fragment 对象中

2) 对 fragment 中的所有层次子节点递归进行编译解析处理

* 对大括号表达式文本节点进行解析

* 对元素节点的指令属性进行解析

* 事件指令解析

* 一般指令解析

3) 将解析后的 fragment 添加到 el 中显示

1.1模板解析(1): 大括号表达式解析

1) 根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1 name

2) 从 data 中取出表达式对应的属性值

3) 将属性值设置为文本节点的 textContent