web前端知识---------------5

    1.vue框架

        可以使用v-model实现双向数据绑定
        借鉴mvvm模式 
        生态圈广泛 适合初学者
        前端三大主流框架 

    2.生命周期 ****

        beforeCreate()
            实例初始化之前 初始了一些事件和默认生命周期
        created()
            实例初始化完毕 可以访问data中数据和methods方法 可以发送异步请求
        beforeMount()
            实例挂载到页面之前
            编译模板 有无el选项 ，有的话，有无templete选项，如果没有 指定el外部
            的html作为模板（templete）。如果有templete，将templete作为模板
        mouted()
            实例挂载到页面上 此时可以访问真实dom
        beforeUpdate
            数据更新前 数据更新会触发的钩子 重新编译数据对应的视图层dom元素 使用diff算法更新视图，
       数据是最新的，但是视图还没有更新
        updated
            数据更新完成 渲染到页面的数据是最新的
        beforeDedtory()
            实例销毁前 此时可访问vue实例data和methods
        destoryed()
            实例销毁完成 销毁一些子组件 事件监听

    3.mvvm模式

        三层结构
        m model数据层 数据层发生变化 vm(DOM Listeners)监听到 通知view层做出对应的修改
        v    view 视图层 视图层发生变化 vm(Data Bindings)监听到 通知model层做出对应的修改
        vm viewModel 数据视图层

    4.模板语法

        1.文本插值 {{}}
        2.v-bind : 绑定变量
        3.v-html 解析代码片段 '<p>这是一段文本</p>'
        4.v-on/@ 绑定事件 
        5.{{js表达式}}

    5.列表渲染

        v-for='(item,index) in arrs' :key='item.id'
        v-for='(value,key,index) in obj'
        ***key的作用:因为vue是会高效的复用组件 如果不希望组件被复用
        可以使用唯一标识key来标识当前组件

    6.条件渲染 ***

        v-if v-else-if v-else v-show
        1.v-if惰性的 不满足条件直接不渲染当前元素 
        2.v-if满足条件 会给html添加一个dom节点 
        3.v-show 无论满不满足条件 都渲染当前元素 满足条件 会显示dom元素
        不满足条件 切换css属性display为none  隐藏元素
    7.v-for 和 v-if优先级 ***
            v2:v-for 优先级 高于 v-if 
            v3:v-for 优先级低于 v-if
    8.data为什么是一个函数不是一个对象? *****
        因为组件会被高效复用,每一个组件都应该输出一份独立的拷贝,
        应该维护各自的data,如果是一个对象,每一个组件都指向data的同一个
        引用地址,其中一个更改，另外两个会受到影响.
    9.动态style绑定
        <div :style='[styleObj1,styleObj2]'></div>
        data(){
            styleObj1:{
                color:"red",
                fontSize:"18px"
            },
            styleObj2:{
                color:"red",
                fontSize:"18px"
            }
        }
    10.动态类名绑定 class css样式切换 
    red{}
    color{}
    <div :class='{red:true,color:false}'></div>
    <div :class='[{red:true},{color:false}]'></div>
day02
    事件机制 
        v-on @
    事件对象 event 
    vue  
    1.handler(event){}
    2.<div @click='handler2($event,item.id)'>
    表单双向数据绑定 使用v-model
    v-model 底层实现原理 data(){} v2 object。defineproperty v3 proxy{}
    3.watch computed区别?
        1.watch无缓存,只有值发生变化时候watch才会执行/响应
        2.一般执行开销较大异步请求 
        浅监听
            基本数据类型
            a(n,o){} 
            a:{
                handler(n,o){}
            }
        深监听
            a:{
                handler(n,o){},
                deep:true,
                immediate:true //立即执行
            }
        computed    
        1.有缓存性,值不发生改变的时候会在第一次调用的时候缓存下来    
        2.计算某一个属性的变化,只要其中的一个变量改变计算属性就会重新计算并返回计算后的结果
        computed:{
            total(){
                return this.a+this.b
            }
        }
        methods
        1.无缓存 调用一次执行一次
        2.封装异步请求 返回函数
