Vue 中的 template 标签有什么用?

Vue 中的 template 标签有什么用?

技术教程gslnedu2025-05-25 12:15:136A+A-

template 主要是作为一个占位符去使用,在 Vue2和 Vue3中 template 的表现有一些区别:

Vue 2:作为一个占位符去使用或者是在组件中传递一个插槽内容。无论什么情况,template 在compiler 后会被去除。

Vue 3:用法同 Vue2,但是在不使用 v-if、v-else-if或 v-else、v-siot、v-for的时候,Vue 不会进行处理,会直接渲染成一个 HTML 原生的 template 标签。

Vue 2 表现分析

Vue 2 中对应 template仅仅是属于一个占位符,在 we-template-compiler处理完毕后,其并不会保留在 render 函数中。换句话说,其最后并不会影响到页面上的渲染的 DOM树。

Vue 3 表现分析

Vue3 中的 template 与 Vue 2 中的有些差别:

template 如果上面不携带任何指令,那么它将被渲染成一个原生的 template 标签。

template 只有与下面的指令一起使用时,里面的元素才会被 Vue 内部进行处理。也就是决定它展示或不展示,或者展示到哪个插槽的位置。

v-if、v-else-if、v-else、v-for、v-slot(简写为 #插槽名)

点击这里复制本文地址 以上内容由朽木教程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

朽木教程网 © All Rights Reserved.  蜀ICP备2024111239号-8