Home >Web Front-end >Front-end Q&A >What are the built-in components in vuejs

What are the built-in components in vuejs

青灯夜游Original: 2021-09-06 15:59:122450browse

Built-in components in vuejs include: "375ea667c977e110dee2ba443b60f607", "7c9485ff8c3cba5ae9343ed63c2dc3f7", "53c3519816dfe5c8106eba8fd653535a", "5ec1177670da6796261e1c7eb9ec71f9", "38b537b6886351ac721d89624ba185ca", "06a28d54253aaa2db3f2462ee4bf87b9".

#The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

vue built-in components

Built-in components can be used directly in templates without registration.

7c9485ff8c3cba5ae9343ed63c2dc3f7, 300ff3b250bc578ac201dd5fb34a0004, 5c8969d1376a171e8b0ec4a1c01f185d and 6c123bcf29012c05eda065ba23259dcb components can all be tree-shaked by the packaging tool. So they are only introduced when used. You can also import them explicitly if you need to access them directly.

// Vue 的 CDN 构建版本
const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue

// Vue 的 ESM 构建版本
import { KeepAlive, Teleport, Transition, TransitionGroup } from &#39;vue&#39;

8c05085041e56efcb85463966dd1cb7e and 58cb293b8600657fad49ec2c8d37b472 are component-style attributes in template syntax. They are not real components and cannot be imported like the above components.

Let me give you a brief introduction to the built-in components in vuejs.

375ea667c977e110dee2ba443b60f607

##Multiple applications and creating dynamic components

The parameters include is and inline-template, The former are mostly strings or custom components, while the latter are Boolean types,

Code examples

<template>
  <div class="hello">
      <!-- 构建动态组件 -->
      <div :is="currentComp"></div>
      <!-- 按钮点击切换组件 -->
      <button v-on:click="changeComponent">改变组件</button>
  </div>
</template>

<script>
//两个自定义的组件
import login from &#39;../components/login.vue&#39;
import index from &#39;../components/index.vue&#39;
export default {
  name: &#39;BuildInComponent&#39;,
  components:{
      index,
      login
  },
  // 默认显示index组件
  data(){
      return {
          currentComp:index
      }
  },
  methods:{
      changeComponent(){
          if(this.currentComp == login){
              this.currentComp = index
          }else {
              this.currentComp = login
          }

      }
  }
}
</script>

2470f9fb210973d32b152782e53a69d2

7c9485ff8c3cba5ae9343ed63c2dc3f7 When wrapping dynamic components, inactive component instances are cached instead of destroying them. Like 300ff3b250bc578ac201dd5fb34a0004, 7c9485ff8c3cba5ae9343ed63c2dc3f7 is an abstract component: it does not render a DOM element by itself, nor does it appear in the parent component chain.

The attributes on this component include include, exclude, and max. The first two are strings or this expression. Cache/not cache the matched components. Max represents the maximum number of components that can be cached.
Matching first checks the component's own name option, and if the name option is not available, matches its local registration name (the key value of the parent component's components option). Anonymous components cannot be matched.
This component is usually used in conjunction with v-show, v-if, v-else-if, v-else, is and other components containing conditions

Code examples

<template>
  <div class="hello">
      <!-- 使用keep-alive组件包裹其它条件渲染组件，不符合条件的则会被缓存，等下次条件成立时，则会立即渲染，提高渲染效率 -->
      <keep-alive>
          <div v-if="condition == 1">
              <span>我是111111111111</span>
          </div>
          <div v-else-if="condition == 2">
              <span>我是222222222222222</span>
          </div>
          <div v-else>
              <span>我是333333333333</span>
          </div>
      </keep-alive>

  </div>
</template>

<script>
export default {
  name: &#39;BuildInComponent&#39;,
  data(){
      return {
          condition:parseInt(Math.random()*3)
      }
  },


  
 
}
</script>

