定义组件模板
<body>
<div id="app">
<Hello></Hello>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
Vue.component('Hello',{
template: '<div> hello 组件 </div>',
})
new Vue({
el: '#app'
})
</script>
template标签
<body>
<div id="app">
<Hello></Hello>
<template>
<p> 456 </p>
</template>
</div>
<Hello></Hello>
<!-- 组件的模板用一个template标签来完成 -->
<!--
缺点： 将来渲染到页面中
有解决方案
-->
<template id = "hello">
<!-- template标签的直接子元素只能有一个 -->
<div>
今天是个好日子
<p> 123 </p>
</div>
</template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
通过is属性绑定一个组件
html中哪些规定了自己的直接子元素的标签，是不能直接放组件的
解决： 通过is属性绑定一个组件
<body>
<div id="app">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- <Hello></Hello> 这个是不行的 -->
<tr is = "Hello"></tr>
</table>
</div>
<template id = "hello">
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
