首页 > 其他分享 >《标签篇》标签template

《标签篇》标签template

时间:2024-01-16 14:44:22浏览次数:23  
标签:vue 浏览器 渲染 标签 代码 template

介绍

参考链接:https://www.cnblogs.com/ibcdwx/p/16292117.html

Vue中提供的template标签,实际上并不会作为标签渲染到浏览器页面上。只是一个辅助性标签,不影响它包裹标签的结构,比如说下面的例子:

<template>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
</template>

最终在浏览器渲染出来的还是:

  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>

template标签是辅助性标签,比如说下面的用法:

<template v-if="false">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
</template>

tempalte的作用

参考链接:https://blog.csdn.net/yong550517063/article/details/127823129

vue开发的组件中,特别是.vue为后缀的文件,常常见到一个包裹的一段界面的代码。但你没有发现,当你发布后,查看源码,你会发现这个template标签不见了,这个就是template的核心功能。

其实template并不是vue特有的标签,据说是2013年各大浏览器就开始支持template了。所在最新的浏览器都支持。

使用template的好处就是当我们的组件被渲染到页面时,template不会作为div这样的标签,多次循环的时候,它里面的代码就可以多次使用,请看以下代码:

建立一个AboutView.vue文件,贴上以下代码:

代码无所谓

image

总结:template的作用是一种模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上!

标签:vue,浏览器,渲染,标签,代码,template
From: https://www.cnblogs.com/fusio/p/17967613

相关文章

  • 《标签篇》标签component
    简介参考链接:https://www.runoob.com/vue2/vue-component.html组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:注册一个全局组件......
  • 基于标签值分布的强化学习推荐算法(Reinforcement Learning Recommendation Algorithm
    前言看论文的第三天,坚持下去。慢慢来,比较快。——唐迟本文基于2023年6月28日发表在MATHEMATICS上的一篇名为“基于标签值分布的强化学习推荐算法”(ReinforcementLearningRecommendationAlgorithmBasedonLabelValueDistribution)的文章。文章提出了一种基于标签分布......
  • 配置redisTemplate序列化,解决乱码与反序列化失败
    /***@projectName:MultiModuleDemo*@package:com.example.config*@className:RedisConfig*@description:TODO(配置RedisTemplate序列化)*@date:2023/12/1821:08*@version:1.0*/@ConfigurationpublicclassRedisConfig{@BeanpublicRedi......
  • Python-ttk的标签
    1:效果图2:代码importttkbootstrapasttkfromttkbootstrap.constantsimport*root=ttk.Window()ttk.Label(root,text="标签1",bootstyle=INFO).pack(side=ttk.LEFT,padx=5,pady=10)ttk.Label(root,text="标签2",bootstyle="inverse").pack(s......
  • XAML中DataTemplate变量隐藏的解决方法
    title:XAML中DataTemplate变量隐藏的解决方法date:2023-11-13categories:编程tags:-C#-.NET-XAML前言微软的许多XAML框架,如WPF、UWP、WinUI3等,在DataTemplate下都会遇到变量隐藏(Variableshadowing)的问题。为了访问外部实例成员,经常需要写很多曲折的代码,但也没有办......
  • Go标准库:Go template用法详解
    本文只介绍template的语法和用法,关于template包的函数、方法、template的结构和原理,见:深入剖析Gotemplate。入门示例以下为test.html文件的内容,里面使用了一个template语法{{.}}。<!DOCTYPEhtml><html> <head> <metahttp-equiv="Content-Type"content="text/html;char......
  • 认识Maven标签
    <?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/......
  • 【opencv学习笔记】028之模板匹配——matchTemplate函数详解
    目录​ ​一、前言​​​ ​二、模板匹配​​​ ​1、模板匹配是个啥​​​ ​2、常用匹配算法​​​​ ​3、API​​​ ​4、代码展示​​​ ​5、执行结果​​一、前言遭遇了点突发情况,所以今天更新的有点晚,也不知道能不能等到今天发出去了。终于可以从模板匹......
  • Microsoft 365 新功能速递:数据丢失预防和信息保护策略和标签的仅查看模式
    51CTO博客链接:https://blog.51cto.com/u_13637423微软将于2024年2月推出新功能数据丢失预防和信息保护策略和标签的仅查看模式,此功能允许具有仅查看受限权限的管理员查看数据丢失预防和信息保护策略配置的详细信息,而无需编辑策略或标签配置。这将如何影响您的组织:1.     为管......
  • VUE怎么提示,当用户关闭标签页,提示离开此网站?系统可能不会保存
    如果您想在用户关闭标签页时提示而不是基于路由的导航离开,您可以使用beforeunload事件。在Vue中,可以在组件的mounted钩子中添加事件监听器。以下是一个简单的示例:<template><div><!--YourVuecomponentcontentgoeshere--></div></template><script>expo......