Vue：字符串模板和dom模板的区别

最近看到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>

Vue：字符串模板和dom模板的区别相关推荐

字符串模板和dom模板的区别
dom模板就是原先就写在页面上的,能被浏览器识别的 html 结构,会在一加载就被浏览器渲染,所以要遵循 html 结构和标签命名,不然是不会被浏览器解析的,也就获取不到内容了,接着js获取 dom ...
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
vue的组件和es6模板引擎组件
今天学习了: 要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<组件名></组件名>形式来使用组件了全局组件注册步骤小结: ①注册组件component并命名 ...
Vue实例的属性及模板渲染
Vue实例的属性及模板渲染 1 概述 2 el:与DOM元素绑定 3 data:定义双向绑定的数据 4 computed:计算属性 5 methods:定义Vue实例的方法 6 Vue中的三种模板 6 ...
ie模版字符串_字符串（String）模板引擎被视为是有害的
用模板和一些数据来生成HTML不是一项特别繁重的任务.那些你必须要为HTML做的事才是效率低下的部分. 假如你有一个代表改变数据的UI: Current score: {{currentScore}} ...
学习Vue的mustache语法-mustache模板引擎
学习地址 : https://www.bilibili.com/video/BV1EV411h79m?vd_source=a81826692f4afea80764f4048dc1ae0a 代码地址 : ...
Vue源码之mustache模板引擎(二) 手写实现mustache
Vue源码之mustache模板引擎(二) 手写实现mustache mustache.js 个人练习结果仓库(持续更新):Vue源码解析 webpack配置可以参考之前的笔记Webpack笔记安 ...
Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一) 个人练习结果仓库(持续更新):Vue源码解析抽空把之前学的东西写成笔记. 学习视频链接:[尚硅谷]Vue源码解析之mustache模板引擎模板引擎是什么 ...
html模板引擎字符串长度,Web前端模板引擎の字符串模板
这是一个系列文章,将会介绍目前Web前端领域里用到的三种模板引擎技术,它们分别是: 基于字符串的模板基于Dom操作的模板基于虚拟Dom的模板本文是这个系列的第一篇,着重介绍基于字符串的模板引擎的 ...

Vue：字符串模板和dom模板的区别

1.字符串模板

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

Vue：字符串模板和dom模板的区别相关推荐

最新文章

热门文章