Vue2 模板template的四种写法

https://blog.csdn.net/xuanwuziyou/article/details/77930803

阅读数：3106

[html]  view plain  copy

1. <div id="app">  
2.     <h1>我是直接写在构造器里的模板1</h1>  
3. </div>  
4.   
5. <template id="demo3">  
6.     <h1 style="color:red">我是选项模板3</h1>  
7. </template>  
8.   
9. <script type="x-template" id="demo4">  
10.     <h1 style="color:red">我是script标签模板4</h1>  
11. </script>  
12.   
13. <script>  
14.     var vm=new Vue({  
15.         el:"#app",  
16.         data:{  
17.             message:1  
18.         },  
19.   
20.         //第2种模板 写在构造器里  
21.         //template:`<h1 style="color:red">我是选项模板2</h1>`  
22.   
23.         //第3种模板 写在<template>标签里  
24.         //template:'#demo3'  
25.   
26.         //第4种模板 写在<script type="x-template">标签里  
27.         template:'#demo4'  
28.     })  
29. </script>  

推荐第4种。