1、模板语法
Vue 框架使用了一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
因此,vue给我们提供模板语法书写html,模板编译后形成高度优化的javascript代码,将其转换为VNode对象(虚拟节点对象)并缓存下来,生成虚拟DOM,并结合响应式的数据和状态,以最优化最少的次数操作、更新真实DOM。
2、template标签
注意⚠️
在vue2中template只允许包含一个子元素,不允许包含多个标签元素;而vue3中允许
template标签用于局部执行模板语法,实现一些代码片段。当没有搭配v-if系列、v-for、v-slot使用的时候,则不会被触发。
它属于占位符,其本身不作为节点挂入DOM树,但是可以将包裹着的子元素展示,形成一虚拟DOM。利用这一特点,我们平常写vue3的时候可以用它来作为父元素,从而提升渲染性能,比如在写v-for、v-if的时候。
🌟以v-for为例子:
如果用普通的div元素作为父元素包裹来渲染列表,父元素也被多次渲染,会出现如下结果:
<div class="parent" v-for="(item,index) in childList"><div class="child" key="index">{{item}}</div>
</div>---实际生成的DOM节点---<div class="parent"><div class="child" key="1">...</div>
</div>
<div class="parent"><div class="child" key="2">...</div>
</div>
<div class="parent"><div class="child" key="3">...</div>
</div>....此处省略
这时候,使用template包裹,就可以实现只重复渲染子元素。
<template v-for="(item,index) in childList"><div class="child" key="index">{{item}}</div>
</template>---实际生成的DOM节点---<div class="child" key="1">...</div><div class="child" key="2">...</div><div class="child" key="3">...</div>....此处省略
🌟搭配v-slot插槽使用
简而言之就是在被引用的组件里面设计<slot>插槽,留一个内容空位;在引用组件的时候,在该组件的子元素里面定制template内容,导入到指定slot插槽内。
举个例子🌰
这里用name属性给slot插槽加了名字,这样外面template可以用v-slot: [slot_name]指定要导入模板内容的对应插槽。(v-slot可以简写为#)
<!--Baselayout.vue--><div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div><!--outer.vue--><BaseLayout><template v-slot:header><!-- header 插槽的内容放这里 --></template>
</BaseLayout>
🌟提一嘴component标签
<component/>标签可以理解为:用于动态切换渲染组件的“元组件”
举个🌰
导入两个子组件,根据响应数据选择需要切换哪个子组件
注意⚠️
子组件不要忘记在components里面注册哦~~~
<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'export default {components: { Foo, Bar },data() {return {view: 'Foo'}}
}
</script><template><component :is="view" />
</template>