Vuejs学习笔记(二)-4.组件内部的template分离，

template中写html标签非常麻烦，如果标签复杂就更难于维护。因此需要将template内的标签抽离出来。

方式一：抽离到script中

1.全局组件的template抽离，将template的html标签模板写到script中，script的type属性为"text/x-template"，id属性为模板名称，并在组件注册方法内template对应的名称为 #模板id

，1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-组件中template的抽离.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/3 16:00
 8 @version: html5
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 <head>
13   <meta charset="UTF-8">
14   <title>03-组件中template的抽离</title>
15 </head>
16 <body>
17 <div id="app">
18   <h2>{{message}}</h2>
19   <cpn></cpn>
20 </div>
21 <script id="cpn1" type="text/x-template">
22   <div>
23     <h2>组件标题</h2>
24     <p>组件内容</p>
25   </div>
26 </script>
27 <script src="../js/vue.js"></script>
28 <script>
29   Vue.component('cpn',{
30     template:'#cpn1'
31   })
32 
33   const app = new Vue({
34     el:'#app',
35     data:{
36       message:'hell 组件template的抽离'
37     }
38   })
39 </script>
40 </body>
41 </html>

2.局部变量的抽离相似

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 04-局部组件中的template抽离.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/3 16:10
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>04-局部组件中的template抽离</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{message}}</h2>
20   <cpn></cpn>
21 </div>
22 <script id="cpn1" type="text/x-template">
23   <div>
24     <h2>我是组件标题</h2>
25     <p>我是组件内容</p>
26   </div>
27 </script>
28 <script src="../js/vue.js"></script>
29 <script>
30 
31 
32   const app = new Vue({
33     el:'#app',
34     data:{
35       message:'局部组件中的template抽离'
36     },
37     components:{
38       cpn:{
39         template:'#cpn1'
40       }
41     }
42   })
43 </script>
44 </body>
45 </html>

方式二：抽离模板到<template>模板标签内，即放在html中;这个是之前抽离到<script>的优化

1.全局组件的抽离

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 05-全局组件template抽离.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/3 16:26
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>05-全局组件template抽离</title>
16 </head>
17 <body>
18 <div id="app">
19   <cpn></cpn>
20 </div>
21 <template id="cpn1">
22   <div>
23     <h2>组件标题</h2>
24     <p>组件内容</p>
25   </div>
26 </template>
27 <script src="../js/vue.js"></script>
28 <script>
29   Vue.component('cpn',{
30     template:'#cpn1'
31   })
32 
33   const app = new Vue({
34     el:'#app',
35     data:{
36       message:'组件template抽离2'
37     }
38   })
39 </script>
40 </body>
41 </html>

 

2.局部组件中template的抽离

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 06-局部组件template的抽离.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/3 16:32
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>06-局部组件template的抽离</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{message}}</h2>
20   <cpn></cpn>
21 </div>
22 <template id="cpn1">
23   <div>
24     <h2>我是组件的标题</h2>
25     <p>我是组件的内容</p>
26   </div>
27 </template>
28 <script src="../js/vue.js"></script>
29 <script>
30   const app = new Vue({
31     el:'#app',
32     data:{
33       message:'06-局部组件template的抽离'
34     },
35     components:{
36       'cpn':{
37         template:'#cpn1'
38       }
39     }
40   })
41 </script>
42 </body>
43 </html>

 

posted @ 2021-07-03 16:36  kaer_invoker  阅读(486)  评论(0)    收藏  举报