집 > 기사 > 웹 프론트엔드 > vuejs에 내장된 구성 요소는 무엇입니까?

vuejs에 내장된 구성 요소는 무엇입니까?

青灯夜游원래의: 2021-09-06 15:59:122280검색

vuejs에 내장된 구성 요소에는 "3590f327f1477736a41a12daa2ccc57a", "7c9485ff8c3cba5ae9343ed63c2dc3f7", "53c3519816dfe5c8106eba8fd653535a", "5ec1177670da6796261e1c7eb9ec71f9", "< ;슬롯 />", "".

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9.6 버전, DELL G3 컴퓨터.

vue 내장 구성 요소

내장 구성 요소는 등록 없이 템플릿에서 직접 사용할 수 있습니다.

7c9485ff8c3cba5ae9343ed63c2dc3f7, 300ff3b250bc578ac201dd5fb34a0004, 5c8969d1376a171e8b0ec4a1c01f185d 및 6c123bcf29012c05eda065ba23259dcb 구성요소는 모두 트리 쉐이크와 함께 패키징될 수 있습니다. 따라서 사용될 때만 소개됩니다. 직접 액세스해야 하는 경우 명시적으로 가져올 수도 있습니다.

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

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

3f29937d4ced0eda173ecfb4386e9662 및 58cb293b8600657fad49ec2c8d37b472은 템플릿 구문의 구성요소 스타일 속성입니다. 실제 구성 요소가 아니므로 위 구성 요소처럼 가져올 수 없습니다.

다음은 vuejs에 내장된 구성 요소에 대해 간략하게 소개합니다.

코드 예제

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

7c9485ff8c3cba5ae9343ed63c2dc3f7

7c9485ff8c3cba5ae9343ed63c2dc3f7 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스는 삭제되는 대신 캐시됩니다. 300ff3b250bc578ac201dd5fb34a0004과 마찬가지로 7c9485ff8c3cba5ae9343ed63c2dc3f7는 추상 구성 요소입니다. DOM 요소 자체를 렌더링하지도 않고 상위 구성 요소 체인에도 나타나지도 않습니다. 이 구성 요소의 속성에는 포함, 제외 및 최대가 포함됩니다. 처음 두 개는 일치하는 구성 요소를 캐시하거나 캐시하지 않는 표현식입니다. Max는 캐시할 수 있는 최대 구성 요소 수를 나타냅니다.

일치는 먼저 컴포넌트 자체의 이름 옵션을 확인하고, 이름 옵션을 사용할 수 없는 경우 로컬 등록 이름(상위 컴포넌트의 컴포넌트 옵션 키 값)과 일치합니다. 익명 구성 요소는 일치할 수 없습니다.

이 구성 요소는 일반적으로 v-show, v-if, v-else-if, v-else, is 및 조건이 포함된 기타 구성 요소와 함께 사용됩니다. 코드 예제

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

24732368ac3ddb65074b3178d921169e

래핑된 요소의 전환 효과를 추가하면 300ff3b250bc578ac201dd5fb34a0004 요소가 단일 요소/구성 요소의 전환 효과 역할을 합니다. 300ff3b250bc578ac201dd5fb34a0004은 추가 DOM 요소를 렌더링하지 않고 감지된 구성 요소 계층 구조에 나타나지 않고 래핑된 콘텐츠에만 전환 효과를 적용합니다. 일반적으로 v-show v-if is 등과 결합하여 사용됩니다.

CSS 전환 및 js 전환이 있습니다.

공통 속성: name: 문자열, CSS 전환 클래스 이름을 자동으로 생성하는 데 사용됩니다. CSS 전환 클래스. 기본값은 true입니다. false로 설정하면 등록된 JavaScript 후크가 구성 요소 이벤트를 통해서만 트리거됩니다 Enter-class, Leave-class 및 일반적으로 타사 애니메이션 라이브러리와 함께 사용되는 기타 속성을 통해 클래스 이름을 사용자 정의할 수도 있습니다.

CSS 전환

CSS 전환의 클래스 이름은 전환 속성의 name 속성 값을 가지며(v로 기록되며, name 속성 값이 없는 경우 기본값은 v-), 이는 다음 조합으로 구성됩니다.

v-enter: 정의 항목 전환의 시작 상태입니다. 요소가 삽입되기 전에 적용되며 요소가 삽입된 후 다음 프레임에서 제거됩니다.

v-enter-active: 항목 전환이 적용될 때의 상태를 정의합니다. 전환 전체에 적용되고 요소가 삽입되기 전에 적용되며 전환/애니메이션이 완료된 후에 제거됩니다. 이 클래스는 전환 입력을 위한 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다.

v-enter-to: 버전 2.1.8 이상에서는 항목 전환의 최종 상태를 정의합니다. 요소가 삽입된 후(동시에 v-enter가 제거됨) 다음 프레임에 적용되며 전환/애니메이션이 완료된 후 제거됩니다.
v-leave: 휴가 전환의 시작 상태를 정의합니다. 이탈 전환이 트리거되면 즉시 적용되며 다음 프레임에서 제거됩니다.
v-leave-active: 나가기 전환이 적용될 때의 상태를 정의합니다. 종료 전환 전체에 적용되고, 종료 전환이 트리거될 때 즉시 적용되며, 전환/애니메이션이 완료된 후 제거됩니다. 이 클래스는 출구 전환에 대한 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다.
1. v-leave-to: 버전 2.1.8 이상 휴가 전환의 최종 상태를 정의합니다. 이탈 전환이 트리거된 후(동시에 v-leave가 삭제됨) 다음 프레임에 적용되며 전환/애니메이션이 완료된 후 제거됩니다.
4. 코드 예
5. ```
<template>
  <div class="hello">
      
      <div id="example-1">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
      </div>
        
      <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>


<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 元素 (即播放的视频) 都将保持其状态。
  
  相关推荐：《vue.js教程》

위 내용은 vuejs에 내장된 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：vuejs의 지시문과 구성 요소의 차이점은 무엇입니까다음 기사：vuejs의 지시문과 구성 요소의 차이점은 무엇입니까