第六章组件 54 组件-创建组件的方式3

 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>

posted on 2019-06-10 15:17 songsong_p_blue 阅读(279) 评论(0) 收藏举报

第六章 组件 54 组件-创建组件的方式3

第六章组件 54 组件-创建组件的方式3