学习笔记-Vue2-3

其他

本地存储

• webStorage
  • localStorage
  • sessionStorage

订阅与发布

• pubsub-js
  • 组件间通讯

//import pubsub from 'pubsub-js'
// 订阅
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
    console.log('有组件发布了hello')
})
// 发布
pubsub.publish('hello','test')
// 取消订阅,一般卸载beforeDestory
pubsub.unsubscribe(this.pubId)

动画

• - .hello-enter-active - css默认 - 进入时动画效果 - .hello-leave-active - css默认 - 出去时动画效果 - .hello-enter - 进入起点 - .hello-enter-to - 进入终点 - .hello-leave - 离开起点 - .hello-leave-to - 离开终点
• - 多元素动画 - key
• animate.css
  • 第三方动画

代理配置

• vue.config.js

module.export = {
    // 开启代理
    devServer:{
        proxy:'xxx:xxx'
    }
}

module.export = {
    // 开启代理
    devServer:{
        proxy:{
            '/api':{
                target:'xxx'
            }
        }
    }
}

axios

• http请求

• npm i axios -S

  • import axios from ‘axios’
  • axios.get(url).then(function(response){},function(er){})
  • axios.post(url,data).then(function(response){},function(er){})
  • axios中无法用this访问vue的数据，将vue的this赋值给一个that，使用that方法

• axios并发请求

axios.all([
    axios.get('xxx'),
    axios.get('xxx')
]).then(
    axios.spread((res1,res2)=>{
        
    })
).catch(err=>{
    console.log(err)
})

• axios全局配置方案

axios.default.baseURL='http://localhost:8080/'
axios.default.timeout=500

• axios实例分装

let work1 = axios.create({
    baseURL:'xxx',
    timeout=5000
})

let work2 = axios.create({
    baseURL:'xxx',
    timeout=3000
})

work1.get('xxx')

• axios拦截器
  • 请求拦截器
  • 响应拦截器

axios.interceptors.request.use(config=>{
    console.log("xx");
    return config
}.err=>{
    console.log(err)
})

vue-resource

• 不推荐

// main.js
import vueResource from 'vue-resource'
Vue.use(vueResource)
// vue.$http

this.$http.get('xxx').then()

vuex

• 组件间通讯
• Vuex
  • Actions
  • Mutations
  • State

// main.js
// vue2使用vuex3
// vue3使用vuex4
import Vue from 'Vue'
import App from './App.vue'
import store from './store'

new Vue({
    el:'#app',
    render:h=>h(App)
    store:store
})

// this.%store

• src/store/index.js

// 该文件用于创建vuex核心store
// 调用
//this.$store.dispatch('add',1,2,3)
// 读取 全局变量
// this.$store.ssum
import Vue from 'Vue'
import Vuex from 'vuex'
Vue.use(vuex)
// 用于响应组件的动作
const actions = {
    // 各种操作方法
    add(context,value){
        console.log("actions中add被调用了",context,value)
        context.commit('ADD',value)
    },
    sub(context,value){
        context.commit('SUB',value)
    }
}
// 用于操作数据
const mutations = {
    ADD(state,value){
         console.log("mutations中ADD被调用了",state,value)
         state.sum += value
    },
    SUB(state,value){
        state.sum -= value
    }
}
// 存储数据
const state = {
    // sun num ... 
    sum:0
}

export default new Vuex.Store({
    actions,mutations,state
})

getters

import Vue from 'Vue'
import Vuex from 'vuex'
Vue.use(vuex)
// 用于响应组件的动作
const actions = {
    // 各种操作方法
    add(context,value){
        console.log("actions中add被调用了",context,value)
        context.commit('ADD',value)
    },
    sub(context,value){
        context.commit('SUB',value)
    }
}
// 用于操作数据
const mutations = {
    ADD(state,value){
         console.log("mutations中ADD被调用了",state,value)
         state.sum += value
    },
    SUB(state,value){
        state.sum -= value
    }
}
// 存储数据
const state = {
    // sun num ... 
    sum:0
}

