1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <!--1.导入Vue的包-->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 </head>
12
13 <body>
14 <div id="app">
15 <mycom3></mycom3>
16 </div>
17
18 <!-- 在 被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 -->
19 <template id="tmp1">
20 <div>
21 <h1>这是通过template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
22 <h4>好用，不错！</h4>
23 </div>
24 </template>
25
26 <script>
27 Vue.component('mycom3',{
28 template:'#tmp1'
29 })
30
31 //创建 Vue 实例，得到 ViewModel
32 var vm = new Vue({
33 el:'#app',
34 data:{
35 msg:''
36 },
37 methods:{}
38 });
39 </script>
40 </body>
41 </html>
