vue(笔记)2.0

小灰灰 2022-06-01 07:28 82阅读 0赞

vue2.x生命周期钩子  
![这里写图片描述][lifecycle.png]

生命周期
        之前:
            init    
            created
            beforeCompile
            compiled
            ready           ->     mounted
            beforeDestroy   
            destroyed
        现在:
            beforeCreate    组件实例刚刚被创建,属性都没有
            created 实例已经创建完成，属性已经绑定
            beforeMount 模板编译之前
            mounted 模板编译之后，代替之前ready  *
            beforeUpdate    组件更新之前
            updated 组件更新完毕  *
            beforeDestroy   组件销毁前
            destroyed   组件销毁后
    
    在每个组件模板，不在支持片段代码
        组件中模板:
            之前:
                <template>
                    <h3>我是组件</h3><strong>我是加粗标签</strong>
                </template>
            现在:  必须有根元素，包裹住所有的代码
                <template id="aaa">
                    <div>
                        <h3>我是组件</h3>
                        <strong>我是加粗标签</strong>
                    </div>
                </template>

关于组件定义  
Vue.extend 这种方式，在2.0里面有，但是有一些改动

Vue.component(组件名称,{    在2.0继续能用
        data(){}
        methods:{}
        template:
    });
    
    2.0推出一个组件，简洁定义方式：
    var Home={
        template:''     ->   Vue.extend()
    };

循环  
2.0里面默认就可以添加重复数据 取消了track-by

track-by   ->  <a v-for="(val,index) in list" :key="index"></a>  //给成了这个格式

arr.forEach(function(item,index){//看看这个再看看下面是不是很像
    
    });
    
    去掉了隐式一些变量
        $index	$key
    
    之前:
        v-for="(index,val) in array"
    现在:
        v-for="(val,index) in array"

自定义键盘指令  
之前：`Vue.directive('on').keyCodes.ctrl=17;`

现在:  Vue.config.keyCodes.ctrl=17

过滤器  
取消内置过滤器，基础指令现在需要自己写  
不错的工具库推荐lodash 工具库 \_.debounce(fn,200)  
组件通信:

vm.$emit()  子组件
    vm.$on();  父组件

父组件和子组件:
    
    子组件想要拿到父组件数据:
        通过  props
    
    之前，子组件可以更改父组件信息，可以是同步  sync
    现在，不允许直接给父级的数据，做赋值操作

如果子组件要改父组件的数据  
a). 父组件每次传一个对象给子组件, 对象之间引用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>对象法</title> </head> <body> <template id="bb"> <div @click="change"> this is child ----> { { fdata}} </div> </template> <div id="box"> 父级数据----->{ { msg}} <br> <bb :fdata="msg"></bb> </div> <script src="./vue.js"></script> <script> var child = { template:"#bb", data:function(){ return { } }, props:['fdata'], methods:{ change(){ this.fdata.a=2 } } } var vm = new Vue({ el:"#box", data:{ msg:{ a:"this is father" } }, components:{ "bb":child } }) </script> </body> </html>

