2-5.VUE的基础用法

1.vue的两核心
    响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关系dom操作，而专心数据操作
    可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试





2.vue的开发初体验
    通过静态CDN资源安装VUE最新版本
        数据绑定，数据响应式
        属性动态绑定的提示信息
        样式的动态绑定
        基本的时间操作
        循环遍历输出数组中的值



3.了解vue-cli（vue脚手架）
    Vue-CLI(Command Line Interface)
    Vue-CLI是vue官方提供的脚手架工具，默认已经帮我们搭建好了一套利用webpack管理vue的项目结构
    命令安装：npm install -g@vue/cli
    检查版本：vue --version
    创建项目：vue create项目名称


4.option基础定义和MVVM模式
    VUE实例主要是封装了视图操作，包括有，数据读写，事件绑定，DOM更新

option是vue实例参数，意思是构造选项
    option的五大类型
        数据：data.props、propsData、computed、methods、watch
        DOM：el,template,render,renderErroe
        生命周期钩子：beforeCreate,creaed,beforeMount,mounted,beforeUpdate,update,activated,deactivated,beforeDestroy,destroyed,errorCaptured
        资源：directives,filters,components
        组合：parent,mixins,extends,provide,inject



5.Vue模板中的基本语法
    插值操作
    绑定属性
    计算属性
    事件监听
    条件判断
    循环遍历
    其他语法



6.vue模板语法：插值，指令
    插值：{{}}
    指令：v-

    （在{{}}和v-指令进行数据绑定时，支持单个js表达式 ）
<p v-once>{{msg}}</p>           //数据只第一次时显示，不响应式
<p v-pre>{{msg}}</p>            //内容原封不动的展示
<p v-text='msg'></p>            //就相当于插值表达式的功能
<p v-html="title"></p>          //可以解析标签


data:{
    msg:'test message',
    title:e`<h1 style="color:red"></h1>`
}



7vue模板语法
    插值{{}}只能用在模板内容中，用于动态内容绑定如果希望元素的属性也可以动态绑定，选哟通过v-bind指令
    'v-bind' 缩写 ':'（语法钱）
    绑定有意义元素中的属性，绑定class属性，四种用法（字符串，数组，对象，方法）
    绑定style属性

8.vue模板语法：计算属性
    计算属性关键词：computer
    计算属性在处理一些复杂逻辑时是很有用的

    computed:{
        site:{
            //getter
            get:function(){
                return this.name+''+this.url
            },
        //setter
            set:function(newValue){
                var names = newValue.split('')
                this.name = name[0]
                this.url = names[names.length -1]
            }
        }
    }



9.vue模板语法：事件监听
    在前端开发中，需要经常和用户交互
    绑定事件监听器指令：v-on
    缩写：@ （语法糖）
    参数：$event

v-on事件修饰符号
    .stop           //阻止事件冒泡
    .self           //当事件在该元素本身触发时才触发事件
    .capture        //添加事件侦听器是，使用事件捕获模式
    .prevent        //阻止默认事件
    .once           //事件只触发一次


10.vue模板语法，条件分支指令
    v-if 和 v-show
        v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器个子组件适当地被销毁和重健
        v-show 就简单的多-----不管初始化条件是什么，元素总是会被渲染，并且只是简单的基于css进行切换


v-if v-else
v-if v-else-if c-else

11.Vue模板语法：循环遍历指令
    遍历指令：v-for
    遍历数组 v-for = "(item,[index]) in 数组"
    遍历对象 v-for="(value,[key],[index]) in 对象 "

    vue中列表循环需加：Key=”唯一标识“唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一行为了更好的区别各个组件key的作用主要是为了高效的更新虚拟DOM。
    使用diff算法的处理方法，对操作前后的DOM树同一层节点进行对比，一层一层对比




12.Vue模板语法：V-model
    v-model指令的本质是：它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-modle会忽略所有表单元素的value、checked，selected特性的初始值，它总是将vue实例中的数据中作为数据来源。然后当输入事件发生时，实时更新vue实例中数据

    实现原理：<input v-bind:value="message" v-on:input="message = $event.target.value"/>

    v-model的修饰符号
        .lazy       //懒加载修饰符
        .number     //修饰符让其转换为number类型
        .trim       //修饰符可以自动过滤掉输入框的首尾空格


