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

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

放牧的风5个月前 (04-01)前端306

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

没有最新的文章了...

相关文章

NPM install -save 和 -save-dev 傻傻分不清

回顾 npm install 命令我们在使用 npm install 安装模块的模块的时候 ,一般会使用下面这几种命令形式:npm install moduleName # 安装模块到项目目录下 &...

npm更新模块并同步到package.json中

使用原始npm1.查看需要更新的版本npm outdated该命令会列出所有需要更新的项目2.修改package.json中需要更新的包对应的版本号npm update由于npm update只能按照package.js...

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

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

如何理解HTTP响应的状态码?

如何理解HTTP响应的状态码?

我们知道HTTP协议是通过HTTP请求和HTTP响应来实现双向通信的。 HTTP状态码(HTTP Status Code)是用以表示Web服务器HTTP响应状态的3位数字代码,由RFC 2616规范定义。 合理的状态码不仅可以让用...

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

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

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

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

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

发表评论

访客

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