vue通关基础知识储备

1、8个vue内置指令
{{变量名}}
v-text  文本
v-html  可以识别html 标签
v-if  
v-show
v-else-if
v-else
v-for
v-bind
v-on
2、vue内置组件
<template></template> 模板
<slot></slot> 插槽
<transition></transition> 过渡
<transition-group> 过渡组
<component></component> 动态组件
<router-link> 路由跳转
<router-view> 路由内容
<keep-alive> 缓存
3、8个vue实例化选项：
props 属性
data 数据
methods 方法
computed计算
watch 监听
directives 指令
components组件
model 双向绑定模型*
4、vue全局方法如何挂载
const app = createApp(App);

app.config.globalProperties.xxx = yyy

5、简述vue组件如何传参？
父传子 props

子传父 emit 事件

全局 vuex

6、vue代理配置 标识符/member 
（vue.config.js）文件

module.exports = {
           devServer:{
                   proxy:{
                         "/member":{   //请求头

                               target:"url", //请求地址

                                changeOrigin:true, //  允许跨域

                                onProxyReq(proxyReq){

                                    proxyReq.setHeader(key,value)

                                }

                      }

                 } 

         }

}

7、$router方法
go() 跳转历史记录
back() 返回
forward() 前进
push() 推入（切换路由）
replace() 替换 （跳转路由不留历史记录）
8、$route 属性
path 路径
fullpath 全路径
href 链接
meta 元信息
params 参数
query 查询参数
hash 哈希值
name 名称
9、vuex组成部分
state 状态
mutations 改变方法（唯一可以执行修改数据）
actions 异步方法  （执行异步操作）
getters 获取器
module 模块
namespaced:true 命名空间
10、vuex映射方法
computed 计算属性
mapState,mapGetters
methods 方法
mapMutations ,mapActions
11、$store属性和方法
$store.state数据
$store.getters 获取器
$store.commit 执行mutations方法
$store.dispatch 执行actions方法
12、post请求
1.axios.post (

     url,

     "name=xiaoli&age=18",

     {headers:

          {'Content-Type':"application/x-www-form-urlencoded "}

    }

)

2、axios.post (

url,

{name:"xiaoli",age:18},

{headers:

      {'Content-Type':"application/json "}

  }

)

13、get请求
1、axios.get (" url ? name=xiaoli & age=18 " )

2、axios.get( url, {params : { name:"xiaoli",age:18 } } )

3、axios({
        url，

        method:"get",

       params:{name:"xiaoli",age:18}

   })

14、vue导航守卫方法

•     1、vue全局导航守卫方法

  • router.beforeEach((to,from,next)=>{
                   next(true)
     }) 进入前

  • router.afterEach(to,from,next) 离开前

• 2、三个vue组件内部导航守卫方法

  •  beforeRouteEnter 进入前（没有this）
  •    beforeRouteLeave 离开前
  •  befpreRouteUpdate 更新前     

15、8个vue生命周期钩子函数
beforeCreate 创建前
created 创建完毕 （异步ajax，定时器，事件注册）
beforeMount 挂载前
mounted 挂载完毕 （$refs 操作dom）
beforeUpdate 更新前
updated 更新完毕
beforeUnmount 卸载前 （移除事件监听，移除定时器）
unmounted 卸载完毕
16、 vue3项目启动方式
（main.js）

import App from './App.vue'

import store from './store/index.js'

import router from './router/index.js'

import {createApp} from 'vue'

createApp(App).use(store).use(router).mount("#app")