vue中dom模板为什么要使用kebab-case命名法(短横线命名)
2022/1/25 23:04:51
本文主要是介绍vue中dom模板为什么要使用kebab-case命名法(短横线命名),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近看到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模板为什么要使用kebab-case命名法(短横线命名)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南
- 2024-11-16Vue项目实战:新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解:React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南:从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习:新手入门教程与实践指南
- 2024-11-16Vue3学习:从入门到初级实战教程