vue源码分析之模版解析的大括号表达式

最新推荐文章于 2023-04-24 10:48:31 发布

城南花开ze

最新推荐文章于 2023-04-24 10:48:31 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue源码分析模版解析大括号表达式

本文链接：https://blog.csdn.net/weixin_42614080/article/details/104129591

版权

Vue 专栏收录该内容

128 篇文章 21 订阅

订阅专栏

一、模版解析之大括号表达式的分析

大括号表达式：在vue中是比较常见的，通过双大括号{{}}可以进行插值表达式的读取。
模版解析之大括号表达式的实现过程：

根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1 name
从 data 中取出表达式对应的属性值
将属性值设置为文本节点的 textContent

对于大括号表达式的解析过程，简单来说，将大括号表达式中的值取出来，比如{{ name }}，将name的值取出来，根据name的值找到对应的value的值，将value的值插入到文本节点的textContent中。
模版解析之大括号表达式的关键过程：

compileElement: function (el) {
    // 得到所有子节点
    var childNodes = el.childNodes,
      // 保存compile对象
      me = this;
    // 遍历所有子节点
    [].slice.call(childNodes).forEach(function (node) {
      // 得到节点的文本内容
      var text = node.textContent;
      // 正则对象(匹配大括号表达式)
      var reg = /\{\{(.*)\}\}/;  // {{name}}
      // 如果是元素节点
      if (me.isElementNode(node)) {
        // 编译元素节点的指令属性
        me.compile(node);
        // 如果是一个大括号表达式格式的文本节点
      } else if (me.isTextNode(node) && reg.test(text)) {
        // 编译大括号表达式格式的文本节点
        me.compileText(node, RegExp.$1); // RegExp.$1: 表达式   name
      }
      // 如果子节点还有子节点
      if (node.childNodes && node.childNodes.length) {
        // 递归调用实现所有层次节点的编译
        me.compileElement(node);
      }
    });
 }

二、模版解析之大括号表达式的实现：

大括号表达式的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模版解析之大括号表达式_MVVM</title>
</head>
<body>
    <div id="test">
        <p>{{ name }}</p>
    </div>
</body>
<script type="text/javascript" src="./js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="./js/mvvm/observer.js"></script>
<script type="text/javascript" src="./js/mvvm/watcher.js"></script>
<script type="text/javascript">

    new MVVM({
        el: "#test",
        data: {
            name: "张三"
        }
    })

</script>
</html>

城南花开ze

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue源码分析之模版解析的大括号表达式

一、模版解析之大括号表达式的分析大括号表达式：在vue中是比较常见的，通过双大括号{{}}可以进行插值表达式的读取。模版解析之大括号表达式的实现过程：根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1 name从 data 中取出表达式对应的属性值将属性值设置为文本节点的 textContent对于大括号表达式的解析过程，简单来说，将大括号表达式中的值取出来...
复制链接

扫一扫