网站logo下载excel做网站二维码

当前位置： 首页 > news >正文

网站logo下载,excel做网站二维码,房源开发网站,wordpress 5.1.1简体中文版插槽使用 插槽slot匿名插槽具名插槽插槽作用域简写 动态插槽transition动画组件自定义过渡class类名如何使用animate动画库组件动画生命周期appear transition- group过渡列表 插槽slot 插槽就是子组件中提供给父组件使用的一个占位符父组件可以在这个占位符智能填充任何模板代… 插槽使用 插槽slot匿名插槽具名插槽插槽作用域简写 动态插槽transition动画组件自定义过渡class类名如何使用animate动画库组件动画生命周期appear transition- group过渡列表 插槽slot 插槽就是子组件中提供给父组件使用的一个占位符父组件可以在这个占位符智能填充任何模板代码填充的内容会在替换子组件的slot标签 匿名插槽 子组件 templatediv classmainh1子组件/h1slot/slot/div /templatescript setup langts import { ref, reactive } from vue; /scriptstyle scoped/style父组件 templatediv classmain/divAslottemplate v-slotdiv匿名插槽/div/template/Aslot /templatescript setup langts import { ref, reactive } from vue; import Aslot from ./components/slot.vue; /scriptstyle scoped/style 具名插槽 子组件 父组件
插槽作用域 作用域插槽其实就是带数据的插槽即带参数的插槽简单的来说就是子组件提供给父组件的参数该参数仅限于插槽中使用父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。子组件 templatediv classmainslot/sloth1子组件/h1div v-for(item, index) in data :keyindex//父组件需要什么值就传递什么值slot :dataitem :indexindex/slot/div/div /templatescript setup langts import { ref, reactive } from vue; //定义要给父组件的内容 const data reactive([{ name: 1, age: 1 },{ name: 2, age: 2 }, ]); /scriptstyle scoped/style 父组件 templatediv classmain/divAslottemplate v-slot{ data, index }div{{ data }}–{{ index }}/div/template/Aslot /templatescript setup langts import { ref, reactive } from vue; import Aslot from ./components/slot.vue; /scriptstyle scoped/style 简写 templatediv classmain/divAslot//v-slot变成# template #centerslotdiv具名插槽/div/templatetemplate #default{ data }div{{ data.name }}–{{ data }}/div/template/Aslot /template动态插槽 transition动画组件 vue提供transition的封装组件在下列情形下可以给任何元素和组件添加进入/离开过渡条件渲染v-if)条件展示v-show)动态组件组件根节点 在进入和离开的过渡中会有6个class的切换 name提供类名
templatediv classmain!– transition动画组件 –transition nameboxdiv v-ifisblooen classbox-bg动画盒子/div/transitionbutton clickchange切换1/button/div /templatescript setup langts import { ref, reactive } from vue; let isblooen ref(true); const change () {isblooen.value !isblooen.value; }; /script //在进入和离开的过渡中会有6个class的切换 style scoped langless .box-bg {width: 200px;height: 200px;border: 1px solid #00f; } //显示之前第一个字母和上面name一致 .box-enter-from {width: 0px;height: 0px;background: #777; } //动画开始 .box-enter-active {background: #777;transition: all 10s ease; } //动画结束 .box-enter-to {width: 200px;height: 200px;background: #777; } //隐藏之前 .box-leave-from { } //隐藏中 .box-leave-active { } //隐藏后 .box-leave-to { } /style 自定义过渡class类名 templatediv classmain!– transition动画组件 –transition nameboxdiv v-ifisblooen classbox-bg动画盒子/div/transition!– 写法2 自定义过渡class类名–transitionnameboxenter-form-classe-formenter-active-classe-activeenter-to-classe-todiv v-ifisblooen classbox-bg动画盒子/div/transitionbutton clickchange切换1/button/div /templatescript setup langts import { ref, reactive } from vue; let isblooen ref(true); const change () {isblooen.value !isblooen.value; }; /scriptstyle scoped langless .box-bg {width: 200px;height: 200px;border: 1px solid #00f; } //显示之前 .box-enter-from {width: 0px;height: 0px;background: #777; } //写法2自定义类名 .e-form {width: 0px;height: 0px;background: #777; } //动画开始 .box-enter-active {background: #777;transition: all 10s ease; } .e-active {background: #755577;transition: all 10s ease; } //动画结束 .box-enter-to {width: 200px;height: 200px;background: #777; } .e-to {width: 200px;height: 200px;background: #766677; } //隐藏之前 .box-leave-from { } //隐藏中 .box-leave-active { } //隐藏后 .box-leave-to { } /style 如何使用animate动画库组件 安装 npm install animate.css官方文档地址步骤2导入动画库 步骤三使用leave-active-class是6个class的动画类名
动画生命周期 appear 通过这个属性可以设置初始节点就是页面加载完成就开始动画对应的三个状态相当于一进来动画就开始执行 templatediv classmaintransitionappearappear-classanimateanimated animatebackInLeftappear-active-classanimateanimated animatebackInRightappear-to-classanimateanimated animatebackOutUpdiv v-ifisblooen classbox-bg动画盒子/div/transitionbutton clickchange切换1/button/div /templatescript setup langts import { ref, reactive } from vue; import animate.css;let isblooen ref(true); const change () {isblooen.value !isblooen.value; }; /scriptstyle scoped langless .box-bg {width: 200px;height: 200px;border: 1px solid #00f; } //显示之前 .box-enter-from {width: 0px;height: 0px;background: #777; } .e-form {width: 0px;height: 0px;background: #777; } //动画开始 .box-enter-active {background: #777;transition: all 10s ease; } .e-active {background: #755577;transition: all 10s ease; } //动画结束 .box-enter-to {width: 200px;height: 200px;background: #777; } .e-to {width: 200px;height: 200px;background: #766677; } //隐藏之前 .box-leave-from { } //隐藏中 .box-leave-active { } //隐藏后 .box-leave-to { } /style transition- group过渡列表 相当于transition-group包裹的内容可以给他们添加删除初始化增加动画效果 templatediv classmain!– appear-active-class是初始化动画enter-active-class是添加是动画leave-active-class是删除时动画–transition-groupappearappear-active-classanimateanimated animatebackInDownenter-active-classanimateanimated animatebackInDownleave-active-classanimateanimated animatelightSpeedInRightdiv v-for(item, index) in list :keyindex{{ item }}/div/transition-groupbutton clickadd添加/buttonbutton clickdel删除/button/div /templatescript setup langts import { ref, reactive } from vue; import animate.css; const list reactivenumber([1, 2, 3, 4, 5, 6]); //增加 const add () {list.push(9); }; //删除 const del () {list.pop(); }; /scriptstyle scoped/style