<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 配合is屬性使用的標簽只是一個占位符，不會渲染到頁面 -->
<h2 is="custom-component"></h2>
<!--
select標簽中只能出現option標簽
ul,ol標簽中只能出現li標簽
thead,tbody標簽中只能出現tr標簽
dl標簽中只能出現dt和dd標簽
-->
<select>
<!-- 無效 -->
<!-- <option-component></option-component> -->
<!-- 需要使用option做占位符，is指定組件名稱 -->
<option is="option-component"></option>
</select>
<ul>
<!-- <li is="li-component"></li> -->
<!-- <li-component></li-component> -->
</ul>
</div>
<script>
Vue.component('custom-component', {
template: `
<div>這是一個自定義組件</div>
`
})
Vue.component('option-component', {
template: `
<option>這是一個option組件</option>
`
})
Vue.component('li-component', {
template: `
<li>這是一個li組件</li>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
執行結果：
