vue官方文档如下:
为什么dom中的模板不区分大小写,而字符串中的模板却区分大小写?
dom模板:
dom模板就是原先写在html文件中,一打开就会被浏览器进行解析渲染的,所以要遵循html结构和标签的命名,否则浏览器不解析也就不能获取内容了。而html标签是不区分大小写的,所以如果我们采用驼峰形式命名的组件被浏览器当作html解析时候,就会找不到对应的组件名字,从而出现渲染出错(eg:MyComponent被浏览器解析成mycomponent,所以能找到才怪)
例子如下:
//全局组件
Vue.component('MyComponent', {
template: '<div>Hello Vue</div>'
});
//这里会被解析成小写的<mycomponent></mycomponent>所以找不到这个组件,也就无法渲染了
<MyComponent></MyComponent>
//此时可以使用短横线格式<my-component></my-component>就没问题了
<my-component></my-component>
再来看下另外一句:如果你使用字符串模板,那么这个限制就不存在了。
字符串模板:
字符串模板就是写在vue中的template中定义的模板,如下,.vue的单文件组件也是字符串模板。字符串模板不会一开始参与页面的渲染,会被vue进行解析编译之后再被浏览器渲染,所以不受限于html结构和标签的命名。
多说无益,上代码
Vue.component('MyComponentB', {
template: '<MyComponent></MyComponent>'
});
//这时候使用标签<MyComponent>竟然能正确渲染,也就是所谓的字符串模板不受限制,先由vue解析之后再渲染
<my-component-b></my-component-b>
另外我建了个vue微信学习群,大家可以一起交流(现在也就4个人。。。)