vue2知识点:组件模板定义

简介: vue2知识点:组件模板定义

image.png

@[toc]

3.8模板

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

问题:什么叫在使用字符串模板、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'
});

正常\

\

  1. \
目录
相关文章
|
5月前
|
缓存 JavaScript
vue2知识点:组件is属性
vue2知识点:组件is属性
44 3
|
5月前
|
缓存 JavaScript
vue2知识点:动态组件
vue2知识点:动态组件
53 1
|
8月前
|
JavaScript 前端开发 API
|
10月前
|
JavaScript API
vue 模板引用
vue 模板引用
|
10月前
|
JavaScript 前端开发
详解Vue——定义组件的方式
详解Vue——定义组件的方式
60 0
|
JSON JavaScript 数据格式
vue的模板语法(下篇)
vue的模板语法(下篇)
|
前端开发
前端学习笔记202304学习笔记第十五天-vue3.0-创建全局自定义指令
前端学习笔记202304学习笔记第十五天-vue3.0-创建全局自定义指令
76 0
|
缓存 JavaScript 前端开发
学习Vue3 第四章(模板语法 & vue指令)
在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
85 0
|
移动开发 JavaScript
Vue组件基础知识点(下)
Vue组件基础知识点
190 0
Vue组件基础知识点(下)
|
JavaScript 前端开发
Vue组件基础知识点(上)
Vue组件基础知识点
157 0
Vue组件基础知识点(上)