前端学习-Vue内置组件

素颜马尾好姑娘i 2023-01-18 04:18 101阅读 0赞

## 动态组件 ##

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

<div id="app">
        
        <button
          v-for="title in titles"
          :key="title"
          @click="currentCom = title"
        >
          {
       { title }}
        </button>
    
        
        <component :is="currentCom"></component>
    </div>
    
    <script>
        // 设置要切换的子组件选项对象
        var ComA = {
          template: `<p>这是组件A的内容：<input type="text"></p>`
        };  
        var ComB = {
          template: `<p>这是组件B的内容：<input type="text"></p>`
        };
        var ComC = {
          template: `<p>这是组件C的内容：<input type="text"></p>`
        };
    
        new Vue({
          el: '#app',
          data: {
            // 所有组件名称
            titles: ['ComA', 'ComB', 'ComC'],
            // 当前组件名称
            currentCom: 'ComA'
          },
          components: {
            ComA, ComB, ComC
          }
        });
    </script>

## keep-alive 组件 ##

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

<div id="app">
        <button 
          v-for="title in titles"
          :key="title"
          @click="currentCom = title"
        >
          {
       {title}}
        </button>
    
        
        
        
        
    
        
        
        
        
    
        <keep-alive max="2">
          
          <component :is="currentCom"></component>
        </keep-alive>
    </div>
    
    <script>
        var ComA = {
          template: `
            <div>
              请选择主食：
              <br>
              <label for="mantou">馒头：</label>
              <input id="mantou" type="radio" name="zhushi" value="mantou">
              <br>
              <label for="mifan">米饭：</label>
              <input id="mifan" type="radio" name="zhushi" value="mifan">
            </div>
          `
        };
        var ComB = {
          template: `
            <div>
              请选择菜品：
              <br>
              <label for="luobo">炒萝卜：</label>
              <input id="luobo" type="checkbox" name="cai" value="luobo">
              <br>
              <label for="niurou">炒牛肉：</label>
              <input id="niurou" type="checkbox" name="cai" value="niurou">
              <br>
              <label for="pingguo">炒苹果：</label>
              <input id="pingguo" type="checkbox" name="cai" value="pingguo">
            </div>
          `
        };
        var ComC = {
          template: `
            <div>
              请选择汤：
              <br>
              <label for="tang1"">西红柿鸡蛋汤：</label>
              <input id="tang1"" type="radio" name="tang" value="tang1"">
              <br>
              <label for="tang2">紫菜蛋花汤：</label>
              <input id="tang2" type="radio" name="tang" value="tang2">
              <br>
              <label for="tang3">清汤</label>
              <input id="tang3" type="radio" name="tang" value="tang3">
            </div>
          `
        };
    
        var ComD = {
          template: `
            <div>
              请输入支付信息：
              <br>
              <label for="account"">请输入账号：</label>
              <input id="account"" type="text" name="account">
              <br>
              <label for="password">请输入密码：</label>
              <input id="password" type="password" name="password">
              <br>
            </div>
    
          `
        };
    
        new Vue({
          el: '#app',
          data: {
            titles: ['ComA', 'ComB', 'ComC', 'ComD'],
            currentCom: 'ComA'
          },
          components: {
            ComA, ComB, ComC, ComD
          }
        });
      </script>

## 过渡组件 ##

用于在 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

#### 相关属性 ####

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

### 自定义过渡类名 ###

*  自定义类名比普通类名优先级更高，在使用第三方 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

### transition-group 组件 ###

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

## 总结 ##

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

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

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

想学习前端web和需要PDF文档的朋友都可以加入这边的企鹅裙，前面：938，，中间：051，，最后：673
    
    裙里从学生到大佬都有，还有资源免费分享，不见不散哦！

![54a6b04f29167333b139d2753f60db9f.png][]

[54a6b04f29167333b139d2753f60db9f.png]: /images/20221021/a2890cc400ed4902bc9cb7b0336f75c3.png