模板抽离？ 因为html代码写在template里面看起来乱，格式不好控制。
模板抽离一：写在script里面，
模板抽离二：写在template标签里面
模板抽离三：在.vue 文件里 带有template标签，以后再说。
注意：只能包含一个根元素！！！（如div）
注意：只能包含一个根元素！！！（如div）
注意：只能包含一个根元素！！！（如div）
我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--模板抽离？ 因为html代码写在template里面看起来乱，格式不好-->
<!--模板抽离一：写在script里面-->
<script type="text/x-template" id="myTitle1">
<!--注意只能包含一个根元素（div）-->
<div>
<span>Title1</span>
<span>User</span>
</div>
</script>
<!--模板抽离二：写在template标签里面-->
<template id="myTitle2">
<!--注意templa里只能包含一个根元素（div）-->
<div>
<span>Title2</span>
<span>User</span>
</div>
</template>
<div id="app">
<my-title1></my-title1>
<my-title2></my-title2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-title1',{
template:"#myTitle1"
});
Vue.component('my-title2',{
template:"#myTitle2"
});
let app = new Vue({
el: '#app',
});
</script>
</body>
</html>
我是分割线
前台效果：
Title Title2 User