Dom模板(或者稱為Html模板)(非字符串的模板)
Dom 模板就是寫在 html 文件中，一打開就會被瀏覽器進行解析渲染的，所以要遵循 html 結構和標簽的命名，否則瀏覽器不解析也就不能獲取內容了
HTML 中的 標簽（比如 DIV）名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符，
下面的例子不會被正確渲染, 一打開會被瀏覽器解析成 mycomponent，但是注冊的 vue 的組件是 MyComponent，因此無法渲染
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<!-- 在 HTML 中是 PascalCase (首字母大寫命名) 的不會被渲染 -->
<MyComponent></MyComponent>
<!-- 在 HTML 中是 camelCase (駝峰命名) 的不會被渲染 -->
<myComponent></myComponent>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 注冊時：PascalCase (首字母大寫命名)、camelCase (駝峰命名)、kebab-case (短橫線命名) 都可以
Vue.component('MyComponent', {
template: '<div>Hello Vue</div>'
});
new Vue ({
el: '#app'
});
</script>
</html>
下面的例子就可以正常渲染了，這意味著當你使用 DOM 中的模板時，標簽名需要使用其等價的 kebab-case (短橫線分隔命名) 的方式書寫
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<!-- 在 HTML 中是 kebab-case (短橫線命名) 的會被渲染 -->
<my-component></my-component>
<my-Component></my-Component>
<My-component></My-component>
<My-Component></My-Component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 注冊時：PascalCase (首字母大寫命名)、camelCase (駝峰命名)、kebab-case (短橫線命名) 都可以
Vue.component('MyComponent', {
template: '<div>Hello Vue</div>'
});
new Vue ({
el: '#app'
});
</script>
</html>
同樣，組件 props 屬性也是如此
HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符，
下面的例子不會被正確渲染, 一打開會被瀏覽器解析成 posttitle，但是注冊的 vue 的組件是 postTitle，因此也無法渲染
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<!-- 在 HTML 中是 PascalCase (首字母大寫命名) 的不會被渲染 -->
<my-component PostTitle="Hello Vue"></my-component>
<!-- 在 HTML 中是 camelCase (駝峰命名) 的不會被渲染 -->
<my-component postTitle="Hello Vue"></my-component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('MyComponent', {
// 注冊時：PascalCase (首字母大寫命名)、camelCase (駝峰命名)、kebab-case (短橫線命名) 都可以
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
new Vue ({
el: '#app'
});
</script>
</html>
下面的例子就可以正常渲染了，這意味著當你使用 DOM 中的模板時，prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 的方式書寫
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<!-- 在 HTML 中是 kebab-case (短橫線命名) 的會被渲染 -->
<my-component post-title="Hello Vue"></my-component>
<my-component Post-title="Hello Vue"></my-component>
<my-component post-Title="Hello Vue"></my-component>
<my-component Post-Title="Hello Vue"></my-component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('MyComponent', {
// 注冊時：PascalCase (首字母大寫命名)、camelCase (駝峰命名)、kebab-case (短橫線命名) 都可以
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
new Vue ({
el: '#app'
});
</script>
</html>
$emit 方法
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<!-- 在 HTML 中只能是 kebab-case (短橫線命名) 的會被渲染 -->
<my-component @component-click="myClick"></my-component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('MyComponent', {
template: '<h3 @click="titleClick">Hello Vue</h3>',
methods: {
titleClick(){
// 當使用 $emit 時，命名規則只能使用 kebab-case (短橫線命名)
this.$emit("component-click", 123)
}
}
})
new Vue ({
el: '#app',
methods: {
myClick(val){
console.log(val)
}
}
});
</script>
</html>
PS：組件注冊名、props 接收名、$emit名，還可以使用全小寫字母命名(沒有任何大寫字母或者短橫線)，例如：mycomponent、posttitle、componentclick，如果這樣，使用時也必須按照全小寫的方式書寫
字符串模板（單文件組件、JSX）
字符串模板就是寫在 vue 中的 template 中定義的模板，如
.vue 的單文件組件模板和定義組件時 template 屬性值的模板。字符串模板不會在頁面初始化時參與頁面的渲染，而是會被 vue 進行解析編譯之后再被瀏覽器渲染，所以不受限于 html 結構和標簽的命名
<div id="app">
<!-- 以下方式都可以 -->
<MyComponent></MyComponent>
<my-component></my-component>
</div>
Vue.component('MyComponent', {
template: '<div>Hello Vue</div>'
})
new Vue ({
el: '#app'
});
<div id="app">
<!-- 以下方式都可以 -->
<MyComponent postTitle="Hello Vue"></MyComponent>
<MyComponent post-title="Hello Vue"></MyComponent>
<my-component postTitle="Hello Vue"></my-component>
<my-component post-title="Hello Vue"></my-component>
</div>
Vue.component('MyComponent', {
props: ['postTitle']
template: '<div>{{ postTitle }}</div>'
})
new Vue ({
el: '#app'
});
<div id="app">
<!-- 以下方式都可以 -->
<my-component @componentClick="myClick"></my-component>
<my-component @component-click="myClick"></my-component>
</div>
Vue.component('MyComponent', {
template: '<div @click="titleClick">Hello Vue</div>',
methods: {
titleClick(){
this.$emit("componentClick", 123)
}
}
})
new Vue ({
el: '#app',
methods: {
myClick(val){
console.log(val)
}
}
});
總結
定義組件名的方式有三種：
1、使用 kebab-case
Vue.component('my-component', { /* ... */ });
當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component>
2、使用 PascalCase
Vue.component('MyComponent', { /* ... */ });
當使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。
也就是說 <my-component> 和 <MyComponent> 都是可接受的。
3、使用 camelCase
Vue.component('myComponent', { /* ... */ });
當使用 camelCase (駝峰命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。
也就是說 <my-component> 和 <myComponent> 都是可接受的。
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的
定義 prop 名的方式有三種：
1、使用 kebab-case
Vue.component('my-component', {
props: ['post-title']
});
當使用 kebab-case (短橫線分隔命名) 定義一個 prop 時，你也必須在引用這個自定義 prop 時使用 kebab-case，
例如 <my-component post-title="Hello Vue"></my-component>
2、使用 PascalCase
Vue.component('my-component', {
props: ['PostTitle']
});
當使用 PascalCase (首字母大寫命名) 定義一個 prop 時，你在引用這個自定義 prop 時兩種命名法都可以使用。
也就是說 <my-component PostTitle="Hello Vue"></my-component> 和
<my-component post-title="Hello Vue"></my-component> 都是可接受的
3、使用 camelCase
Vue.component('my-component', {
props: ['postTitle']
});
當使用 camelCase (駝峰命名) 定義一個 prop 時，你在引用這個自定義 prop 時兩種命名法都可以使用。
也就是說 <my-component postTitle="Hello Vue"></my-component> 和
<my-component post-title="Hello Vue"></my-component> 都是可接受的
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的
$emit 使用方法和 prop 使用方法一樣
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的
