一、引用模板
引用模板就是把組件的內容放到<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>