前端学习-Vue内置组件

var ComC = {

template: <p>这是组件C的内容：<input type="text"></p>

};

new Vue({

el: ‘#app’,

data: {

// 所有组件名称

titles: [‘ComA’, ‘ComB’, ‘ComC’],

// 当前组件名称

currentCom: ‘ComA’

},

components: {

ComA, ComB, ComC

}

});

keep-alive 组件

---

• 主要用于保留组件状态或避免组件重新渲染。

• include 属性用于指定哪些组件会被缓存，具有多种设置方式。

• exclude 属性用于指定哪些组件不会被缓存。

• max 属性用于设置最大缓存个数。

<button

v-for=“title in titles”

:key=“title”

@click=“currentCom = title”

{{title}}

过渡组件

---

用于在 Vue 插入、更新或者移除 DOM 时， 提供多种不同方式的应用过渡、动画效果。

transition 组件

• 用于给元素和组件添加进入/离开过渡:

条件渲染 (使用 v-if )

条件展示 (使用 v-show )

动态组件

组件根节点

• 组件提供了 6个 class，用于设置过渡的具体效果。

v-enter

v-enter-to

v-enter-active

v-leave

v-leave-to

v-leave-active

<button @click=“show = !show”>切换

hello world

相关属性

• 给组件设置 name 属性，可用于给多个元素、组件设置不同的过渡效果，这时需要将 v- 更改为对应 name- 的形式。

• 通过 appear 属性，可以让组件在初始渲染时实现过渡。

<button @click=“show = !show”>切换1

这是要切换的元素1

<button @click=“showDemo = !showDemo”>切换2

<transition

name=“demo”

appear

这是要切换的元素2

自定义过渡类名

• 自定义类名比普通类名优先级更高，在使用第三方 CSS 动画库时非常有用。

• 用于设置自定义过渡类名的属性如下:

enter-class

enter-active-class

enter-to-class

leave-class

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。