vue X-Template
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <my-component></my-component> 13 <script type="text/x-template" id="my-component"> 14 <div>这是组件的内容</div> 15 </script> 16 </div> 17 <!-- 开发环境版本,包含了用帮助的命令行警告 --> 18 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 19 <script type="text/javascript"> 20 //vue提供里另一种定义模板的方式 21 //在<script>标签里面使用text/x-template类型,并且指定一个id,将这个id赋给template 22 Vue.component('my-component', { 23 template: '#my-component' 24 }) 25 var app = new Vue({ 26 el:'#app' 27 28 }); 29 30 </script> 31 </body> 32 </html>