Vue学习—Vue模板的写法

1. 选项模板：不需要外部构造器，直接渲染到作用域视图中，使用与比较少的内容量可以使用它，可以利用ES6模板字符串``的方式来实现，也可以直接用字符串即"<h1 style="color:red">我是选项模板</h1>"，这时template和data、el一样都是Vue实例的一个选项，所以叫做选项模板。
   < body>

   < h1>模板的写法—01</ h1>

   < div id= "app">

   
   

   </ div>

   < script>

   var app = new Vue({

   el: "#app",

   data: {

   
   

   },

   template: `

   <h1 style="color:red">我是选项模板</h1>

   `

   });

   </ script>

   </ body>
2. 使用模板标签<template></template>来实现内容的填充,最终通过id或者其他的选择器挂载到template上面
   < body>

   < h1>模板的写法—02</ h1>

   < div id= "app">

   
   

   </ div>

   < template id= "demoTpl">

   < h1 style= "color:green;">我是template模板标签</ h1>

   </ template>

   < script>

   var app = new Vue({

   el: "#app",

   data: {

   
   

   },

   template: "#demoTpl"

   });

   </ script>

   </ body>
3. 使用x-template，script标签需要添加text/x-template类型作为标记，并且在在Vue实例中通过id来引用。
   < body>

   < h1>模板的写法—03</ h1>

   < div id= "app"> </ div>

   < script type= "text/x-template" id= "demoXtpl">

   < h1 style= "color:yellow;">我是script标签模板</ h1>

   </ script>

   < script>

   var app = new Vue({

   el: "#app",

   data: {

   
   

   },

   template: "#demoXtpl"

   });

   </ script>

   </ body>