vue2知识点:组件模板定义

原创
昨天 12:01
阅读数 34

@[toc]

3.8模板

当模板的 html 结构比较复杂时,直接在 template 属性中定义就不现实了,效率也会很低,此时我们可以使用模板,定义模板的四种形式:

问题:什么叫在使用字符串模板、x-template模板和.Vue组件时,不需要is进行转义?

答案:不需要转义如图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'
});

图1

<table>
       <tr is="my-component3">      
 </table>
<template id="template3">
    <ol>
        <li>a</li>
        <li>b</li>
    </ol>
</template>
Vue.component('my-component3',{
    template:'#template3'
});

图2

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'
});

正常<table><ol><ul><select>等都不能直接使用自定义组件标签,除非指定is属性,而在4种实现模板方式中除了<template>模板,其他3种如字符串模板和x-template模板和.vue组件时中可以直接嵌套自定义组件标签,不用is指定。

本人其他相关文章链接

1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》:使用vue脚手架创建项目

5.vue2知识点:数据代理

6.vue2知识点:事件处理

7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)

8.vue2知识点:计算属性与监听属性

9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)

10.vue2知识点:非单文件组件和单文件组件

11.vue2知识点:组件is属性

12.vue2知识点:组件模板定义

13.vue2知识点:组件的props属性、非props属性、props属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

19.vue2知识点:全局事件总线(GlobalEventBus)

20.vue2知识点:消息订阅与发布

21.vue2知识点:nextTick语法

22.vue2知识点:Vue封装的过度与动画

23.vue2知识点:路由

24.vue2知识点:vm调用待$命令介绍

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新增编辑按钮

33.vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部