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>