day03
    组件机制
        1.全局注册组件
        Vue.component(tagName,组件配置对象)
        2.局部注册组件
        new Vue({
            components:{
                'my-a':myA,
                'my-b':myB,
            }
        })
    使用
        <my-a/>
    组件传值/通信/交互 ****
    1.父--->子 
        1.使用子组件的标签上写入传递的数据
        2.在子组件内部使用props接收
    2.子--->父
        1.子组件发射自定义事件
            $emit(自定义事件名称,传递的参数)
        2.父组件声明自定义事件 
            @my-event='handler'
            handler(a){

            }
    3.兄弟组件传值
        1.利用事件总线 Vue.prototype.$emit()/$on()
            定义一个js文件 
            导出一个new Vue();
        2.在兄弟组件引入事件总线
            import Bus from './xxx.js';
            Bus.$emit('toMyb',this.msg)
        3.在另一个兄弟组件内部引入事件总线
            Bus.$on('toMyb',a)
    利用vuex传值 *******
        1.定义一个vuex状态机/仓库
        export default {
            state:{
                a,
                b,
                c,
                user:""
            },
            getters:{},
            mutations:{
                SET_USER(state,payload){
                    state.user=payload
                }
            },
            actions:{
                login(sto,payload){
                    sto.commit('SET_USER',payload)
                }
            },
            modules:{}
        }
        2.在兄弟组件分发动作/提交突变
            此时state被修改掉了
            this.$store.dispatch('login','admin1')
        3.在另一个兄弟组件使用辅助函数引入state
            ...mapState('',['user']);
        使用vuex刷新页面数据丢失问题怎么处理?
            想永久化存储
            使用localStorage
    4.不仅限于父子组件 嵌套很深的组件传值
        1.在祖先组件使用provide函数返回一个对象 传递值
            provide(){
                return {
                    "msg":this.msg
                }
            }
        2.在子组件/孙组件使用inject注入数据
            inject:['msg','a','b']
    day04
        插槽
            父组件提供给子组件一个模板 想要在子组件显示模板
            <my-a>
                <template>hello vue</template>
                <template v-slot:header>头部</template>
                <template #header>头部</template>
                <template>中间</template>
                <template>底部</template>
            </my-a>
            1.默认插槽/简单插槽
                <slot></slot>
            2.具名插槽
                <slot name='header'></slot>
                <slot name='center'></slot>
                <slot name='footer'></slot>
            3.作用域插槽
                <template slot-scope='scope'>
                    {{scope.row.name}}
                </template>
                let mya={
                    props:['arr','arr2']
                    template:`
                        <div>
                            <ul>
                                <li v-for='item in arr'>
                                    <slot v-bind:row='item'></slot>
                                </li>
                            </ul>
                        </div>
                    `
                }
            2.自定义指令 v-focus
                Vue.directive('focus',{
                    inserted(el){
                        el--指向当前绑定指令dom元素
                        el.focus()
                    },
                    //给指令初始化触发
                    bind(vnode,el,binding){
                        el.value=binding.value
                    }
                })        
                new Vue({
                    directives:{
                        'focus':{
                            inserted(){},
                            bind()
                        },
                        'my-show':{
                            inserted(){},
                            bind()
                        }
                    }
                })
            3.render函数
                编译模板函数
            render(h){
                h--->createElement();
                return h('div',{},节点内容);
            }
            4.过滤器
                对时间格式或者文本格式处理
                {{time | fmtDate}}
                Vue.filter('fmtDate',function(val){
                    return moment(val).format('YYYY-MM-DD')
                });
                new Vue({
                    filters:{
                        fmtTime(val){
                            return val.toUpperCase()
                        },
                        fmtData(){

                        }
                    }
                })
            5.插件
                将vue功能进行全局拓展
                let myPlugin={
                    install(Vue,options){
                        Vue.filter();
                        Vue.directive();
                        Vue.component();
                        Vue.prototype.$message=function(){}
                    }
                };
                Vue.use(myPlugin);
                Vue.use(vueRouter);//
                Vue.use(vuex);// 饿了么团队 vant 有赞 美团  
                cnpm i -S vuex
            6.混入对象
                组件的实例的公共方法 公共属性
                let mixin={
                    data(){
                        state:"公共数据"
                    },
                    methods:{
                        foo(){
                            return this.state
                        }
                    },
                    created(){

                    }
                }
            1.全局混入
                Vue.mixin(mixin) 会给每一个组件实例都混入
            2.局部混入
                new Vue({
                    mixins:[mixin]
                });
            混入规则:
                选项重名会进行适当合并
            data(){} 合并 冲突 以组件优先
            methods:{} 合并 冲突 以组件优先
            created(){} 合并 先执行混入钩子 再执行组件钩子
        7.动态组件
            可以使用component is 属性动态加载组件
            切换/动态加载组件 组件会重新创建和销毁
            可以使用keep-alive在组件第一次创建的时候缓存下来
            keep-alive生命周期 
            activated() 激活/进入组件 deactivated()停用/离开组件
            errorCaptured() 子孙组件发生错误捕获
------------------------------------------------------------
Vue3知识:
    1.创建app应用使用Vue.createApp();
     app.mount('#app');
    v2:创建app应用 new Vue({}).$mount('#app');
    2.生命周期    
        setup 优先级高于任何生命周期
            this不建议使用 this---windows
        beforeDedtory()   beforeUnmount() 实例解绑前
        destoryed()       unmounted() 实例解绑完成 
    3.v-for v-if优先级
    4.data响应式数据变化
         v2 data(){}  没有代理 没有拦截
         this.obj=newObj;
         this.obj===newObj;//true
         v3 data(){}  拦截 代理给proxy对象
         this.obj=newObj;
         this.obj===newObj//false
    5.setup 组合式api 淡化选项式api
        setup(){//准备阶段 
            1.使用ref存放响应式数据
            let data=ref([]);//基本数据类型 {value:data}
            let data=reactive();//引用数据类型 
            2.封装异步
            let load=async ()=>{
                let res = await get();
                data.value=res.data;
            };
            3.使用生命周期发生异步
            onMounted(load());
            4.数据获取到了 返回出去 
            return {
                data
            }
        },
