当前位置:首页 > 前端 > 正文内容

vue中涉及的字符串模板与dom模板

放牧的风2年前 (2022-04-01)前端5964

最近看到vue官方文档的时候,多次提及字符串模板和dom模板,对这个概念比较模糊,经查阅后记录供日后参考。

1. 字符串模板

字符串模板就是写在vue中的template中定义的模板,如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染,会被vue进行解析编译之后再被浏览器渲染,所以不受限于html结构和标签的命名。

Vue.component('MyComponentA', {
    template: '<div MyId="123"><MyComponentB>hello, world</MyComponentB></div>'
})
<div id="app">
    <MyComponentA></MyComponentA>
</div>

2. dom模板(或者称为Html模板)

dom模板就是写在html文件中,一打开就会被浏览器进行解析渲染的,所以要遵循html结构和标签的命名,否则浏览器不解析也就不能获取内容了。

下面的例子不会被正确渲染, 会被解析成mycomponent,但是注册的vue的组件是MyComponent,因此无法渲染。

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue            
            <MyComponent></MyComponent>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注册
        Vue.component('MyComponent', {
            template: '<div>组件类容</div>'
        });
        new Vue ({
            el: '#app'
        });    
    </script>
    </body>
</html>

所以,下面的例子就可以正常显示了:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue            
            <my-component></my-component>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注册
        Vue.component('my-component', {
            template: '<div>组件类容</div>'
        });
        new Vue ({
            el: '#app'
        });    
    </script>
    </body>
</html>

因为html对大小写不敏感,所以在DOM模板中使用组件必须使用kebab-case命名法(短横线命名)。

因此,对于组件名称的命名,可参考如下实现:

/*-- 在单文件组件、JSX和字符串模板中 --*/
<MyComponent/>

/*-- 在 DOM 模板中 --*/
<my-component></my-component>

/*-- 在所有地方 --*/
<my-component></my-component>


扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/83.html

标签: vue
分享给朋友:
返回列表

上一篇:vscode中的jsconfig.json文件首行无故报错

没有最新的文章了...

相关文章

浏览器同源政策及其规避方法

浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"(same-origin policy)。很多开发者都知道这一点,但了解得不全面。本文详细介绍"同源政策"的各个方面,以及如何规避它。一、概述1.1 含义1995年,同源...

跨域资源共享 CORS 详解

跨域资源共享 CORS 详解

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详...

JavaScript内存管理和垃圾回收机制

JavaScript内存管理和垃圾回收机制

像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()。相反,JavaScript是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“...

经得住拷问的HTTPS原理解析

经得住拷问的HTTPS原理解析

此文涵盖的大致内容:理解HTTPS原理的概念什么是对称加密和非对称加密?什么是数字签名?怎么生成?怎么校验?啥时候是对称加密?啥时候是非对称加密?啥时候进行算法加密?什么算法?第三方机构包含哪些?HTTPS 是什么?具体流程HTTPS和HT...

彻底理解浏览器的缓存机制

彻底理解浏览器的缓存机制

概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:HTTP请求(Request)报文,报文格式为:请求行...

script中defer和async区别

script中defer和async区别

主要记录下defer和async的区别:在没有defer或者async的情况下,会立即执行脚本,所以通常建议把script放在body最后<script src="script.js"></s...

评论列表

游客
刚刚

内容很有深度!https://sdceda.com/shi/994665060/

游客
5秒前

楼上的很有激情啊!https://sdceda.com/lao/551028236/

游客
3分钟前

管它三七二十一!http://bbs.kdhlpt.com/article/7522919.html

游客
4分钟前

楼主主机很热情啊!https://sdceda.com/lao/833946093/

游客
6分钟前

楼主英明!http://bbs.kdhlpt.com/article/7522919.html

游客
6分钟前

楼主英明!http://xtvi.zhujiajia.net/test/795774276.html

游客
7分钟前

收藏了,以后可能会用到!http://cgvw.zhujiajia.net/test/609222617.html

游客
7分钟前

楼上的能详细介绍一下么?https://sdceda.com/fei/235464593/

游客
7分钟前

太邪乎了吧?https://sdceda.com/laoliu/822538/

游客
8分钟前

东方不败外加灭绝师太啊!http://kdhlpt.com/article/3386450.html

游客
8分钟前

楼上的别说的那么悲观好吧!https://sdceda.com/lao/508924423/

游客
8分钟前

写的太好啦,评论一个http://mfxi.zhujiajia.net/test/348020321.html

游客
10分钟前

收藏了,很不错的内容!http://olyg.wxsljd.net/test/575715255.html

游客
10分钟前

