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>

 

posted @ 2018-06-28 10:23  铜镜123  阅读(167)  评论(0)    收藏  举报