vue3

Promise

Promise出现的原因： 就是为了解决回调地狱问题（将回调函数的写法进行了更新，之前是传参现在可以通过then）

Promise的使用

Promise的状态说明

1. pendding: 异步操作还未结束

2. fullfilled / resolved: 异步操作已经结束并且成功了

3. rejected : 异步操作已经结束并且失败了

4. 别人提供的Promise的api我们可以直接使用then方法来写回调！

axios().then(res=>{})

2. 我们可以通过Promise来给别人提供相应的回调函数的改进写法

function timeOut(time){
    return new Promise(function(resolve, reject){
        //resolve就是将当前promise对象的状态更改为成功， 会调用then里面的第一个函数
        //reject就是将当前promise对象的状态更改为失败，会调用then里面的第二个函数，或者catch里的函数
        setTimeout(function(){
            resolve();
        }, time);
    })
}

timeOut(1000).then(_=>console.log("1s后做的事情"))

自定义指令

指令的基本格式

指令名:参数.修饰符="表达式"

自定义指令什么时候用？

在Vue中如果遇到需要进行DOM操作的情况，就使用自定义指令

如何注册自定义指令

1. 全局注册

Vue.directive("指令名不带v-", {
    bind(el, binding){
        //el 就是当前指令所在的元素dom对象
        //binding： 就是和指令相关的所有的信息（上面的指令的格式中的所有的内容）
            //指令名： binding.name  binding.rawName
            //参数： binding.arg
            //修饰符: binding.modifiers 
            //表达式：binding.expression
            //表达式的值： binding.value
    },
    inserted(){},
    update(){},
    componentUpdated(){},
    unbind(){}
})


//平时使用的时候 并不一定5个钩子都会用到，最常用的是bind和update
//所以下面的简写形式，就是同时设置了bind和update两个钩子函数
Vue.directive("指令名不带v-", function(){})

2. 局部注册

var vm = new Vue({
    directives: {
        "指令名": {},
        "指令名": function(){}
    }
})

自定义指令练习（3遍！！）

自定义过滤器

概念？？

过滤器可以接收一个数据，并且加工之后返回一个新的数据
本质就是一个函数，接收参数，并且有返回值

html中如何用？？

{{data | 过滤器名称(arg1...argN)}}

如何注册过滤器

Vue.filter("过滤器名称", function(value, arg1...argN){
    //value指的就是|前面的内容，也就是要被过滤的内容
    //arg1...argN就是过滤器名称后面传入的参数
    //过滤器一定要有返回值
})

var vm = new Vue({
    filters:{
        "过滤器名称": function(value, arg1...argN){

        }
    }
})

过渡

过渡的6个状态

进入前 进入时 进入后
离开前 离开时 离开后

实现方式

1. 自定义类样式实现
   1.1 在css样式表中，添加6个类样式 name-enter name-enter-to name-enter-active
   name-leave name-leave-to name-leave-active
   1.2 在要实现过渡的元素上包裹一个transition标签，将name设置为类样式开头的name，如果不设置name，默认会找v-打头的类样式

2. 第三方css库实现

3. js钩子函数实现
   3.1 8个钩子函数
   before-enter
   enter
   after-enter
   enter-cancelled
   before-leave
   leave
   after-leave
   leave-cancelled

   3.2 一般我们会在 before-enter中设置进入前的样式 enter中设置进入后以及过渡时的样式， enter中需要先触发一次重绘 el.offsetWidth

单页面应用

本质： 根据hash值的改变，切换显示页面中的内容！！

练习（自己实现一个简单的单页面应用！）

组件

组件化

将页面按照功能，进行拆分，创建成组件，每需要一个页面的时候，只需要把创建好的组件拿过来组装成一个新的页面即可

组件

包含html，css，js的功能代码！

组件的注册

    Vue.component("组件名（不能用驼峰命名）", {
        template: "html模板字符串",
        data(){
            return {
                // 这里就是数据
            }
        }
    })

    var vm = new Vue({
        components: {
            "组件名（不能用驼峰命名）": {
                template: "html模板字符串",

                //data为什么是个函数（仔细思考！！！）
                data(){
                    return {
                        // 这里就是数据
                    }
                }
            }
        }
    })


    var obj = Vue.extend({
        template: "html模板字符串",
        data(){
            return {
                // 这里就是数据
            }
        }
    })

    Vue.component("组件名", obj)

如何在页面中使用一个组件

<组件名>

<组件名/>

预习组件！

1. 组件之间的切换
2. 组件之间的通信