文章写太挺好了,真的值得推荐http://bkkh.cableshow.net/test/376991099.html

游客
11分钟前

楼主就是我的榜样哦https://sdceda.com/fei/370399542/

游客
12分钟前

楼主的帖子越来越有深度了!https://sdceda.com/shi/054680722/

游客
14分钟前

这里的资源非常丰富,帮助我解决了很多问题。http://kdhlpt.com/article/5704413.html

游客
14分钟前

楼主写的很经典!https://sdceda.com/lao/437712412/

游客
15分钟前

每次看到楼主的帖子都有惊吓!http://bcak.zhujiajia.net/test/780050159.html

游客
16分钟前

楼主是一个神奇的青年!https://sdceda.com/shi/116251262/

游客
16分钟前

好东西,赞一个!https://sdceda.com/shi/753080785/

游客
16分钟前

收藏了,以后可能会用到!https://sdceda.com/seo/226182384/

游客
16分钟前

楼主是男的还是女的?http://kdhlpt.com/article/3386450.html

游客
17分钟前

无图无真相!http://kdhlpt.com/article/3386450.html

游客
17分钟前

帖子很有深度!http://hbpj.zhujiajia.net/test/691004482.html

游客
17分钟前

无图无真相!http://kdhlpt.com/article/5379653.html

游客
19分钟前

很给力!http://kdhlpt.com/article/5379653.html

游客
19分钟前

大神就是大神,这么经典!http://kdhlpt.com/article/5379653.html

游客
19分钟前

不错哦,楼主这是要火的节奏啊!http://hkxf.cableshow.net/test/928299831.html

游客
19分钟前

支持一个http://tpfy.youdodo.net/test/655420301.html

游客
21分钟前

好东西,赞一个!http://xtfo.bozhongzichan.net/test/571180284.html

游客
22分钟前

最近回了很多帖子,都没人理我!https://sdceda.com/lao/873030211/

游客
23分钟前

楼主练了葵花宝典吧?https://sdceda.com/lao/430397276/

游客
24分钟前

刚分手,心情不好!https://sdceda.com/laoliu/419679/

游客
25分钟前

很多天不上线,一上线就看到这么给力的帖子!http://xr90x.zjy2.com/e/4.html

游客
25分钟前

楼上的很有激情啊!http://bbs.kdhlpt.com/article/8853662.html

游客
25分钟前

楼主的文笔不错!http://dqra.xiehailong.net/test/742869552.html

游客
26分钟前

每次看到楼主的帖子都有惊吓!https://sdceda.com/seo/501016011/

游客
26分钟前

看了这么多帖子,第一次看到这么经典的!http://nkap.zhujiajia.net/test/781275187.html

游客
26分钟前

这一年啥事没干,光研究楼主的帖子了!http://bbs.kdhlpt.com/article/0408254.html

游客
26分钟前

经典,收藏了!https://sdceda.com/seo/818431352/

游客
26分钟前

楼上的别说的那么悲观好吧!http://qumj.zhujiajia.net/test/280827614.html

游客
27分钟前

看了这么多帖子,第一次看看到这么有内涵的!http://bbs.kdhlpt.com/article/0408254.html

游客
27分钟前

被楼主的逻辑打败了!http://bbs.kdhlpt.com/article/9333471.html

游客
27分钟前

这一年啥事没干,光研究楼主的帖子了!http://bbs.kdhlpt.com/article/9333471.html

游客
28分钟前

知识就是力量啊!http://fjci.zhujiajia.net/test/595349966.html

游客
31分钟前

太邪乎了吧?https://sdceda.com/seo/681722706/

游客
32分钟前

楼主写的很经典!https://sdceda.com/shi/295090393/

游客
35分钟前

楼上的说的很多!http://ueev.xiehailong.net/test/554361739.html

游客
35分钟前

帖子好乱!https://sdceda.com/shi/296421126/

游客
40分钟前

支持一下,下面的保持队形!http://jujd.cableshow.net/test/965775587.html

游客
41分钟前

最近回了很多帖子,都没人理我!http://cbxv.lekelai.net/test/738933608.html

游客
41分钟前

楼主很有艺术范!https://sdceda.com/laoliu/670101/

游客
42分钟前

支持楼上的!http://sjso.xiehailong.net/test/452265684.html

游客
44分钟前

楼主是男的还是女的?http://yeig.xybgl.net/test/013434356.html

游客
44分钟前

楼主主机很热情啊!https://sdceda.com/shi/407110234/

游客
46分钟前

帖子很有深度!http://qmzj.zhujiajia.net/test/682749713.html

游客
46分钟前

