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

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

放牧的风2个月前 (04-01)前端144

最近看到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文件首行无故报错

没有最新的文章了...

相关文章

Chrome浏览器开启Ajax跨域访问调试

Chrome浏览器开启Ajax跨域访问调试

由于浏览器安全性限制,Ajax是不能跨域访问的,而我们在日常开发工作中,经常会出现本地开发环境需要访问其他服务器上的API情况。提示信息为:Access to XMLHttpRequest at 'http://****'...

JavaScript for...of与for...in的区别

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象定义要迭代的数据。以下示例显示了与Array一起使用时,fo...

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

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

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

跨域资源共享 CORS 详解

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

三十分钟包会——正则表达式

三十分钟包会——正则表达式

一、前言正则表达式,对大家来说既熟悉又陌生。熟悉是因为工作中有很多场景能用到,比如手机号、邮箱、密码等规则校验。陌生则是因为正则表达式看上去就是一堆乱码,且一眼看上去很难看懂匹配规则。有时候在网上去找一个特定规则的正则表达式,搜出来的结果各...

script中defer和async区别

script中defer和async区别

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

发表评论

访客

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