Les composants intégrés dans vuejs incluent : "
", " ", " ", " ", "< ;emplacement />", " ".
L'environnement d'exploitation de ce tutoriel : système windows7, version vue2.9.6, ordinateur DELL G3.
Les composants intégrés peuvent être utilisés directement dans les modèles sans inscription. Les composants
// Vue 的 CDN 构建版本
const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue// Vue 的 ESM 构建版本
import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'Ce qui suit vous donnera une brève introduction aux composants intégrés dans vuejs.
<template>
<div class="hello">
<!-- 构建动态组件 -->
<div :is="currentComp"></div>
<!-- 按钮点击切换组件 -->
<button v-on:click="changeComponent">改变组件</button>
</div>
</template>
<script>
//两个自定义的组件
import login from '../components/login.vue'
import index from '../components/index.vue'
export default {
name: 'BuildInComponent',
components:{
index,
login
},
// 默认显示index组件
data(){
return {
currentComp:index
}
},
methods:{
changeComponent(){
if(this.currentComp == login){
this.currentComp = index
}else {
this.currentComp = login
}
}
}
}
</script>
Les attributs de ce composant incluent inclure, exclure et max. Les deux premiers sont des chaînes ou cette expression Mettre en cache/ne pas mettre en cache les composants correspondants Max représente le nombre maximum de composants pouvant être mis en cache. La correspondance vérifie d'abord la propre option de nom du composant, et si l'option de nom n'est pas disponible, correspond à son nom d'enregistrement local (la valeur clé de l'option de composants du composant parent). Les composants anonymes ne peuvent pas être mis en correspondance. Ce composant est généralement utilisé en conjonction avec v-show, v-if, v-else-if, v-else, is et d'autres composants qui contiennent des conditions
Exemples de code
<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: 'BuildInComponent',
data(){
return {
condition:parseInt(Math.random()*3)
}
},
}
</script>Ajoutez l'effet de transition de l'élément enveloppé, et l'élément
Habituellement utilisé en combinaison avec v-show v-if is, etc. ; Il existe une transition css et une transition js Attributs communs : nom : chaîne, utilisé pour générer automatiquement les noms de classe de transition CSS ; Classe de transition CSS. La valeur par défaut est vrai. S'il est défini sur false, le hook JavaScript enregistré ne sera déclenché que via les événements du composant
Vous pouvez également personnaliser le nom de la classe via enter-class, exit-class et d'autres attributs, qui sont généralement utilisés en combinaison avec des bibliothèques d'animation tierces ;transition css
Le nom de classe de la transition css a la valeur d'attribut de nom de l'attribut de transition (enregistrée comme v, s'il n'y a pas de valeur d'attribut de nom, la valeur par défaut est v-), qui est composée des combinaisons suivantes :v-enter-to : la version 2.1.8 et supérieure définit l'état final de la transition d'entrée. Prend effet à l'image suivante après l'insertion de l'élément (en même temps que v-enter est supprimé) et est supprimé une fois la transition/animation terminée.
v-enter : Entrée de définition L'état de départ de la transition. Il prend effet avant l'insertion de l'élément et est supprimé à l'image suivante après l'insertion de l'élément.
v-enter-active : Définissez l'état dans lequel la transition d'entrée prend effet. S'applique tout au long de la transition, prend effet avant l'insertion de l'élément et est supprimé une fois la transition/animation terminée. Cette classe peut être utilisée pour définir des temps de processus, des retards et des fonctions de courbe pour la saisie des transitions.
v-leave-to : Version 2.1.8 et supérieure Définit l'état final de la transition de congé. Prend effet à l'image suivante après le déclenchement de la transition de sortie (en même temps que le v-leave est supprimé) et est supprimé une fois la transition/animation terminée.v-leave-active : définit l'état dans lequel la transition de congé prend effet. S'applique tout au long de la transition de sortie, prend effet immédiatement lorsque la transition de sortie est déclenchée et est supprimé une fois la transition/animation terminée. Cette classe peut être utilisée pour définir des temps de processus, des retards et des fonctions de courbe pour les transitions de sortie.
<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: 'BuildInComponent',
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>也可以在属性中声明 JavaScript 钩子函数，在钩子函数中，使用js进行动画的操作；
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成
对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
// 使用js过渡，通常在组件中监听事件，并写好监听到的回调函数即可<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"> <!-- ... --></transition>
Props：
tag - string - 如果未定义，则不渲染动画元素。
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode - 其他 attribute 和
事件：
事件和
用法：
注意，每个
<transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件
Props：
name - string，用于具名插槽
用法：
Props：
to - string。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动
<!-- 正确 --> <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> <!-- 错误 --> <teleport to="h1" /> <teleport to="some-string" />
disabled - boolean。此可选属性可用于禁用
<teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </teleport>
请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。
相关推荐：《vue.js教程》
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
