Vue.js 学习笔记九：组件化开发之模板分离写法

目录

模板分离写法

---

模板分离写法

我们通过语法糖简化了 Vue 组件的注册过程，另外还有一个地方的写法比较麻烦，就是 template 模块写法。如果我们能将其中的 HTML 分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。

Vue 提供了两种方案来定义 HTML 模块内容。

使用 <script> 标签

		<div id="app">
			<my-component></my-component>
		</div>		
		<script type="text-x-template" id="my-component">
			<div>
				<h1>我是组件标题</h1>
				<p>我是组件内容1</p>
				<p>我是组件内容2</p>
			</div>
		</script>
		<script type="text/javascript">
			 Vue.component('my-component', {
				template: '#my-component'
			}) 
			const app = new Vue({
				el: '#app'
			})
		</script>

使用 <template> 标签

		<div id="app">
			<my-component></my-component>
		</div>		
		<template id="my-component">
			<div>
				<h1>我是组件标题</h1>
                <p>我是组件内容1</p>
                <p>我是组件内容2</p>
			</div>
		</template>
		<script type="text/javascript">
			 Vue.component('my-component', {
				template: '#my-component'
			}) 
			const app = new Vue({
				el: '#app'
			})
		</script>