vue(笔记)2.0

程序员文章站 2022-06-27 11:52:34

...

vue2.x生命周期钩子
vue(笔记)2.0

生命周期
    之前:
        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 => 动画终点状态
vue(笔记)2.0
对于这些在 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 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

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

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

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 的影响。

vue(笔记)2.0

Vue.js——前端代码复杂带来的问题——2020.12.9

python笔记-----字典、元组、集合操作

Vue利用Axios实现异步通信原理

前端笔记之React（四）生命周期&Virtual DOM和Diff算法&日历组件开发

算法小抄学习笔记 — 8.二叉树的遍历

vue按需加载组件,异步组件

vue-cli3 中跨域解决方案

一个可复用的vue分页组件

vue.js实现插入数值与表达式的方法分析

vue发送ajax请求