VUE、三
一、过度和动画
注意:过度动画总共分为两种情况:一种是入场动画,一种是离场动画
注意:如果两个标签名字相同的情况下,vue为了提高效率,会将内容直接替换掉,而不是显示动画了;如果一定要显示标签要加上key属性唯一标识一下
关于transition:在transition中的属性:mode属性用于设置过度模式,只有两个值:out-in和in-out;transition这里只能包裹单个节点,多个节点要用transition-group
一、 css类名实现
进场
v-enter:表示进入过度的开始状态
v-enter-active:表示进入过度生效时的状态
v-enter-to:表示进入过度的结束状态
离场
v-leave:表示离开过度的开始状态
v-leave-active:表示离开时过度生效时的状态
v-leave-to:表示离开过度的结束状态
1、找到需要过度的元素,然后用一个transition标签包裹起来
2 、给transition标签的name属性赋值,这个值可以作为类名的前缀,就相当于给动画取名字
<transition name='slide'>
<div v-if="isVisible">v-if控制文字显示和隐藏</div>
</transition>
<button @click='isVisible = !isVisible'>点击</button>
3、定义入场和离场的类名(可以用交集选择器去拼接在一起)
//入场
//入场开始
.slide-enter{
padding-left:100px
}
//入场过度
.slide-enter-active{
transition:all 5s
}
//入场结束
.slide-enter-to{
padding-left:0
}
//离场
//离场开始
.slide-leave{
padding-left:0px
}
//离场过度
.slide-leave-active{
transition:all 5s
}
//离场结束
.slide-leave-to{
padding-left:100px
}
二、使用动画库,animate
1、引入动画文件
2、将需要添加过度动画的元素用transition标签包裹起来
3、给transition加上两个属性,一个是enter-active-class,另一个是leave-active-class
<transition
enter-active-class='animated 动画名'
leave-active-class='animated 动画名'
>
<div v-if="isVisible">v-if控制文字显示和隐藏</div>
</transition>
<button @click='isVisible = !isVisible'>点击</button>
三、动画js实现
1、给需要添加的元素,用transition包裹起来
2、给transition加上入场 和 离场的事件及函数
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div v-if="isVisible">v-if控制文字显示和隐藏</div>
</transition>
3、定义函数
注意:在进入中或者结束中的阶段结束时候后,一定要调用done回调函数,通知后面函数执行
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
二、vue组件
一、回顾模块
模块:针对于js代码来说,把js代码拆分成多块
二、组件
组件:针对一块完成的UI层面,包括了这块UI涉及到的js、html、css
一、组件的创建----全局
全局组件:在全局任何地方都可以使用
1、创建全局组件使用Vue.component(组件名,配置项)方法
注意:组件的命名可以全小写,可以大写驼峰,还可以连字符;如果使用驼峰命名,那在页面使用的时候,要使用连字符 my-header
Vue.component('myheader',{
//通过template属性定义组建中的模板结构
//注意:template里面的标签只能有一个根节点
template:`
<header>
<span>首页</span>
</header>
`
})
//注意:template引起来的是反引号
2、使用组件就像使用html标签一样
<myheader></myheader>
二、组件的创建—局部
局部组件:规定一定的使用范围,局部组件只能够在某个注入的组件内部使用
创建方法:
1、先创建一个对象,保存组件的配置项
2、通过有个components属性,往当前组件中注册新的组件进来,里面可以写多个
3、在father模板位置使用son组件
let son={
template:'<div>我是son组件</div>'
}
Vue.component('father',{
template:`
<son></son>
`,
components:{
son
}
})
三、在组件里面的data等
可以跟着在template后面写data,methods都和vue一样,正常用,除了data
1、为什么data是一个函数?因为函数有自己的作用域,这样写是为了将个个组件内部的data隔离开来
2、为什么要返回一个新的对象?因为对象是按引用传递的(就是传递的地址),如果多个组件引用同一个对象,会造成数据互相干扰
data是一个函数,必须return一个对象
data(){
return {
msg:'hello world
}
}
四、组件通信
父传子
1、 父传子,要接收父组件传递过来的数据,首先得通过props属性定义一个坑,
2、在使用自组件的位置,利用v-bind指令,给子组件传值,这里的sonMoney必须和son的sonMoney一样
let son={
template:'<div>我son的钱有{{sonMoney}}</div>',
props:['sonMoney']
}
Vue.component('father',{
template:`
<h1>父组件的钱{{money}}</h1>
<son :sonMoney="money"></son>
`,
components:{
son
},
data:{
return {
money:22222
}
}
})
子传父
1 、在需要与父组件关联的地方,用this.$emit()方法关联,发射
$emit()函数这里有两个参数,一个是自定义事件名称,另一个是数据
2、在使用子组件的地方,通过@(v-on)指令去监听子组件发射过来的的事件–@自定义事件名称=“逻辑函数函数”
3、通过函数的默认参数去接收子组件发射过来的数据
4、直接给父组件中的变量赋值
<script>
let son = {
template: '<div>我刚刚交往了一个女朋友,她名字叫{{girlfriendName}}<button @click="titall">点击告诉我女朋友叫{{girlfriendName}}</button></div>',
data() {
return {
girlfriendName: 'rose'
}
},
methods: {
titall(){
this.$emit('emitName',this.girlfriendName)
}
}
}
Vue.component('father', {
template: '<div>我儿子告诉我,她交往的女朋友叫{{sonGFname}}<son @emitName="addName"></son></div>',
components: {
son
},
data(){
return{
sonGFname:'????'
}
},
methods:{
addName(name){
this.sonGFname = name
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
五、非父子组件通信
事件总线eventbus
1、创建事件总线eventbus,它是一个空的vue实例,他可以用来作为非父子组件通信的桥梁
let evtbus = new Vue()
2、利用事件总线,发射一个自定义事件以及数据
evtbus.$emit('emitName',this.gfName)
3、在daugher组件挂载到页面的时候,就一直监听,通过事件总线监听,兄弟什么时候发射事件过来,我什么时候执行
事件总线通过$on方法监听,第一个参数是监听的事件名称,第二个参数是一个回调函数,默认参数去接收数据
mounted(){
evtbus.$on('emitName',(name)=>{
console.log(name)
})
}
三、动态组件
一、动态组件通过component组件事件,这个组件有一个is属性,is属性的值是谁,它就会展示哪个组件,必须绑定is
<component :is='currentCom'></component>
data:{
currentCom:''
}
四、es6赋值结构
let name = 'jack'
let age = 18
let user = {name:name,age:age}=====赋值》》》let user = {name,age}