53c3519816dfe5c8106eba8fd653535a##Add the transition effect of the wrapped element, 300ff3b250bc578ac201dd5fb34a0004 element as a single element /Component's transition effect. 300ff3b250bc578ac201dd5fb34a0004 will only apply the transition effect to its wrapped content, without rendering additional DOM elements and not appearing in the detected component hierarchy.

Usually used in combination with v-show v-if is, etc.;

There are css transition and js transition
Common attributes: name: string, used to automatically generate CSS transition class name; css: Boolean type, Whether to use CSS transition classes. Defaults to true. If set to false, the registered JavaScript hook will only be triggered through component events
You can also customize the class name through enter-class, leave-class and other attributes, which is usually used in conjunction with a third-party animation library;

css transition

v-enter: Defines the starting state of entering the transition. It takes effect before the element is inserted and is removed on the next frame after the element is inserted.
1. v-enter-to: Version 2.1.8 and above Defines the end state of the entry transition. Takes effect the next frame after the element is inserted (at the same time v-enter is removed), and is removed after the transition/animation is complete.
2. v-leave: Defines the starting state of the leave transition. It takes effect immediately when the leaving transition is triggered and is removed the next frame.
3. v-leave-active: Defines the state when the leave transition takes effect. Applies throughout the exit transition, takes effect immediately when the exit transition is triggered, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for exit transitions.
4. v-leave-to: Version 2.1.8 and above Defines the end state of the leave transition. Takes effect the next frame after the leave transition is triggered (at the same time the v-leave is deleted), and is removed after the transition/animation completes.

<template>
  <div class="hello">
      <!-- css过渡示例，transition组件 名称为slide-fade， -->
      <div id="example-1">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
      </div>
        <!-- css动画示例 -->
      <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
      </div>

  </div>
</template>

<script>
export default {
  name: &#39;BuildInComponent&#39;,
  data(){
      return {
          show: true
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

/* 也可以使用css动画 */
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

js过渡

也可以在属性中声明 JavaScript 钩子函数，在钩子函数中，使用js进行动画的操作；
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成
对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

// 使用js过渡，通常在组件中监听事件，并写好监听到的回调函数即可32657de9fd21cd394d549a8d633274be
  48ddde17d8162b985aa83e091065e6846087faffb1c3f26530d25a6b190c2f81

5ec1177670da6796261e1c7eb9ec71f9

Props：

tag - string - 如果未定义，则不渲染动画元素。
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode - 其他 attribute 和 300ff3b250bc578ac201dd5fb34a0004 相同。

事件：

事件和 300ff3b250bc578ac201dd5fb34a0004 相同。

用法：

5c8969d1376a171e8b0ec4a1c01f185d 提供了多个元素/组件的过渡效果。默认情况下，它不会渲染一个 DOM 元素包裹器，但是可以通过 tag attribute 来定义。

注意，每个 5c8969d1376a171e8b0ec4a1c01f185d 的子节点必须有独立的 key，动画才能正常工作。

5c8969d1376a171e8b0ec4a1c01f185d 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。如果 CSS transform property 是“可过渡” property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

38b537b6886351ac721d89624ba185ca

vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件

Props：

name - string，用于具名插槽

用法：

58cb293b8600657fad49ec2c8d37b472 元素作为组件模板之中的内容分发插槽。58cb293b8600657fad49ec2c8d37b472 元素自身将被替换。

06a28d54253aaa2db3f2462ee4bf87b9

Props：

to - string。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 6c123bcf29012c05eda065ba23259dcb 内容的目标元素

<!-- 正确 -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- 错误 -->
<teleport to="h1" />
<teleport to="some-string" />

disabled - boolean。此可选属性可用于禁用 6c123bcf29012c05eda065ba23259dcb 的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了 6c123bcf29012c05eda065ba23259dcb 的位置渲染。

<teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</teleport>

请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。

What are the built-in components in vuejs

vue built-in components

Related articles