template标签用法知识点整理

已于 2024-06-09 14:54:22 修改
阅读量1k 收藏 2
点赞数
分类专栏： vue从入门到入土 文章标签： vue 前端 templates
于 2021-04-27 13:00:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43775721/article/details/116197033
版权
本文详细梳理了Vue中的`template`标签使用，包括在HTML和Vue实例中的不同应用，以及Vue模板编译成渲染函数的过程。重点讨论了template不能与v-show共用的原因，并解释了在没有render函数时Vue如何处理template。内容涵盖Vue组件开发的基础知识，适合Vue初学者复习巩固。
摘要由CSDN通过智能技术生成

这是我学习vue的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教。

template标签用法知识点整理

一、template在html中的使用

        html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。
在这里插入图片描述

二、template在vue中的使用(template不能和v-show一起使用)

1、在组件中使用template

在这里插入图片描述

2、在Vue实例中使用template

在这里插入图片描述

3、在Vue中使用template原理说明

  • 当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树。
  • 当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树。
  • 而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。
    在这里插入图片描述
不及你笑靥如花
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
template 与 host , item trigger的关系
weixin_30693683的博客
04-16 173
1.host关联template的关系 1.Host可以连接到一个或多个模板。 Template具有继承关系,可以从一个Template link到另外一个Template。 2. Host和Template的关系 Template就是特殊的Host,是将Host资源进行抽象（将item,trigger,graph进行抽象）。不对应具体的主机。 在数据库的hosts表，status=...
关于template标签用法总结(含vue中的用法总结)
热门推荐
最初的梦想
09-02 23万+
文章目录html5中的template标签template标签操作的属性和方法vue中的template html5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 <!--当前页面只显示"我是自定义表现abc"这个内容，不...
template标签
最新发布
AgonyQAQ的博客
06-18 316
标签是一个用于封装可重用内容的非显式元素。它不直接显示在网页上，而是作为一个模板，用来定义一组HTML结构和样式，可以在JavaScript中实例化多次，动态地插入到文档的不同位置。这在创建复杂或重复的页面结构时非常有用，比如创建表单、列表项等。这样写的好处是，在需要取得或者控制标签中的css样式时，不会出现如下代码。这样用div标签包裹 而无法渲染内部样式或者取不到内部样式的情况。这样写的标签不会破环原本的html结构。解释一下 非显示元素。
＜template＞标签的用法
Sfh的博客
09-02 3万+
一、html5中的template标签 template标签，顾名思义，模板的意思 HTML5提供的新标签，更加规范和语义化 可以把列表项放入template标签中，然后进行批量渲染 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 二、template标签操作的属性和方法 content属性:在js中template标签对应的dom对象存在content属性，对应
关于template在html/vue中的用法（标签、属性、条件渲染、组件结构）
yolo_______95的博客
10-02 1万+
vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。标签在页面加载时该标签中的内容不会显示。元素，但是查看后台dom结构存在template标签。
vue中的template标签
u013594477的专栏
06-22 13万+
1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染 &amp;lt;template id=&quot;tem&quot;&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h1 id=&quot;title&quot;&
vue中的<template>标签是什么？
ForMyQianDuan的博客
05-18 2万+
在非单组件文件的vue.js的程序里，常会剪刀一个标签，似乎在官网上也没有专门讲到这个标签。 那这个到底是什么玩意？ 实际上 元素是被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。 具体情况见官方文档： 1、“条件渲染”，其中的章节——在元素上使用v-if条件渲染分组 2、“条件渲染”——用key管理可复用的元素 3、“条件渲染”——v-show 4、“...
【HTML】模板元素（`＜template＞`标签）的特点与使用方法
ljinest
07-05 6208
模板元素（template标签）的特点与使用方法 文章目录模板元素（template标签）的特点与使用方法提要什么是``元素优势使用方式参考 提要 在我接触到的各种js框架(lwc，vue，react)中，都或多或少使用到了模板元素(<template>)，最近在阅读React源码的过程中，也看到这样的注释： ’ Warning: Encountered a script tag while rendering React component. ’ + ​ 'Scripts inside
template_test_1
03-17
虽然没有具体的标签来进一步定义这个模板的类型，但我们可以根据一般模板的使用方式来探讨相关知识点。 首先，模板的基本概念是指预先设定好的结构或格式，使用者可以根据自己的需求进行填充或修改。在编程领域，...
个人整理的资料
10-09
【描述】中的“学习VC过程”表明这份资料集可能是由一个开发者或者学生在深入理解VC++和相关技术时积累的，通过整理和归类，将学习过程中的知识点、示例、文档等资源进行了系统化，旨在帮助其他学习者更高效地掌握...
Random:我以后必须整理的代码花絮
05-25
这些代码片段可能包含了巧妙的算法、不常见的编程技巧，或者是解决特定问题的独特方法。在这个名为"Random:我以后必须整理的代码花絮"的压缩包中，我们可以期待找到一些关于HTML（超文本标记语言）的示例和实践。 ...
iView框架问题整理小结
10-17
了解并熟练掌握这些知识点，将有助于你在使用iView框架时更加得心应手，提高开发效率。在实际项目中，还应注意查阅官方文档，理解每个组件的完整用法和注意事项，以确保应用的稳定性和用户体验。
vue element-ui读取pdf文件的方法
10-15
以上是根据给定文件内容整理的Vue Element UI读取PDF文件的方法的知识点。这一过程涵盖了多个重要的方面，如依赖管理、组件布局、脚本编写、用户交互和性能优化等，对于有兴趣在Vue项目中实现PDF阅读功能的开发者来...
HTML ＜template＞ 标签
玄链教育
08-25 818
template>标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。中的内容可以稍后使用 JavaScript 呈现。如果您有一些需要重复使用的 HTML 代码，则可以使用标记。如果在没有标记的情况下执行此操作，必须使用 JavaScript 创建 HTML 代码，以防止浏览器呈现这些代码。
[原创]zabbix监控项item、触发器trigger和模板template概述（17）
测试
03-26 726
1，概述。本篇文章只是做一个概述，毕竟是zabbix这个工具的核心内容，一篇文章是远远解释不完的，我们先做一个item、trigger和template概述。 item： 监控项。比如我们监控看到的一些cpu、内存、磁盘和网络带宽等获取到的item，我们统称为监控项。item由zabbix angent取得，然后提交zabbix server。 trigger： ...
Vue3 ref 模拟触发点击事件 此次用于模拟点击el upload 的上传
qq_39581137的博客
04-19 7267
由于vue2和vue3的ref使用不一样，经过控制台打印等一系列操作最终寻找到可以利用 triggerRef.value?.$.vnode.el?.click()这句来模拟点击
vue template标签用法
09-20
在Vue中，template标签用于定义Vue实例的模板。通过将模板代码包裹在template标签内部，可以将模板代码的结构和内容与Vue实例进行关联。 template标签有两种用法： 1. 将template标签作为Vue实例的根元素，即将Vue实例绑定到template标签所在的DOM元素内部。这种用法适用于需要将Vue实例的模板完全替换掉原有的DOM结构的情况。例如： ``` <template> <div> {{ message }} </div> </template> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }) </script> ``` 在上面的例子中，Vue实例绑定到了id为app的元素内部，template标签中的内容会完全替换掉id为app的元素内部的原有内容。 2. 将template标签作为Vue实例中的一个属性，即在Vue实例中定义template属性，并指定template属性的值为template标签所包裹的内容。这种用法适用于需要在Vue实例所绑定的DOM元素内部插入一段模板代码的情况。例如： ``` <div id="app"> <template> <div> {{ message }} </div> </template> </div> <script> new Vue({ el: '#app', template: ` <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> `, data: { title: 'Vue Template', content: 'This is a template example in Vue.' } }) </script> ``` 在上面的例子中，Vue实例绑定到了id为app的元素内部，template标签中的内容会被插入到id为app的元素内部。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值