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 <title>Document</title> 8 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 9 </head> 10 11 <body> 12 <div class="app"> 13 14 <t1></t1> 15 <t2></t2> 16 <t3></t3> 17 </div> 18 <script> 19 var testone = { 20 data: function () { 21 return { 22 msg: 'a' 23 } 24 25 }, 26 template: '<div>{{msg}}</div>' 27 } 28 var testtwo = { 29 data: function () { 30 return { 31 msg: 'b' 32 } 33 }, 34 template: '<div>{{msg}}</div>' 35 } 36 var testthree = { 37 data: function () { 38 return { 39 msg: 'c' 40 } 41 }, 42 template: '<div>{{msg}}</div>' 43 } 44 var app = new Vue({ 45 el: '.app', 46 data: { 47 48 }, 49 components: { 50 't1': testone, 51 't2': testtwo, 52 't3': testthree, 53 } 54 }) 55 </script> 56 </body> 57 58 </html>
通过在vue实列中添加了components，进行局部模板。