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>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14966702.html