<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>
执行结果：
