vue - 制作模板
1. 选项模板
2. template模板
3. script标签模板
1 <!-- 选项模板 -->
2 <!DOCTYPE html>
3 <html lang="en">
4
5 <head>
6 <meta charset="UTF-8">
7 <title>Vue入门之组件</title>
8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9 </head>
10
11 <body>
12
13 <div id="app">
14 </div>
15
16 <script type="text/javascript">
17 // 实例化
18 new Vue({
19 el: '#app',
20 data: {
21 message: 'hello'
22 },
23 template: `<h1 style="color:red">我是选项模板</h1>`
24 });
25 </script>
26 </body>
27
28 </html>
1 <!-- template模板 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Document</title> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 <template id="demo2"> 16 <h2 style="color:red">我是template标签模板{{message}}</h2> 17 </template> 18 </div> 19 20 <script type="text/javascript"> 21 // 实例化 22 new Vue({ 23 el: '#app', 24 data: { 25 message: 'hello' 26 }, 27 template: '#demo2' 28 }); 29 </script> 30 </body> 31 32 </html>
1 <!-- script标签模板 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Document</title> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 </div> 16 17 <script type="x-template" id="demo3"> 18 <h2 style="color:red">我是script标签模板</h2> 19 </script> 20 21 <script type="text/javascript"> 22 // 实例化 23 new Vue({ 24 el: '#app', 25 data: { 26 message: 'hello' 27 }, 28 template: '#demo3' 29 }); 30 </script> 31 </body> 32 33 </html>
