[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解
Activity
imEhllBdPGMVaArZ commentedon Jul 8, 2019
印象中是
mustache
,模板引擎的初衷是解决早期的字符模板拼接的问题,也是因这些方面的慢慢的发展壮大。SingleJoy commentedon Jul 23, 2019
这个问题问的意义不大吧,问的太偏了。
haizhilin2013 commentedon Jul 23, 2019
@SingleJoy 主要是问对模板引擎的理解,一点都不偏。模板引擎很有用
vipbo commentedon Jul 23, 2019
这些题 都有解答吗? 还是只是将题目贴出来?
vipbo commentedon Jul 23, 2019
期初vue用的jade模板,后来由于商标原因改成了pug,只是换个名字,语法都与jade一样,
参考 这篇https://www.cnblogs.com/xiaohuochai/p/7222227.html
chimyking commentedon Aug 9, 2019
Vue使用了Mustache语法,即双大括号的语法。
SmithJackZuo commentedon Aug 20, 2019
为什么只提问,不解答呢
haizhilin2013 commentedon Aug 20, 2019
@SmithJackZuo 上面有好多朋友解答了吗?
seho-dev commentedon Sep 9, 2019
https://www.yinzhuoei.com/index.php/archives/110/
专门写了一个文章,之前不知道这个技术,学会了来答一波
TKBnice commentedon Sep 29, 2019
模板引擎:
负责组装数据,以另外一种形式或外观展现数据。
优点:
jadefence commentedon Jan 11, 2020
那么vue的模板引擎用的到底是Jade(pug)还是Mustache呢?
simply-none commentedon Jan 15, 2020
所以Vue到底用了什么模板引擎呢???
why-debug commentedon Mar 2, 2020
想知道答案
snailsph commentedon Mar 11, 2020
意思是 vue模版的解析,AST --> render
blackcloud2333 commentedon May 25, 2020
有点好奇有什么样子的应用场景需要用到这个知识点吗?
之前做一个生成模板的公共引擎,遇到过类似的问题,其他的场景暂时还真没遇到过这样类似的问题
Frank11223 commentedon Jul 30, 2020
vue 在进行差值处理 和双向绑定时用了Mustache模板引擎
duxin14436106 commentedon Apr 3, 2023
https://blog.csdn.net/lq313131/article/details/126997597
vue使用了基于HTML的模板语法
渲染最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
Tracymcgrady946 commentedon Sep 7, 2023
Vue.js 使用的模板语法是基于自身实现的模板引擎,称为 Vue 模板编译器。
Vue 模板编译器是 Vue.js 的一部分,它负责将 Vue 模板转换为渲染函数。在运行时,Vue 模板编译器会将模板中的指令、表达式和文本等转换为对应的 JavaScript 代码,然后通过执行这些代码来生成最终的渲染结果。这种方式使得开发者可以使用类似 HTML 的模板语法来描述组件的结构和数据绑定,使代码更易读、易维护。
Vue 模板编译器支持以下特性:
插值表达式:使用双大括号 {{}} 进行文本插值。
指令:例如 v-bind、v-if、v-for 等,用于动态绑定属性、条件渲染和循环渲染等。
过滤器:通过管道符 | 对数据进行处理和格式化。
事件绑定:通过 v-on 指令来绑定 DOM 事件。
计算属性和监听器:通过 computed 和 watch 来实现对数据的监听和计算。
Vue 模板编译器在编译过程中会对模板进行静态分析,提取出模板中的静态内容,并生成可复用的渲染函数,从而提高运行时的性能。
需要注意的是,Vue 3.x 中的模板编译器和 Vue 2.x 中稍有不同,Vue 3.x 使用了基于 Proxy 的响应式系统和编译优化,以提供更好的性能和开发体验。
总的来说,Vue 模板编译器是 Vue.js 框架强大的一部分,它通过将模板转换为可执行的 JavaScript 代码,实现了数据绑定、指令和事件等功能,使得开发者能够更方便地构建交互式的用户界面。
panda-ally commentedon Nov 22, 2024
第一次见到这种问题,查了下:
Vue使用了类似mustache的双大括号语法{{ }}来进行数据插值,但还添加了很多其他的功能,比如支持v-if、v-for、事件处理、计算属性等等,是在mustache的基础上做了进一步的扩展。
Vue 的模板语法使用的是 HTML-based template syntax,基于一个自定义的模板引擎——Vue Template Compiler来实现。
Vue模板引擎的几个步骤:
1.模板语法解析:Vue Template Compiler将模板解析成抽象语法树AST;
2.优化:检查AST中的节点,将静态内容标记为静态节点,这样在后续更新视图时,只需要重新渲染那些变化了的部分;
3.生成代码:将AST转化为js渲染函数,每次视图更新的时候,就调用这个渲染函数,重新生成虚拟DOM;
4.渲染:新旧虚拟DOM对比,只更新需要变化的部分;