最近看到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/[email protected]/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/[email protected]/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://www.uj5u.com/qianduan/268634.html
標籤：HTML5
上一篇：能幫我看看這段XML+HTML小程式有什么問題嗎？這個程式實作了滑鼠點擊一行后，顯示該行的詳細資訊。但是我點擊一行后，總是顯示第一行的資訊，其他行無法顯示。
下一篇：asp如何獲取ipv6地址