组件之间的通信解决办法

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>组件之间的通信</title>
    </head>
    <body>
      <div id="box">
        <child-a></child-a>
        <child-b></child-b>
      </div>
      <script src="./vue.js"></script>
      <script> var vm = new Vue() var a = { template:` <div @click="send"> 我是a组件 -> { {msg}} </div> `, data(){ return { msg:"this is a's msg" } }, methods:{ send(){ // console.log(1) vm.$emit("senda",this.msg) } } } var b = { template:` <div> 我是b组件 -> { {msg}} <br> 接收到的数据 -> { {a}} </div> `, data(){ return { msg:"this is b's msg", a:'' } }, mounted(){ vm.$on("senda",(a)=>{ // alert(a) this.a=a; }) } } new Vue({ el:"#box", data:{ }, components:{ "child-a":a, "child-b":b } }) </script>
    </body>
    </html>

总结：组件中的通信  
1、创建一个中间间实例 var vm = new Vue()  
2、发送信息的组件写入`vm.$emit("senda","a-msg")`  
3、接收的元素写入 `mounted(){vm.$on('senda',function(data){this.a=data}.bind(this))}`

动画  
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。  
包括以下工具：

在 CSS 过渡和动画中自动应用 class  
可以配合使用第三方 CSS 动画库，如 Animate.css  
在过渡钩子函数中使用 JavaScript 直接操作 DOM  
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue动画的使用</title>
      <style> .fade-box{ width: 200px; height: 300px; background:powderblue; } .fade-enter-active,.fade-leave-active{ transition: all 3s; } .fade-enter{ /* 显示之前的状态 必须在这里设置 */ opacity: 0; } .fade-enter-active{ /* 动画开始时的状态 -> 起点状态 */ width: 900px; } .fade-enter-to{ /* 动画结束时的状态 -> 终点的状态 不是最后显示的状态，推荐设置和最后显示的状态一样*/ width: 200px; } .fade-leave-active{ width: 200px; } .fade-leave-to{ width: 800px; opacity: 0; } </style>
    </head>
    <body>
      <div id="box">
        <button @click="show=!show">动画按钮</button>
        <transition name="fade">
          <div class="fade-box" v-show="show"></div>
        </transition>
      </div>
      <script src="./node_modules/vue/dist/vue.js"></script>
      <script> var vm = new Vue({ data:{ show:true } }).$mount("#box"); </script>
    </body>
    </html>

总结：  
.fade-enter => 显示之前的状态  
.fade-enter/leave-active => 动画起点状态  
.fade-enter/leave-to => 动画终点状态  
![这里写图片描述][transition.png]  
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制 进入/离开 过渡的不同阶段，在下面章节会有个示例说明。  
和外部样式的结合

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue动画的使用</title>
      <link rel="stylesheet" href="./animate.css">
      <style> .fade-box{ width: 300px; height: 300px; background:rebeccapurple; } </style>
    </head>
    <body>
      <div id="box">
        <button @click="show=!show">动画按钮</button>
        <transition name="animate-case" enter-active-class="animated tada" leave-active-class="animated bounceOutLeft" >
          <div class="fade-box" v-show="show"></div>
        </transition>
      </div>
      <script src="./node_modules/vue/dist/vue.js"></script>
      <script> var vm = new Vue({ data:{ show:true } }).$mount("#box"); </script>
    </body>
    </html>

当有多个过渡元素同时存在时

transition 变为 transition-group 并且过渡的元素要绑定 独一的key，如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue 结合 animated</title> <link rel="stylesheet" href="./animate.css"> <style lang=""> p{ width: 200px; height: 200px; background:red; margin:0 auto; } [v-cloak]{ display: none; } </style> </head> <body> <div id="box"> <button @click="msg=!msg">animated</button> <transition-group enter-active-class="animated bounceIn" leave-active-class="animated zoomOutLeft" > <p v-cloak v-show="msg" :key="1">{ { msg}}</p> <p v-cloak v-show="msg" :key="2">{ { msg}}</p> </transition-group> <p v-cloak :key="2">{ { msg}}</p> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el:"#box", data:{ msg:"this is animated element", } }) </script> </body> </html>

显性的过渡持续时间  
2.2.0 新增

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

你也可以定制进入和移出的持续时间：

JavaScript 钩子  
可以在属性中声明 JavaScript 钩子,在method中加入特定的方法

<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>
    
    //动画方法
    // ...
    methods: {
      // --------
      // 进入中
      // --------
    
      beforeEnter: function (el) {//el为当前的元素
        // ...
      },
      // 此回调函数是可选项的设置
      // 与 CSS 结合时使用
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
    
      // --------
      // 离开时
      // --------
    
      beforeLeave: function (el) {
        // ...
      },
      // 此回调函数是可选项的设置
      // 与 CSS 结合时使用
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。  
当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=”false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

[lifecycle.png]: https://cn.vuejs.org/images/lifecycle.png
[transition.png]: https://cn.vuejs.org/images/transition.png