13.VUE的组件化开发
    组件化时Vue的精髓，Vue开发是由一个一个的组件构成的
    组件分类
        页面级组件
        业务上可修复的基础组件
        与业务无关的独立功能组件

    组件开发三要素（prop，自定义事件，slot）
        prop用于定义组件的属性
        自定义事件用于触发组件的事件
        slot用于组件功能的扩展

    组件设计需要考虑的问题
        可扩展性强
        组件中方法函数的抽离，便于复用，适用程度高
        文档清楚详细
        颗粒度合适，适度抽象
        功能尽可能单一，代码行数适中


14.vue父子组件之间通信
    父子组件之间不能相互访问data内容


                    -----------Pass props-----------
                    |                               |
                    |                              \|/
            patent（父组件）                     Child（子组件）
                   /|\                              /|\
                    |                                |
                    -----------$emit Events----------


vue父子组件之间的访问方式
    子组件调用父组件的方法：$parent或$root
    父组件调用子组件的方法：$children或$refs


$paren访问上一层
$appmet访问顶层


15.插槽slot
    VUE实现了一套内容分发的API，这套API的设计灵感源自web Components规范草案，将<slot>元素作为承载分发内容的出口
    插槽可以实现组件的扩展性，抽取共性，保留不同




16.Vue3中组件的生命周期函数
    beforeCreate(){
        console.log(实例刚刚被创建)
    },

    created(){
        console.log('实例已经创建')
    }

    beforeMount(){
        console.log('模板编译之前' )
    }

    mounted(){
        console.log('模板编译完成')
    }

    beforeUbdata(){
        console.log('数据更新之前')
    }

    updated(){
        console.log('数据更新完成')；
    }

    activated(){
        console.log('keep-alive缓存的组件激活时调用')；
    }

    deactivated(){
        console.log('keep-alive缓存的组件停用时调用');
    }

    beforeUnmount(){
        console.log('实例销毁前之间');
    }

    umounted(){
        console.log('实例销毁完成');
    }

this.$nextTick((){

    })

    this.$nexTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后DOM更新





17.Vue网络请求axios
    dosubmit(){
        axios.post('url',data.data,{
            transfromRequest:[
                function(data){
                    let ret = "";
                    for (let it in data){
                        ret +=
                            encodeURIComponent(it)+
                            "="+
                            encodeURIComponent(data[it])+
                            "&";
                    }
                    retrun ret;
                }
            ],
            headers:{
                "Content-Type":"application/x-www-form-urlencoded"
            }
        })
        .then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err)
        })
    }


18.Vue封装网络请求
    import axios from 'axios';

    const instance = axios.create({
        baseURL:"http://api.eduwork.cn/admin",
        timeout:5000
    })

    instance.interceptors.request.use(
        config=>{
            retrun config;
    },
    err =>{
        retrun Promise.reject(err);
    }
    );

    instance.interceptos.response.use{
        respomse=>{
            console.log(response);
            retrun reponse;
    },
    }
    err=>{
        retrun Promise.reject(err);
    }
    export function get(url,params){
        retrun instance.get(url,{
            parans
        })
    }

    export function post(url,data){
        retrun instance.post(url,data,{
            transfromRequest:[
                function(data){
                    let str = '';
                    for(let key in data){
                        str += encodeURLComponent(key)+
                        '='
                        + encodeURlComponent(data[key])+'&'
                    }

                    console.log(str);
                    retrun str;
                }
            ],
            headers:{
                "Content-type":"application/x-www-from-urlencoded"
            }
        })

    }







