一、引用模板

引用模板就是把组件的内容放到<template></template>中并引用。一般当组件的内容比较多的时候使用引用模板的方式。

 

二、代码实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>引用模板</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <!-- 显示自定义的组件 可以多次重复显示组件 相互是独立的不受影响 -->
13         <welcome></welcome>    
14         <welcome></welcome>    
15     </div>
16 
17     <!-- 引用模板 命名为dodo -->
18     <!-- template标签必须有且仅有一个根元素(即实例中的div标签不能去掉) -->
19     <template id='dodo'>
20         <div>
21             <h2>{{msg}}</h2>
22             <ul>
23                 <li v-for='val in names'>{{val}}</li>
24             </ul>
25         </div>
26     </template>
27 
28     <script>
29 
30         //vue实例
31         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
32             el:'#hello',    
33             components:{    //自定义局部组件
34                 'welcome':{    //welcome为组件ID
35                     //name:'Names',    //Names为组件名字(也可以不写)
36                     template:'#dodo',
37                     data:function(){
38                         return {
39                         msg:'欢迎来到王者荣耀',
40                         names:['alice','john','maass','simon']
41                         }
42                     }
43                 }
44             }
45         });
46     </script>
47 </body>
48 </html>