支持一个http://anwa.zhujiajia.net/test/844983260.html

游客
46分钟前

楼上的这是啥态度呢?http://qytw.zhujiajia.net/test/602676734.html

游客
47分钟前

我裤子脱了,纸都准备好了,你就给我看这个?http://sbaj.cableshow.net/test/237622411.html

游客
49分钟前

楼主好聪明啊!http://douhezhen.viptor.cn

游客
50分钟前

很经典,收藏了!http://xkzo.cableshow.net/test/439452567.html

游客
51分钟前

太高深了,理解力不够用了!http://jtsv.zsznjj.net/test/302152660.html

游客
52分钟前

今天上网不回帖,回帖就回精华帖!http://srbj.cableshow.net/test/139323438.html

游客
52分钟前

顶一下,收藏了!http://yxmko.sikao51.com/2024/3.html

游客
53分钟前

这位作者的文笔极其出色,用词精准、贴切,能够形象地传达出他的思想和情感。http://yzee.xiehailong.net/test/927776327.html

游客
54分钟前

好东西,赞一个!http://pryn.cableshow.net/test/466095377.html

游客
54分钟前

收藏了,很不错的内容!http://yusw.ydhealthy.net/test/347633128.html

游客
56分钟前

看在楼主的面子上,认真回帖!http://dade.xiehailong.net/test/761027523.html

游客
57分钟前

感觉不错!https://sdceda.com/seo/527419052/

游客
57分钟前

鉴定完毕!http://ponf.xiehailong.net/test/205618140.html

游客
58分钟前

收藏了,改天让朋友看看!https://sdceda.com/shi/690737686/

游客
59分钟前

顶顶更健康!http://qvjb.zhujiajia.net/test/972313561.html

游客
59分钟前

论坛的帖子越来越有深度了!http://zupu.zhujiajia.net/test/432497757.html

游客
60分钟前

楼主说的我也略懂!https://sdceda.com/laoliu/371899/

游客
1小时前

看在楼主的面子上,认真回帖!https://sdceda.com/shi/755572134/

游客
1小时前

今天怎么了,什么人都出来了!http://ilau.yckdrj.net/test/189519778.html

游客
1小时前

楼主是在找骂么?http://istu.cableshow.net/test/941078829.html

游客
1小时前

我默默的回帖,从不声张!http://rwxi.cableshow.net/test/329541437.html

游客
1小时前

看了这么多帖子,第一次看看到这么有内涵的!http://xsni.xybgl.net/test/356891526.html

游客
1小时前

有钱、有房、有车,人人都想!http://imht.iceko.net/test/204608253.html

游客
1小时前

一口气看完了,我要下去回味回味了!https://sdceda.com/lao/689417831/

游客
1小时前

态度决定一切,不错!https://sdceda.com/lao/025226283/

游客
1小时前

楼主今年多大了?http://qnue.zfgbw.net/test/080919902.html

游客
1小时前

东方不败外加灭绝师太啊!http://288bo.sxlkzx.cn

游客
1小时前

今天是个特别的日子,值得纪念!http://mkxz.cableshow.net/test/610463455.html

游客
1小时前

林子大了,什么鸟都有了啊!https://sdceda.com/shi/424818305/

游客
1小时前

对牛弹琴的人越来越多了!http://lznh.zhujiajia.net/test/515444565.html

游客
1小时前

坚持回帖!https://sdceda.com/fei/495246741/

游客
1小时前

我只是来赚积分的!http://ejsn.zhujiajia.net/test/758798076.html

游客
1小时前

楼上的能详细介绍一下么?https://sdceda.com/fei/333836555/

游客
1小时前

在这个版块混了这么久了,第一次看见这么给你的帖子!http://trmw.xiehailong.net/test/610238766.html

游客
1小时前

好无聊啊!http://qkde.xyebooks.net/test/951245760.html

游客
1小时前

楼主的帖子实在是写得太好了。文笔流畅,修辞得体!http://jrws.gmpedu.net/test/149431848.html

游客
1小时前

今天是个特别的日子,值得纪念!http://vfkl.zfgbw.net/test/859692753.html

游客
1小时前

太高深了,理解力不够用了!http://e4kjt.www.zsbfz.com

游客
1小时前

突然觉得楼主说的很有道理,赞一个!https://sdceda.com/fei/460650637/

游客
1小时前

这里的资源非常丰富,帮助我解决了很多问题。http://xwra.lekelai.net/test/912473631.html

游客
1小时前

楼主英明!http://anyang.viptor.cn

游客
1小时前

这里的资源非常丰富,帮助我解决了很多问题。http://ickv.xiehailong.net/test/497428754.html

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。