day06
    路由机制
        加载组件的另一种方式 
    路由使用流程:
        1.声明组件  
         myA myB  myC
        2.定义一个路由对象数组
        let routes=[
            {
                path:"/",
                name:"",
                component:myC,
                路由重定向
                redirect:'/myc'
            },
            {
                path:"/mya",
                component:myA,
                //给路由命名
                name:"",
                //路由别名
                alias:'/aa',
                children:[
                    {
                        path:"/",
                        component
                    },
                    {},
                    {}
                ]
            },
            {
                path:"/myb",
                component:myB
            }
        ]
        3.声明一个路由器对象实例
        let router = new VueRouter({
            routes,
            mode:"hash/history"
        });
        4.将路由对象实例注入vue实例中
        new Vue({
            router
        });
        5.使用路由 
            根据路由跳转到对应的组件
            <router-link to='/mya'>去A组件</router-link>
            路由出口 显示路由对应页面
            <router-view></router-view>
    Vue-cli
    router
        index.js
        import Vue from 'vue';
        import VueRouter from 'vueRouter';
        Vue.use(VueRouter);
        let routes=[
            {

            },
            {

            }
        ];
        export default new VueRouter({
            routes,
            mode:"hash"
        });
    2.编程式导航
    2，1this.$router.push({
            path:"",
            query:{}
        });
        this.$router.push({
            name:"",
            params:{}
        });
        区别?
        1.query参数携带url地址栏上,params携带的参数不会直接携带在地址栏
        2.query携带的参数刷新页面不会丢失,params携带的参数刷新页面失效
    2，2 this.$router.replace({
            path:"",
            query:{}
        });
        不会产生历史记录栈 
    2，3 this.$router.go(+/-Intnumber);//返回 
        $router.go();刷新页面
    3.嵌套路由
        二级路由 
        使用条件:
            let myA={
                template:`
                    <div>
                        <router-link to='/myA-child'></router-link>
                        <router-view></router-view>
                    </div>
                `
            }
    4.导航守卫
            监听路由地址变换
        1.全局守卫
            1.全局前置守卫
            beforeEach((to,from,next)=>{
                if(to.path=='/articleDetails'){
                if(to.path!='/login'){
                    let token=localStorage.getItem('token');
                    next()
                }else{
                    next()
                }
            })
            2.全局后置守卫
            afterEach((to,from)=>{
                to  --- 即将进的路由
                from ---上一个离开的路由
            });
        
        2.组件内守卫
        let myA={
            template:``,
            beforeRouteEnter(to,from,next){
                if(to.path==''){
                    next()    
                }
                this指向 this--->windows
            },
            beforeRouteUpdate(to,from,next){
                this--->当前组件实例对象
            },
            beforeRouteLeave(to,from,next){
                this--->当前组件实例对象
            }
        }
        3.路由独享守卫
        routes:[
            {
                path:"/article",
                component:Article,
                beforeEnter(to,from,next){
                    if(to.path==''){
                        next()
                    }
                }
            }
        ];
5.监听路由url变化?
    user/:id
    1.created(){
        console.log(this.$route.params)
    }
    2.watch
    $route(to,from){
        to.params
    }
    3.组件内守卫
    beforeRouteUpdate(to,from,next){
        to.params
    },
6.路由模式?
    1.hash history 
    区别? #/article1
    1.hash url地址携带# history模式url地址不携带#
    2.history刷新页面请求服务器 没有后端支持 一般就是404
    3.hash工作原理hashchange方法事件对象的newURL和oldURL
    4.history工作原理 利用history对象 go back forward方法
    5.hash支持低版本的浏览器 history是h5新增api
    vue默认工作路由模式:hash
day07
    vuex 状态机 仓库
    维护组件的公共状态 
    状态机使用流程:
    let store=new Vuex.Store({
        //state维护实例公共状态 类似于data
        state:{},
        //处理state数据 并且返回新数据 类似于computed
        getters:{},
        //突变 同步操作 修改state 的唯一的一种方式
        mutations:{},
        //动作 异步操作 提交突变
        actions:{},
        //模块化 放多个状态机配置对象 
        modules:{
            storeA,//namespaced:true
                state:msg
            storeB
                state:msg
        }
    });
    ...mapState('storeA',{
        'a':"msg"
    })
    ...mapState('storeB',['msg'])
    注入vue实例中
    new Vue({
        store
    });
    介绍一下vuex?
    1.vuex是管理状态的仓库,包含五个属性state,getters,mutations,actions,modules
    2.介绍五个属性的作用:
    3.介绍vuex工作流程 
    使用dispatch分发动作,在动作中通过commit提交突变,通过突变修改state 映射state;

    vuex实现永久化存储?
    mutations
        state.token=payload;
        localStorage.setItem("token",payload)
    state:
        localStorage.getItem('token') || ""
axios 二次封装 
axios 基础知识