Vue中调用组件使用kebab-case短横线命名法和使用大驼峰的区别详解
Vue中调用组件使用kebab-case(短横线)命名法和使用大驼峰的区别
1.解析官网手册说明
红线部分已经说的很清楚,“直接在DOM(即非字符串模版)中只有kebab-case 生效”。
只不过说的不是人话,现在我们来具体分析一下。
2.什么是“字符串模版”,什么是“dom模版” 字符串模版
字符串模板就是写在vue中的template中定义的模板,如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染,会被vue进行解析编译之后再被浏览器渲染,所以不受限于html结构和标签的命名。
实例:
Vue.component('MyComponentA', { template: '<div MyId="123"><MyComponentB>hello, world</MyComponentB></div>' }) <div id="app"> <MyComponentA></MyComponentA> </div>
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中使用组件,那么就不能用大驼峰式写法。如果是在.vue 文件中就可以,就这么简单。
到此这篇关于Vue中调用组件使用kebab-case(短横线)命名法和使用大驼峰的区别的文章就介绍到这了,更多相关vue短横线命名法和大驼峰区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue+ElementUI技巧之自定义表单项label的文字提示方法
这篇文章主要给大家介绍了关于Vue+ElementUI技巧之自定义表单项label文字提示的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02Vue.js与 ASP.NET Core 服务端渲染功能整合
本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下2017-11-11Vue实现导出Excel表格文件提示“文件已损坏无法打开”的解决方法
xlsx用于读取解析和写入Excel文件的JavaScript库,它提供了一系列的API处理Excel文件,使用该库,可以将数据转换Excel文件并下载到本地,适用于在前端直接生成Excel文件,这篇文章主要介绍了Vue实现导出Excel表格,提示文件已损坏,无法打开的解决方法,需要的朋友可以参考下2024-01-01
最新评论