vue笔记

 安装axios:

npm i axios -S 

 immediate选项:

默认情况下，组件在初次加载完毕之后不会调用watch侦听器，如果想让watch侦听器立即被调用，则需要将immediate设置为true

deep选项：

当watch监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项设置为true

计算属性vs侦听器
        计算属性和侦听器侧重的应用场景不同
        计算属性侧重监听多个值的变化，最终计算并返回一个新值
        侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值  

组件生命周期
        1.当组件在内存中被创建完毕之后，会自动调用created函数
        2.当组件被成功的渲染到页面上之后，会自动调用mounted函数
        3.当组件被销毁完毕之后，会自动调用unmounted函数
        4.当组件被重新渲染完毕之后，会自动调用updated生命周期函数

 兄弟组件之间数据共享
        EventBus，借助第三方的包mitt来创建eventBus对象

     npm install mitt@2.1.0

        bus.on('事件的名称',接受的数据) ，声明自定义事件
        bus.emit('事件名称',要发送的数据)，触发自定义事件

    父节点通过provide共享数据
        通过provide()方法，对其子孙组件共享数据
        provide(){return{color:this.color}}
        可以结合computed函数向下共享响应式的数据：
            color:computed(()=>this.color)

    子孙节点通过inject接受数据
        inject:['color']
        共享响应式的数据，则子孙节点必须以.value的形式进行使用
    
    vuex是终极的组件之间的数据共享方案

 $ref操作dom
        this.$refs.myh3.style.color='red
        使用ref引用页面上的组件实例
        组件是异步执行dom更新的
        this.$nextTick(cb)方法
            组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行。
   

component标签动态组件   
        <component :is="comName"></component>

使用keep-alive保存状态
        默认情况下，切换动态组件时无法保存组件的状态，此时可以使用vue内置的<keep-alive>组件保持动态组件的状态，
        <keep-alive><keep-alive>

   

具名插槽
        如果在封装组件时需要预留多个插槽节点，则需要为每个<slot>插槽指定具体的name名称。这种带有具体名称的插槽叫做
        “具名插槽”,
        为具名插槽提供内容：<template v-slot:定义的插槽名称></template>，v-slot可简写为#
        作用域插槽

   

自定义指令
        私有指令：
            directives:{
                focus:{
                    //当被绑定的元素插入到DOM中时，自动触发mounted函数（vue2中是bind）
                    mounted(el){
                        el.focus();
                    },
                    //每次DOM更新时都会触发updated函数（vue2中是update）
                    updated(el){
                        el.focus();
                    }
                }
            }
        全局指令：
            app.directive('focus',{
                mounted(el){el.focus()}
            })

 

  vue-router路由
        安装vue-router ：npm install vue-router@next -S
        创建route.js文件，导入{createRouter,createWebHashHistory}
        在main.js中挂载
        使用<router-link>标签声明路由标签，用<router-view>标签来声明路由占位符
        .router-link-active在index.css中重置路由链接激活状态的样式
        子路由:
            children:[
                {path:'',component:Home}
            ]
        动态路由：
            把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性，用英文的冒号(:)来定义路由的参数项。
            用$route.params.id获取参数值
            props:true,接受路由匹配到的值
        编程式导航API
            this.$router.push('hash地址)：跳转到指定Hash地址，从而展示对应的组件
            this.$router.go(数值 n):实现导航历史的前进、后退
        导航守卫
            router.beforeEach((to,from,next)=>{
                console.log("导航守卫");
            })//to:目标路由对象，from:当前导航正要离开的路由对象，next:是一个函数，表示放行。

   

    vue-cli
    element-ui
    拦截器
    跨域代理proxy