Vue系列二十三：源码解析-模板解析

最新推荐文章于 2024-05-14 10:38:37 发布

苍穹尘

最新推荐文章于 2024-05-14 10:38:37 发布

阅读量563

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/lizhiqiang1217/article/details/90341327

版权

Vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

模板解析(compile.js)
1、模板解析的关键对象：compile对象
2、模板解析的基本流程:
（1）、将el的所有子节点取出, 添加到一个新建的文档fragment对象中
（2）、对fragment中的所有层次子节点递归进行编译解析处理
对表达式文本节点进行解析
对元素节点的指令属性进行解析
事件指令解析
一般指令解析
（3）、将解析后的fragment添加到el中显示
3、解析表达式文本节点: textNode.textContent = value
（1）、根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1
（2）、从data中取出表达式对应的属性值
（3）、将属性值设置为文本节点的textContent
4、事件指令解析: elementNode.addEventListener(事件名, 回调函数.bind(vm))
v-on:click="test"
（1）、从指令名中取出事件名
（2）、根据指令的值(表达式)从methods中得到对应的事件处理函数对象
（3）、给当前元素节点绑定指定事件名和回调函数的dom事件监听
（4）、指令解析完后, 移除此指令属性
5.一般指令解析：elementNode.xxx = value
（1）、得到指令名和指令值(表达式)
（2）、从data中根据表达式得到对应的值
（3）、根据指令名确定需要操作元素节点的什么属性
v-text—textContent属性
v-html—innerHTML属性
v-class–className属性
（4）、将得到的表达式的值设置到对应的属性上
（5）、移除元素的指令属性

<body>

<div id="test">
  <p>{{name}}</p>
</div>

<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: 'Hello'
    }
  })
</script>
</body>

<body>
  <div id="test">
    <p>{{name}}</p>
    <button v-on:click="show">提示</button>
  </div>

  <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: 'hello'
      },
      methods: {
        show () {
          alert(this.name)
        }
      }
    })
  </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_模板解析_一般指令</title>
  <style>
    .aa {
      color: red;
    }
    .bb{
      font-size: 30px;
    }
  </style>
</head>
<body>
<div id="test">
  <p v-text="msg"></p>
  <p v-html="msg"></p>
  <p class="bb" v-class="myClass">元宵快乐！</p>
</div>

<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: {
      msg: '<a href="http://www.baidu.com">百度</a>',
      myClass: 'aa'
    }
  })
</script>
</body>
</html>

苍穹尘

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue系列二十三：源码解析-模板解析

模板解析(compile.js)1、模板解析的关键对象：compile对象2、模板解析的基本流程:（1）、将el的所有子节点取出, 添加到一个新建的文档fragment对象中（2）、对fragment中的所有层次子节点递归进行编译解析处理对表达式文本节点进行解析对元素节点的指令属性进行解析事件指令解析一般指令解析（3）、将解析后的fragment添加到el中显示...
复制链接

扫一扫

专栏目录