Skip to content

[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解 #561

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解

Activity

imEhllBdPGMVaArZ

imEhllBdPGMVaArZ commented on Jul 8, 2019

@imEhllBdPGMVaArZ

印象中是 mustache,模板引擎的初衷是解决早期的字符模板拼接的问题,也是因这些方面的慢慢的发展壮大。

SingleJoy

SingleJoy commented on Jul 23, 2019

@SingleJoy

这个问题问的意义不大吧,问的太偏了。

haizhilin2013

haizhilin2013 commented on Jul 23, 2019

@haizhilin2013
CollaboratorAuthor

@SingleJoy 主要是问对模板引擎的理解,一点都不偏。模板引擎很有用

vipbo

vipbo commented on Jul 23, 2019

@vipbo

这些题 都有解答吗? 还是只是将题目贴出来?

vipbo

vipbo commented on Jul 23, 2019

@vipbo

期初vue用的jade模板,后来由于商标原因改成了pug,只是换个名字,语法都与jade一样,
参考 这篇https://www.cnblogs.com/xiaohuochai/p/7222227.html

chimyking

chimyking commented on Aug 9, 2019

@chimyking

Vue使用了Mustache语法,即双大括号的语法。

SmithJackZuo

SmithJackZuo commented on Aug 20, 2019

@SmithJackZuo

为什么只提问,不解答呢

haizhilin2013

haizhilin2013 commented on Aug 20, 2019

@haizhilin2013
CollaboratorAuthor

@SmithJackZuo 上面有好多朋友解答了吗?

seho-dev

seho-dev commented on Sep 9, 2019

@seho-dev

https://www.yinzhuoei.com/index.php/archives/110/

专门写了一个文章,之前不知道这个技术,学会了来答一波

TKBnice

TKBnice commented on Sep 29, 2019

@TKBnice

模板引擎:
负责组装数据,以另外一种形式或外观展现数据。
优点:

  1. 可维护性(后期改起来方便);
  2. 可扩展性(想要增加功能,增加需求方便);
  3. 开发效率提高(程序逻辑组织更好,调试方便);
  4. 看起来舒服(不容易写错)
jadefence

jadefence commented on Jan 11, 2020

@jadefence

那么vue的模板引擎用的到底是Jade(pug)还是Mustache呢?

simply-none

simply-none commented on Jan 15, 2020

@simply-none

所以Vue到底用了什么模板引擎呢???

why-debug

why-debug commented on Mar 2, 2020

@why-debug

想知道答案

snailsph

snailsph commented on Mar 11, 2020

@snailsph

意思是 vue模版的解析,AST --> render

blackcloud2333

blackcloud2333 commented on May 25, 2020

@blackcloud2333

有点好奇有什么样子的应用场景需要用到这个知识点吗?
之前做一个生成模板的公共引擎,遇到过类似的问题,其他的场景暂时还真没遇到过这样类似的问题

Frank11223

Frank11223 commented on Jul 30, 2020

@Frank11223

vue 在进行差值处理 和双向绑定时用了Mustache模板引擎

duxin14436106

duxin14436106 commented on Apr 3, 2023

@duxin14436106

https://blog.csdn.net/lq313131/article/details/126997597
vue使用了基于HTML的模板语法
渲染最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

Tracymcgrady946

Tracymcgrady946 commented on Sep 7, 2023

@Tracymcgrady946

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

panda-ally commented on Nov 22, 2024

@panda-ally

第一次见到这种问题,查了下:
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对比,只更新需要变化的部分;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@imEhllBdPGMVaArZ@snailsph@SingleJoy@blackcloud2333

        Issue actions

          [vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解 · Issue #561 · haizlin/fe-interview