Vue3官方文档翻译之Template Syntax

引言

原文: http://blog.duhbb.com/2022/02/11/translation-of-template-syntax-in-vue-3-offiicial-doc/

欢迎访问我的博客: http://blog.duhbb.com/

主要介绍了Vue3中的模板的相关语句, 组件实例中的数据属性以及事件触发如何能在模板中响应式的更新以及体现, 另外还介绍了很多以v-开头的特殊的属性, 也就是Vue3中的指令, 以后再看到那些奇奇怪怪的语法就不会感到陌生了.

Vue3官方文档翻译之模板语法

文本插入?

interpolation: 插话；添加内容；<数>插值

在文本插入中最基本的方式是使用"Mustache"语法(也就是双花括号, 其实就是用来占位滴):

<span>Message: {
   { msg }}</span>

这个mustache标签将会被msg的属性所替代, 也就是只要msg的值有所改变, mustache标签中的内容也会跟着变.

P.S. 我是不是记得{ {}}好像被废弃了?

原始HTML

{ {}} 会将数据解释为纯文本, 而不是HTML. 为了输出真实的HTML, 需要使用v-html指令:

<p>Using text interpolation: {
   { rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

嘿, 伙计们, 我们遇到了新的知识了.

这里的 v-html 属性被称之为指令. 指令以v-开头来表名她们是Vue提供的特殊的属性. 正如你所想的那样(谁知道你怎么想的呢), 这些指令在DOM渲染的时候会有特殊的作用.

这里 v-html的作用是让元素的innerHTML随实例的rawHtml的属性而更新.

span标签中的内容会被rawHtml属性所替换, 并且会被解释为HTML.

注意, 不要用v-html来组建模板, 因为Vue不是一个字符串模板引擎, 组件是构成UI复用和组成的基本单元.

P.S. 没太搞明白这句话,