Vue主要知识点1

devServer:{
    poroxy:{
        '/api':{//匹配以‘/api’开头的请求路径
            target:'http://localhost:8080',//代理目标的基础路径，只写到端口号
            changeOrigin:true,//控制请求头中的host
            pathRewrite:{'^/api':''}//匹配到以'/api'开头替换为空字符
        },
        '/api2':{......}//第二条规则
    }
}

changeOrgin设置为true，服务器收到请求头中host为自己的端口（欺骗）默认

changeOrgin设置为false，服务器收到请求头中host为代理的真实端口（不欺骗）

插槽：

让父组件向子组件指定位置掺入HTML结构，组件间通信，父=>子

1：默认插槽：子组件用<slot></slot>

2：具名插槽：

父组件在<template>中的slot属性定义名字

子组件中用<slot>中name属性使用具体名字插槽

3：作用域插槽：

父组件用scope属性或slot-scope定义作用域，

子组件用slot用：名="作用域名"

数据在组件自身，但根据数据生成的结构需要组件的使用者决定，

vuex共享数据

初始配置

多个组件需要共享数据时.vuex3兼容vue2，vuex4兼容vue3

下载vuex：npm i vuex@3 @几就是几版本的

1：创建文件：src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const action={}//响应组件的动作
const mutation={}//执行动作
const state={}//初始化数据
export default new Vuex.Store({
    actions.mutations.state
})

2:在main.js创建vm时传入stote配置项

import store from './store/index.js'
new Vue（{
    el:'App',
    render:h=>(App),
    store
}）

3:基本使用：

const actions={
    jia(context,value){
        console.log('JIA',value)
    }
},
const mutations={
    JIA(state,value){//在数据基础上加传递来的数据
        state.sum += value
    }
},
const atate={
    sum:0
}
export default new Vuex.Store({
    actions,mutations,state
})

组件读取vuex的数据：$store.state.sum sum是数据名

组件修改vuex的数据，$store.dispatch('actions中的方法名，数据')

$store.commit('mutations中的方法名，数据')

备注：若无网络或其他业务逻辑，组件中可越过actions。直接用commit 联系mutations

getters的使用

当state中的数据需要经过加工后再使用时可以使用getters加工

在store.js中追加getters配置

const getters={

bigSum(state){

return state.sum * 10

}

}

export default new Vuex.store({

.....,getters//暴露配置

})

四个map方法的使用

1：mapState方法：帮助映射state中数据为计算属性