// 用于加工state内的数据
// this.$store.getters.bigSum
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

export default new Vuex.Store({
    actions,mutations,state,getters
})

mapState&&mapGetters&&mapActions&&mapMutations

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

export default {
    name:'Count',
    data(){
        
    },
    computed:{
        //vuex中state数据  const state={sum:0,school:'',subject:''}
        //this.$store.state.sum
        //this.$store.state.school
        //this.$store.state.subject
        //...mapState({sum:'sum',school:'school',subject:'subject'})
        ...mapState(['sum','school','subject']),
        // this.$store.getters.bigSum
        ...mapGetters(['bigSum'])
    },
    methods:{
        //add(){this.$store.commit('ADD',xxx)}
        //sub(){this.$store.commit('SUB',xxx)}
        ...mapMutations({add:'ADD',sub:'SUB'})
        //add(){this.$store.dispatch('add',xxx)}
        //sub(){this.$store.dispatch('sub',xxx)}
        ...mapActions(['add','sub'])
    },
    mounted:{
        
    }
}

vuex模块化

import Vue from 'Vue'
import Vuex from 'vuex'
Vue.use(vuex)
// 求和相关配置
const countOptions = {
    namespaced:true,
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}
// 人员相关配置
const userOptions = {
    namespaced:true,
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}

export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        userAbout:userOptions
    }
})

// countAbout.xxx
// ...mapState(['countAbout','userAbout'])
// countAbout.x countAbout.b
// ...mapState('countAbout',['a','b'])

路由route

• 单页面web应用
• SPA
• vue-router
  • npm install vue-router -g
  • vue2
    • vue-router3
  • vue3
    • vue-router4

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
    el:'#app',
    render: h=> h(App),
    router:router
})

• src/router/index.js

// 专门用于创建应用的整个路由
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

export default new VueRouter({
    routes:[
        {
            apth:'/about',
            component:About
        },
        {
            apth:'/home',
            component:Home
        },
    ]
})

<router-link to='/about'>关于</router-link>
<router-link to='/home'>首页</router-link>
<!--指定组件的呈现位置-->
<router-view>
<!--路由组件一般放pages文件夹内-->
<!--路由切换，会销毁路由展示的当前组件-->
</router-view>

子路由

export default new VueRouter({
    routes:[
        {
            apth:'/about',
            component:About，
        },
        {   
            // 一级路由
            apth:'/home',
            component:Home,
            // 二级路由
            children:[
                {   
                    // /home/news
                    path:'news',// 这边不用/
                    component:News
                }，
                {
                    // /home/message
                    path:'message',// 这边不用/
                    component:Message,
                    
                }
                
            ]
        },
    ]
})

传递参数

query参数

