目录
模板分离写法
我们通过语法糖简化了 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>