Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Jul 2, 2019 · 18 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the vue vue label Jul 2, 2019
@imEhllBdPGMVaArZ
Copy link

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

@SingleJoy
Copy link

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

@haizhilin2013
Copy link
Collaborator Author

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

@vipbo
Copy link

vipbo commented Jul 23, 2019

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

@vipbo
Copy link

vipbo commented Jul 23, 2019

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

@chimyking
Copy link

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

@SmithJackZuo
Copy link

为什么只提问,不解答呢

@haizhilin2013
Copy link
Collaborator Author

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

@seho-dev
Copy link

seho-dev commented Sep 9, 2019

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

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

@TKBnice
Copy link

TKBnice commented Sep 29, 2019

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

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

@jadefence
Copy link

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

@simply-none
Copy link

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

@why-debug
Copy link

想知道答案

@snailsph
Copy link

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

@blackcloud2333
Copy link

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

@Frank11223
Copy link

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

@duxin14436106
Copy link

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

@Tracymcgrady946
Copy link

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 代码,实现了数据绑定、指令和事件等功能,使得开发者能够更方便地构建交互式的用户界面。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests