文章目录
前言
本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习
Vue官网
系列文章目录，Vue学习目录，每一章都有代码例子说明
三、Vue组件模板的分离写法
3.1 为什么要用使用分离写法？
我们知道组件的展示内容是在属性template定义好的，然后会发现div的内容都直接在对象里面写，如果简单的内容还是可以的，但是实际的开发，肯定是比较复杂是功能，如果直接写在对象里就有点不好维护，也不好理解代码。如果把这个template对应的div放出来，那我们组件对象就好维护很好
3.2 怎么分离元素
有一个元素标签template就可以办到分离写法，在定义好，定义好id，然后在对象里用’#id’就可以了
<template id="component1">
<div>
<h2>我的第一个组件</h2>
</div>
</template>
组件的对象使用（’#id’）
Vue.component("component1",{
template: '#component1'
})
3.2 完整例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello vue</title>
</head>
<body>
<div id="app">
<component1></component1>
<component2></component2>
</div>
<template id="component1">
<div>
<h2>我的第一个组件</h2>
</div>
</template>
<template id="component2">
<div>
<h2>我的第二个组件</h2>
</div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
/**
* 组件的分离写法就是把使用template元素标签，定义好id，然后在组件的template上指定 ’#id‘就可以使用
*/
Vue.component("component1",{
template: '#component1'
})
const app = new Vue({
el: '#app',
components: {
'component2': {
template: "#component2"
}
}
})
</script>
</html>
展示效果：
8496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
