前端学习-Vue内置组件

动态组件

• 动态组件适用于多个组件频繁切换的处理。
• 用于将一个‘元组件’渲染为动态组件，以 is 属性值决定渲染哪个组件。
• 用于实现多个组件的快速切换，例如选项卡效果。
• is 属性会在每次切换组件时，Vue 都会创建一个新的组件实例。

    
    
      {
    { title }}
    

    
    

keep-alive 组件

• 主要用于保留组件状态或避免组件重新渲染。
• include 属性用于指定哪些组件会被缓存，具有多种设置方式。
• exclude 属性用于指定哪些组件不会被缓存。
• max 属性用于设置最大缓存个数。

    
      {
    {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

    切换

    
      
hello world
    
  

相关属性

• 给组件设置 name 属性，可用于给多个元素、组件设置不同的过渡效果，这时需要将 v- 更改为对应 name- 的形式。
• 通过 appear 属性，可以让组件在初始渲染时实现过渡。

    切换1
    
    
      
这是要切换的元素1
    

    


    切换2
    
    
      
这是要切换的元素2
    
  

自定义过渡类名

• 自定义类名比普通类名优先级更高，在使用第三方 CSS 动画库时非常有用。
• 用于设置自定义过渡类名的属性如下:
  enter-class
  enter-active-class
  enter-to-class
  leave-class
  leave-active-class
  leave-to-class
  appear-class
  appear-to-class
  appear-active-class

    切换

    
      
这是 p 标签
    
  

transition-group 组件

• 用于给列表统一设置过渡动画。
• tag 属性用于设置容器元素，默认为 。
• 过渡会应用于内部元素，而不是容器。
• 子节点必须有独立的 key，动画才能正常工作。
• 当列表元素变更导致元素位移，可以通过 .v-move 类名设置移动时的效果。

    

    
      

        {
    { item.title }}
      
    
  

总结

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你找到满意的工作。

不管你是零基础的萌新，还是想转行的小伙伴 ，只要你想了解前端，精通前端，都欢迎你们加入我们的前端自学团。

在这里，你可以找到志同道合的朋友，相互激励的学习伙伴，还能得到大神的经验分享，和加入项目实战的机会。 想加入自学团的小伙伴赶快行动起来吧 ~

想学习前端web和需要PDF文档的朋友都可以加入这边的企鹅裙，前面：938，，中间：051，，最后：673

裙里从学生到大佬都有，还有资源免费分享，不见不散哦！