@[toc]
3.8模板
当模板的 html 结构比较复杂时,直接在 template 属性中定义就不现实了,效率也会很低,此时我们可以使用模板,<font color='red'>定义模板的四种形式:</font>
问题:</font>什么叫在使用字符串模板、x-template模板和.Vue组件时,不需要is进行转义?
<font color='red'>答案:不需要转义如图1,需要转义如图2(详情请看知识点导航3.4.4)
<script type="text/x-template" id="template5">
<table>
<my-component1></my-component1>
</table>
</script>
Vue.component('my-component2',{
template:'#template2'
});
<center>图1</center>
<table>
<tr is="my-component3">
</table>
<template id="template3">
<ol>
<li>a</li>
<li>b</li>
</ol>
</template>
Vue.component('my-component3',{
template:'#template3'
});
<center>图2</center>
3.8.1直接字符串
var temp = '<h4>直接字符串</h4>';
Vue.component('my-component1',{
template:temp
});
3.8.2 x-template模板
<!-- 使用x-template -->
<script type="text/x-template" id="template2">
<ul>
<li>01</li>
<li>02</li>
</ul>
</script>
Vue.component('my-component2',{
template:'#template2'
});
3.8.3 template标签
<!-- 使用template标签 -->
<template id="template3">
<ol>
<li>a</li>
<li>b</li>
</ol>
</template>
Vue.component('my-component3',{
template:'#template3'
});
3.8.4 省略is
<!-- 使用x-template -->
<script type="text/x-template" id="template5">
<table>
<my-component1></my-component1>
</table>
</script>
Vue.component('my-component6',{
template:'#template5'
});
正常<font color='red'>\<table>\<ol>\<ul>\<select></font>等都不能直接使用自定义组件标签,除非指定is属性,而在4种实现模板方式中除了<font color='red'>\<template></font>模板,其他3种如字符串模板和x-template模板和.vue组件时中可以直接嵌套自定义组件标签,不用is指定。
本人其他相关文章链接
1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)
9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)
13.vue2知识点:组件的props属性、非props属性、props属性校验
16.vue2知识点:动态组件
17.vue2知识点:混入
19.vue2知识点:全局事件总线(GlobalEventBus)
23.vue2知识点:路由
25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)
26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习:待办事项Todo-list案例练习
28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。