...mapState({sum'sum,.....})//对象写法
...mapState(['sum',.....])//数组写法，名字一致时使用

2：mapGetters方法：帮助映射greers中的数据的计算属性

...mapGetters({bigSum'bigSum',.....})//对象写法
...mapGetters(['bigSum',.....])//数组写法，名字一致时使用

3：mapActions方法：帮助生成与actions对话的方法，包含：$store.dispatch函数

mathods:{
    ...mapActions({incrementOdd:'jiaOdd',...})//对象形式
    ...mapActions({'jiaOdd',...})//数组形式
}

4：mapMuaations方法：帮助生成与Muaations对话的方法，包含：$store.commit函数

mathods:{
    ...mapMutations({incrementOdd:'JIA',...})//对象形式
    ...mapMutations({'jJIA',...})//数组形式
}

Vuex模块化+命名空间

让代码更容易维护，让多种数据分类更加明确

修改store.js

const countAbout={
    namespaced:true,//开启命名空间
    actions:{},
    Mutations:{},
    state:{},
    getters:{},
}
const personAbout={....//同上}
const store =new Vuex.store({
    modules:{//组件名注册
        countAbout,
        personAbout
    }
})

1：命名空间开启后

读取state数据

直接读取：this.$store.state.模块名.lxxxx

借助mapState：...mapState('vuex模块名',['sum','....'] )

组件读取getters数据

直接读取：this.$store.getters[ '模块名/操作名' ]

借助mapGetters：...mapGetters(' 模块名',[ '操作名' ])

2：开启命名空间，组件中调用dispatch

直接dispatch：this.$stpre.dispatch('模块名 / 操作名',数据或数据对象)

借助mapActions：...mapActions('模块名',{本组件内事件名: actions中的操作名})

3：开启命名空间，组件中调用commit

直接commit：this.$store.commit('模块名 / 操作名，数据或数据对象)

借助mapMutations：...mapMutations('模块名'.{本组件事件名: mutations中的操作名})

优化文件：模块可以分成js文件分别放在store文件夹下，便于管理，但需要分别暴露和在index.js文件中都引入即可

vue-router

基本了解

vue的一个插件库，专门用来实现SPA应用

单页面Web应用，整个应用只有一个完整的页面

点击页面中的导航、链接，不刷新页面，只做页面的局部更新

是一对映射关系：（key：value）

后端路由：value是函数，用于处理客户端提交的请求

前端路由：value是组件，用于展示页面内容

路由

安装：npm i vue-router@3 默认版本为4

应用插件：Vue.use(VueRouter)

引入插件：import VueRouter from ‘vue-router’

编写router配置项，' router / index.js'

import VueRouter from 'vue-router'//引入VueRouter
import About form './components/About'//引入组件
import Home form './components/Home'//引入组件
export default new VueRouter({
    routes:[
        {path:'/about',component:About},
        {path:'/home,component:Home}
    ]
})

指定展示位置：<router-view></router-view>

实现切换样式：<router-view acttive-class='xxx'></router-view>

注意：

1：路由组件通常放在pages文件夹下，一般组件通常放在components文件夹下

2：通过切换“隐藏”了的路由组件，默认是销毁，需要时再挂载

3：每个组件都有自己的$routes属性，里面存放着自己的路由信息

4：整个应用只有一个router路由管理，可通过组件的$router属性获取到

多级路由(嵌套路由)

配置路由规则，使用children配置项

roets:[
    {path:'/about',component:About},
    {path:'/home',component:Home,children:[
        {prth:'news',component:News}//在子路由中不加 /
    ]}
]

跳转：要写完整路径，在 to=""内，并且加上父级路径

<router-link to='/home/news'></router-link>

路由的query参数

1：传递参数

<router-link to='/home...deta?id=6&title=7'>跳转</router-link>//字符串
<router-link :to=" `/home...deta?${id=xx.id} & ${title=x.title}`">跳转</router-link>//模板字符串，解析js
<router-link :to='{
    path:'/home.....',
    query:{id:x.id,title:x.title}
}'>跳转
</router-link>//to的对象写法

2：接收参数

(this).$route.query.xxx 在插值语法中，this可省略

命名路由

在router文件夹下的index.js文件内，使用一项name命名来简化路由的舔砖

1：name命名路由配置

{
    path:'/home',component:Home,children:[
        path:'/test',components:Test,children:[{
            name:'hello',path:'welcome',component:Hello
        }]
    }]
}

2：简化跳转

<router-link to='home/test/welcome'>跳转</router-link >//简化前


<router-link to='{name:'hello'}'>跳转</router-link >//简化后
<router-link to='{name:'hello',query:{id:xx,title:xxx}}'>跳转</router-link >//搭配传参

路由的params参数

1：配置路由，声明接收params参数

{
name:'xiangqinag',path:'date / :id / :title',component:'xxxx'//使用占位符声明接收的params参数
}

2：传递参数

<router-link to='home/test/welcome/666/你好'>跳转</router-link >//to字符串写法

<router-link :to='{

name:'xiangqing',

params:{

id:xxx,

title:xxxx

}

}'>跳转</router-link >//to字符串写法

注意：路由携带paiams参数，使用to对象写法，不能使用path配置项，必须使用name配置

接收参数：$toute.params.xxxx 写在展示组件内

路由的props配置

让路由组件更方便接收参数

{name:'xx',path:'xxxx',component:'xx',

1：props:{a:99}//该对象中所有的key-value通过props传给组件

2：props:true//布尔值，把路由收到的所有值由props传给组件

3：props:($route){//返回值每一组key-value由props传给组件

retuen {

id:$route.query.id,

title:$route.query.title

}

}

历史记录replace属性

控制路由跳转时操作浏览器历史记录的模式。浏览器有两种模式：push和replace

push：追加历史记录 replace：替换当前记录，不可返回路由默认为push

<router-link replace>跳转<router-link>//开起replace模式

编程式路由导航

作用：不借助<router-;link>实现路由跳转，让路由跳转更加灵活

在按钮、图片等事件内：

push(){//跳转有历史记录
    this.$router.push({
        name:'路由名',
        params:{...}
    })
},
replace(){//跳转无历史记录
    this.$router.replace({
        。。。。。
    })
}

历史记录进退的API：

this.$router.forward()

this.$router.back()

this.$router.go()//正数前进，负数后退

缓存路由组件

让不展示的路由组件保持挂载，不被销毁，可以缓存前进后退不消失

<keep-alive></keep-alive>
<keep-alive include="组件名"></keep-alive>
<keep-alive include="['xxx','xxx']"></keep-alive>

要包裹<router-view>这个标签

温柔你烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue主要知识点1

从基础知识到路由缓存组件等相关知识点的笔记
复制链接

扫一扫

专栏目录