vue基本相关笔记

vue-router

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const routes=[{
path:"/"
component:()=>import("路径")
}]
const router=new VueRouter({
    routes
})
export default router

app.vue引用

<router-view/>

main.js引用

import router from "路径"
new Vue({
router
})

通讯store

index.js

import Vue from "vue"
import Vuex from "vuex"
import tap from "top.js"
Vue.use(Vuex)
export default new Vuex.Store({
   modules:{
       tap
   }
})

top.js

export default({
    state:{
        data:""
    
    },
    mutations:{
        function1(state){
            return state.data=500
        },
        function 2(state,parameter){
        
        }
    
    }
})

引用

//常量引用
this.$store.state.top.data

...mapState({
   taps:(state)=>state.top.data
})

//方法的引用
this.$store.commit("方法名")
this.$store.commit("方法名",parameter)

axios二次封装

安装

npm install --save axios

二次封装

import axios from "axios"
const http=axios.create({
    baseURL:"/api",
    timeout:5000
})
http.interceptors.request.use(function(config){
    return config
},function(error){
    return error
})
http.interceptors.response.use(function(config){
    return config
},function(error){
    return error
})
export default http

index.js 使用

import http from "request.js"
const getList=()=>{
    return http.get("/getList")
}
export default {
  getList
}

解决跨域

//代理跨域  ,在vue.config.js添加
  devServer:{
  //设置子域名访问
    historyApiFallback : true ,
    allowedHosts :" all "
    proxy: {
      "/api": {
      //后台服务器地址
        target: "http://39.98.123.211",
       
      }
    }
  }

組件件方法调用

子调父

this.$parent.fatherMethod();

父调子

this.$refs.child.sing();

vue还原data初始数据

// 1、重置data中的所有数据
// 无论data中的数据如何改变，使用这句就可以恢复初始数据
Object.assign(this.$data, this.$options.data())
 
// 2、重置data中的某个值
// 只会让指定的这个数据被初始化，不会影响到data里的其他数据
// 用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined
this.formData = this.$options.data.call(this).formData

修改element ui的默认样式

通过/deep/，深度修改它的样式

/deep/ .el-card__body  {
    padding: 5px;
}

弹窗编辑时，不直接修改表格所使用的数据

1.使用临时数据进行编辑
this.tempData = { ...this.tableData[index] };

2.使用深拷贝进行编辑
this.editedItem = JSON.parse(JSON.stringify(item)); // 深拷贝数据项