首页 > 其他分享 >vue template的编译原理

vue template的编译原理

时间:2023-11-09 12:55:06浏览次数:49  
标签:vue 渲染 AST 编译 template 模板

vue template的编译原理就是vue框架底层对模板的编译过程,这个过程将最初的模板源码转换生成最终的语法抽象树(AST)

具体步骤如下:

  • 模板编译器读入模板源码,将其词法分析成各个部分,这些部分包括html元素,vue指令,还有特殊属性等
  • AST 的gennerator组件将区分开的各个部分进行上下文解析,封装,形成一个抽象语法树(AST)
  • code 的gennerator组件将AST进行处理,生成js代码,即渲染函数,渲染函数最终渲染出页面进行展示。

标签:vue,渲染,AST,编译,template,模板
From: https://www.cnblogs.com/zha-hdlxdl/p/17819479.html

相关文章

  • VC 6 编译时一直处于Linking...状态,无响应
    我安装上VC后,一编译程序,要么一直处于编译状态,要么处于linking...状态,VC就像死了一样。不管英文版,中文版,装没装补丁都那样。 有时候VC经常出现这样的情况,运行的时候,显示linking无法中止,关也关不了;点stopbuild也不行只好CTRL+ALT+DEL关掉。 应该是VC的BUG。。。。。我有......
  • uni-app vue3 获取元素报错问题
    关于uniapp中vue3使用uni.createSelectorQuery()时的this指向及查询结果说明_前端_谁凉了时光旧了少年-华为云开发者联盟(csdn.net)......
  • vue2项目使用vueAMap
    npminstallvue-amap-D在main.jsimportVueAMapfrom"vue-amap";Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:"高德地图的key",//这里写你申请的高德地图的keyplugin:["AMap.Autocomplete","AMap.Geocoder","AMap.Geol......
  • 大屏展示技术栈:vue2+echarts+dataV
    1.大屏搭建使用的是dataV组件http://datav.jiaminghi.com/guide,使用dataV组件有如下注意点:a.修改配置项config中data的值,需要重新赋值configb.修改dataV某些内置样式,他有个固定的类2.登录界面动态背景,使用的是vanta.jsVanta.js-Animated3DBackgroundsForYourWebsite......
  • vue文件上传
    单文件上传前端部分:<template><br><a-fromlabel="上传文件"><a-inputtype="file"></a-input><a-button@click="upload"type="danger">上传</a-button></a-from></tem......
  • 迅为RK3588开发板编译Buildroot
    Buildroot是一款集成的编译集合包,解决了以前交叉编译麻烦的问题,本小节将介绍buildroot镜像的编译流程,分为单独编译和完整全自动编译。首先输入以下命令,选择buildroot系统的配置文件sourcebuildroot/build/envsetup.sh默认配置文件会覆盖掉rk3588_linux/buildroot/output/rock......
  • vue实现文件上传
    文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能。在此,将详细讲解Vue.js如何实现文件上传。首先,我们需要准备一个简单的html页面来接收上传文件。下面是示例代码:<divid="app"><inputtype="file"ref="fileInput"@chang......
  • vue2实现动态侧边导航栏
    router文件下index.js 来源http://blog.itpub.net/69978258/viewspace-2909200///index.tsimportVuefrom'vue';importVueRouterfrom'vue-router';importLoginfrom'@/views/login/index.vue';importLayoutfrom'@/layout/ind......
  • CMake多个CMakeLists.txt共同合作编译一个C++项目
    一、概述在C++项目比较大或者要根据不同的规则生成不同的执行文件或者动态库/静态库的时候。单独的CMakeLists.txt会变的比较复杂,此时可以利用CMakeLists.txt的父子关系分目录分模块的进行编译及输出。就相当于项目模块化编译参考博客:【大丙课堂】二、具体实现......
  • vue 项目使用element ui 中tree组件 check-strictly 用法
    属性check-strictly:   在显示复选框的情况下,是否严格遵循父子互相关联的做法,默c认为false。   默认false,父子关联。      点击父节点,其下子节点全部统一跟随父节点变化,点击子节点,子节点部分勾选时,父节点处于半选状态。   设置为true,严格遵循......