export default new VueRouter({
    routes:[
        {
            apth:'/about',
            component:About，
        },
        {   
            // 一级路由
            apth:'/home',
            component:Home,
            // 二级路由
            children:[
                {   
                    // /home/news
                    path:'news',// 这边不用/
                    component:News
                }，
                {
                    // /home/message
                    path:'message',// 这边不用/
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
                
            ]
        },
    ]
})

• 跳转路由query参数，to的字符串写法
  • :to=“/home/message/detail?id=${a.id}&detail=${a.detail}”
  • this.$route.query.id
  • this.$route.query.detail
• 跳转路由query参数，to的对象写法
  • :to=“{path:‘/home/message/detail’,query:{id:a.id,detail:a.detail}}”

params参数

export default new VueRouter({
    routes:[
        {
            apth:'/about',
            component:About，
        },
        {   
            // 一级路由
            apth:'/home',
            component:Home,
            // 二级路由
            children:[
                {   
                    // /home/news
                    path:'news',// 这边不用/
                    component:News
                }，
                {
                    // /home/message
                    path:'message',// 这边不用/
                    component:Message,
                    children:[
                        {
                            // 需要配置好param占位符
                            name:'detail',
                            path:'detail/:id/:detail',
                            component:Detail
                        }
                    ]
                }
                
            ]
        },
    ]
})

• 跳转路由param参数，to的字符串写法
  • :to=“/home/message/detail/${a.id}/${a.detail}”
  • this.$route.params.detail
  • this.$route.params.detail
• 跳转路由param参数，to的对象写法
  • :to=“{name:‘detail’,params:{id:a.id,detail:a.detail}}”
  • to里面必须用name，不能用path

别名

 {
    // :to = "{name:'guanyu'}"
    // 多级路由可直接用别名跳转
    name:'guanyu',
    apth:'/about',
    component:About，
},

props

{
    // /home/message
    path:'message',// 这边不用/
    component:Message,
    children:[
        {
            // 需要配置好param占位符
            name:'detail',
            path:'detail/:id/:detail',
            component:Detail,
            // 第一种写法 props:{a:1,b:'Hello'}
            // Detail组件内增加props:['a','b']
            // 第二种写法 props:true
            // params参数以props方式传递给Detail
            // Detail组件内增加props:['id','detail']
            // 第三种写法
            // props($router){
                //return {id:$router.param.id,detail:$router.param.detail}
            //}
            props({query:{id,title}}){
                return {id,detail}
            }
        }
    ]
}

push&&replace

• 路由模式

  • push
    • 追加路由，可以退回到当前路由
    • 默认
  • replace
    • 替换当前路由，不能退回到当前路由

• replace

<!--默认push模式，replace模式不能退回-->
<router-link replace to="/about">About</router>

编程式路由导航

• push

this.$router.push({
    name:'xx',
    query:{
        id:m.id,
        detail:m.detail
    }
})

• replace

this.$router.replace({
    name:'xx',
    query:{
        id:m.id,
        detail:m.detail
    }
})

• back
  • 后退
  • this.$router.back()
• forward
  • 前进
  • this.$router.forward()
• go
  • 前进后退
  • this.$router.go(1) // 前进一步
  • this.$router.go(-1) // 后退一步

缓存路由组件

<!--缓存News组件,使News组件不被销毁，切回后还存在缓存-->
<!--<keep-alive inclued='News'> -->
<keep-alive :inclued='['News','Message']'> 
    <router-view> </router-view>
</keep-alive>

路由守卫

• 权限

  • 前置守卫
  • 后置守卫

• 全局

• 独享，只有前置，没有后置

• router.beforeEnter((to,from)=>{})

  • to.fullPath
  • to.path

• router.beforeEnter((to,from)=>{})

const router = new VueRouter({
    routes:[
        {
            name:'about'
            apth:'/about',
            component:About，
            // 路由元
            meta:{
                // 自定义属性
                isAuth:false,
                ttle:'关于'
            }
        },
        {   
            // 一级路由
            name:'home'
            apth:'/home',
            component:Home,
            // 二级路由
            children:[
                {   
                    // /home/news
                    path:'news',// 这边不用/
                    component:News,
                    // 独享路由守卫
                    beforeEnter:(to,from,next)=>{
                        
                    }
                }，
                {
                    // /home/message
                    path:'message',// 这边不用/
                    component:Message,
                    children:[
                        {
                            // 需要配置好param占位符
                            name:'detail',
                            path:'detail/:id/:detail',
                            component:Detail
                        }
                    ]
                }
                
            ]
        },
    ]
})
// 每一次路由切换前
// 全局前置路由守卫
router.beforeEnter((to,from,next)=>{
    // to.path
    // to.name
    // 可以根据条件放行
    next() 
})
// 后置路由守卫
router.beforeEnter((to,from)=>{
   document.title = to.meta.title
})

组件内部守卫

// 组件内,通过路由规则进入该组件
beforeRouteEnter(to,from,next){
    
},
// 组件内,通过路由规则离开该组件
beforeRouteLeave(to,from,next){
    
}

路由工作模式

• hash
  • 带/#/
  • 兼容性好
• history

new VueRouter({
    mode:'history'
})

打包

• build:“vue-cli-service build”
  • npn run build

ui组件库

• 移动端
  • vant
  • cube ui
  • mint ui
  • nut ui
• pc端
  • element ui
  • iview ui