~~~~~~~~~~~~~~~~~~~路由系统~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~```


20.延迟加载动态导入和路由模式解析
    路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置
    Vue-Router在切换页面时是没有重新进行请求的，使用起来就好像页面是由状态的一样
    借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页面的状态就被维持在浏览器中
    vue-router中默认你使用的是hash模式，也就是会出现如URL：localhost:8080/#/URL中带有#号

    有三种模式
        Hash：使用URL的hash值来作为路由，用来指导浏览器动作，对服务器端完全无用，支持所有的额浏览器
        History：依赖HTML History API和服务器配置
        Abstract：支持所有JavaScript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式




21命名视图和自定义导航
    <router-link>
    <router-view>

<div>



22.嵌套路由（子路由）
    {
    path:'/me',
    name:'Me',
    component:Me,
    children:[
        {
        path:'collection',//以"//"开头嵌套路径会被当作根路径，所以子路由上不用加“/”在生成路线时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了
        name:'Collection',
        component:Collection
        },
        {
            path:'trace',
            name:'Trace',
            component:Trace
        }
    ]
    }





23.传递参数的方式
    传递参数主要有两种类型：params和query

    params的类型：
        配置路由格式：/user/:id(动态路由)
        传递方式：在path后面对应的值：t0="/user/+uid"
        传递后形成的路径：/user/9,/user/zs
        接收参数：$route.params.id

    query的类型
        配置路由格式：/user,正常配置
        传递的方式：对象中使用query的key作为传递方式：to = {path:'/',query:{id；1，name:'abc'}}
        传递后形成的路径：/user?id=9,/user?id=zs
        接收参数：$route.query.name




24.重定向和别名
    重定向也在routes配置中完成，要从重定向/a到/b
    const routes =[{ path:'/home',redirect:'/'}]
    const routes =[{ path:'/home',redirect:[name:'hompage']}]
    path:'/search/:searchText',
        redirect:to =>{
            retrun{path:'/search',query:{q:to.params.searchText}}
        }

  别名
    别名/as/home表示会用户访问时/homr，URL保持不变/home，但将被分配，就像用户正在访问时一样/
    const routes =[{ path:'/',component:Homepage,alias:'home'}]
    alias:['people','list']
    alias:['/:id','']




25.导航守卫
    导航守卫主要用来通过跳转或取消的方式守卫导航

    前置守卫
        //to.ROute:即将要进入的目标路由对象，from:当前导航正要离开路由
        route.beforeEach((to,from)=>{
            //...retrun false
        })

    后置钩子
        router.afterEach((to,from) =>{
        })

    有多种机会植入路由当行过程中：全局的，单个路由独享，或者组件级的
        全局导航守卫
        路由独享的守卫
        组件内的守卫


26.keep-alive和vue-router结合
    keep-alive时Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
        include:正则表达式
        exclude：正则表达式

    router-view是vue-router内置组件，如果直接包含在keep-alive里面，所有路径比配到的组件都会被删除

        <router-view v-slot="{Component}">
            <transition>
                <keep-alive>
                    <component:is ="Component"/>
                </keep-alive>
            </transition>

         </router-view>




27.Vuex状态管理
    Vuex是一个专为Vue.js应用程序开发的状态的状态管理模式
        就是一个加强版的data!,在单页应用重会有一个data函数，管理当前应用的状态。处理大量的需要在组件间传递数据，直接定义一个全局的data属性保存就行了
        如果我们的页面比较简单，切记千万不要没事找事引入Vuex，我们使用Vuex是因为项目变的复杂之后又很多数据需要在父组件，子组件和孙组件之传递，处理起来很繁琐，于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西
        也是响应式

        什么情况需要使用Vuex管理状态子啊多个组件间共享
            大型项目中组件很多，多个组件中共用的数据
            例如：用户的登入状态，用户名称，头像，地理位置等
            例如商品的收场=藏，购物车的物品




28.组合式API(composition API)
    使用传统的option配置方法写组件的时候问题，随着业务复杂越来越高，代码量会不断加大；由于相关业务的代码需要遵循option的配置写到特定的区域导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的
    composition API字母意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的。主要思想是我们将他们定义为新的setup函数返回的JavaScript变量，而不是将组件的功能（例如methid,computed等）定义为对象函数



基本范例
    <template>
        <button @click="increment">
            Count is:{{state.count}},double is:{{state.double}}
        </button>
    </template>



<scrip>
    import {reative,computed } from 'vue'
        export default {
            setup(){
                count state = reative ({
                    count:0,
                    double:computed(()=> state.count*2),

                })
                function increment(){
                    state.count++
                }
                retrun { state,increment,}
            },
        }


</scrip>



29.setup()方法应用
    setup()函数是VUE3中专门新增的方法，可以理解为Composition API的入口，执行时机在beforcreate之后，create之前执行
    调用时机
    this指向
    函数参数
    返回值
    接收props数据
    export default{
        props:{
            msg:{
                type:String,
                default:()=>{}
            }
        },
        setup(props){
            console.log(props);
        }
    }
    接受context是setup()的第二个参数是一个上下对象，这个上下文对像大致包含了这些属性，注意：在setup() 函数中无法访问this
    const MyComponent={
        setup(pprops,context){
            context.attrs
            context.slots
            context.parent
            context.root
            context.emit
            context.refs


        }
    }

    setup函数在创建组件之前被调用，所以setup被执行时，组件实例并没有被创建。因此在setup函数中，我们将没有办法获取this



30.Composition常用API
    ref()函数用来给定的值创建一个响应式的数据对象，ref()的返回值是一个对象，这个对象只包含一个.value属性
    reactive是用来创建一个响应式队形
    将ref响应式数据挂载到reactive中，当ref()创建出来值直接挂载到reactive()中时，会自动把响应式数据对象的额展开为原始的值，不需要通过.value就可以直接访问到
    双向绑定
    toRefs()解构响应式对象
    readonly将响应式数据便会原始数据





31.计算属性API（computed）
    computed()用来创建计算属性，返回值是一个ref的实例
    创建只读的计算属性
    import { ref,computed } from 'vue';
        export default {
            setup(){
                coust count = ref(0);
                count double = computed(() =>count.vlaue +1);//1
                double++;//Error:"doublr" is read-only

                retrun {
                count,
                donble
                };
            }
        };


创建可读可写的计算属性，在使用computed函数期间，转入一个包含get和set函数的对象，可以得到一个可读可写的计算属性
    //创建一个ref响应式数据
    coust count = ref(1)

    //创建一个computed计算属性
    const plusOne = computed({
        //取值函数
        get:()=>count.value + 1,
        //赋值函数
        set:val =>{
            count.value =val-1
        })

    //为计算属性赋值的操作，会触发set函数
    plusOne.value = 9
    //触发set函数后，count的值会被更新
    console.log(count.value)//输出8
   })

32.侦听器watch
    watch()函数用来监视某些数据项的变化，从而触发某些特定的操作
    watch(() =>{
        console.log(count.value,'value');
    })

    const state = reactive({
        count:0
    })

    watch(()=>state.count,(count,preCount)=>{
      console.log(count,preCount);//变化后与的值，变化前的值
    })

    第三个参数immediate：其值true或false：确认是否当前的初始值执行hander的函数
    watch([()=>state.count,()=>state.msg],([count,msg],[prevCount,
    preMsg])=>{
        console.log(count,msg);
        console.log('.......' )
        console.loh(r\prevCount,prevMsg);
    })



32.组合式API中生命周期函数
    生命周期与composition之间的映射关系
    beforeCreate -> use setup()
    created -> use setup()
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdata ->onBeforeUpdate
    updated -> ouUpdated
    beforeMount -> onBeforeUnmount
    unmounted -> onUnmounted


33.在组合APIprovide和inject使用
    父子组件：通过props,$emit,【$root,$parent,$children】
    非父子组件：Vuex实现，父子层层传递、$ref
    vue官方建议，在正常情况下，这两种情况下，这两种方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代应优先使用他们处理
    provide/inject这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在一起上下游关系成立的时间里始终生效
    provide就相当加强版父组件prop，可以跨越中间组件，inject就相当与加强版子组件的props
    使用方法
        provide 提供遍历狼： Object | () => Object
        inject注入变量：Array<string> | { [key:string] :string | Object}

    提供变量
    provide:{
        message:'provide by father'
    }
    后代注入变理
    inject：["message"],

setup(){                                                        setup(){
        count name = ref{"Imonkey"}                                 //用法：inject(key)
        count obj = reactive({                                      count name = inject('name')
            name:'Imonkey',                                         count animal = inject('animal')
            age:'3'                                                 retrun{
        })                                                              name,
        provied{'name',name}                                            animal
        provied{'netword',obj}                                      }
                                                                }
    }



34.Composition API处理路由
    setup和Vue的composition　APi的引入，开辟新的可能性，但为了够充分利用VUE　router的潜力，我们需要使用一些新的功能来替代对访问this和组件导航保护的使用
    由于我们无权访问setup内部this，因此无法直接访问this.$route了，相反，我们使用后useRouter和useRoute函数
    请注意，我们仍然可以访问$router和route在模板中，因此无需子啊route或之route内返回setup
    导航守卫
        尽管您仍可以组件内导航保护与setup功能结合使用过，但VUE Router会将更新和离开提供Composition
        API函数
        onBeforeRouteleave((to,from)=>{})
        onBeforeRoutupdate(async (to,from)=>{})