vuejs中内置组件有:“component/”、“keep-alive”、“transition/”、“transition-group/”、“slot/”、“teleport/”。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。 vue 内置组件内置组件可以直接在模板中使用,而不需注册。 <keep-alive>、<transition>、<transition-group> 和 <teleport> 组件都可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。如果你需要直接访问它们,也可以将它们显性导入。 // Vue 的 CDN 构建版本 const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue // Vue 的 ESM 构建版本 import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue' <component> 和 <slot> 是模板语法中组件形式的特性。它们不是真正的组件且无法像上述组件那样被导入。 下面给大家简单介绍一下vuejs中的内置组件。 <component/>
代码示例 <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> <keep-alive>
代码示例 <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> <transition/>
代码示例 <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>
// 使用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> <transition-group/> Props:
事件:
用法: <transition-group> 提供了多个元素/组件的过渡效果。默认情况下,它不会渲染一个 DOM 元素包裹器,但是可以通过 tag attribute 来定义。 注意,每个 <transition-group> 的子节点必须有独立的 key,动画才能正常工作。 <transition-group> 支持通过 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> <slot/>
Props:
用法:
<teleport/> Props:
<!-- 正确 --> <teleport to="#some-id" /> <teleport to=".some-class" /> <teleport to="[data-teleport]" /> <!-- 错误 --> <teleport to="h1" /> <teleport to="some-string" /> disabled - boolean。此可选属性可用于禁用 <teleport> 的功能,这意味着其插槽内容将不会移动到任何位置,而是在你在周围父组件中指定了 <teleport> 的位置渲染。 <teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </teleport> 请注意,这将移动实际的 DOM 节点,而不是被销毁和重新创建,并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。 相关推荐:《vue.js教程》 以上就是vuejs中内置组件有哪些的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |