Vue3 template

说明

template不会显示在网页中:解决vue只能放在标签上的问题,当有一些业务需求不能放在标签上或者希望放在标签之外执行vue表达式的时候可以使用。

注意:不能直接单独使用

在if中使用template

<template v-if="1==1">
   <span>这里是span</span>
</template>

在v-for中使用template

<template v-for="n in 10">
  {{n}} <br/>
</template>

总结

template模板在网页上是不会展示的

### Vue3 Template Syntax and Usage In Vue3, the template syntax has been refined to be more concise and powerful. For instance, when creating components with slots, developers can utilize a new shorthand `v-slot` directive or its abbreviated form `#`. The old way of using attributes like `slot="xxx"` and `slot-scope="scope"` is replaced by this unified approach which looks cleaner and offers better readability[^3]. To demonstrate how templates work within Vue3 projects created via Vue CLI (which involves setting up through global installations such as `@vue/cli`, among others)[^1], consider an example where one might want to pass data into child components: ```html <!-- ParentComponent.vue --> <template> <ChildComponent v-slot:header="{ message }"> {{ message }} </ChildComponent> </template> <script lang="ts"> import { defineComponent } from &#39;vue&#39;; import ChildComponent from &#39;./ChildComponent.vue&#39;; export default defineComponent({ name: "ParentComponent", components: { ChildComponent, }, }); </script> ``` And here’s what the corresponding child component would look like: ```html <!-- ChildComponent.vue --> <template> <slot name="header" :message="&#39;Hello from Child&#39;"></slot> </template> <script lang="ts"> import { defineComponent } from &#39;vue&#39;; export default defineComponent({ name: "ChildComponent" }); </script> ``` This setup allows for scoped slot props (`{ message }`) passed down from parent to child while adhering strictly to modern Vue3 practices. For those familiar with earlier versions of Vue, it&#39;s worth noting that some changes have occurred regarding attribute bindings on `<template>` tags containing both custom directives and standard HTML attributes, leading potentially to errors if not handled correctly according to updated guidelines provided in official documentation[^2].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑石课堂

请给我打钱!!!谢谢,不客气!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值