Vue笔记（三）

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}