专业建设网站企业,赤壁网站定制,广东软件公司排名,网站建设报价是多少插槽使用 插槽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-classanimate__animated animate__backInLeftappear-active-classanimate__animated animate__backInRightappear-to-classanimate__animated animate__backOutUpdiv 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-classanimate__animated animate__backInDownenter-active-classanimate__animated animate__backInDownleave-active-classanimate__animated animate__lightSpeedInRightdiv 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
