Customize configuration
项目打包 新建vue.config.js文件
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir:'static'
}
使用命令打包 npm run build
或者使用vue ui 在浏览器上打包
日期格式化
添加过滤器 filters
element ui 表单验证
第一种常用方式:表单上加rules{object}
<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form">
<el-form-item label="姓名" prop="visitorName">
<el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="cardCode">
<el-input v-model="formData.cardCode" :maxlength="18" placeholder="请输入身份证号" clearable></el-input>
</el-form-item>
</el-form>
这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则
data() {
return {
formData: {
visitorName: '',
cardType: 1,
cardCode: ''
},
rule: {
visitorName: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
{
required: true,
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: '姓名不支持特殊字符',
trigger: 'blur'
}
],
cardCode: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ min: 15, max: 18, message: '请如实填写18位号码,以供学校保卫科核对', trigger: 'blur' },
{
required: true,
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '请输入正确的身份证号码',
trigger: 'blur'
}
]
}
}
}
子组件给父组件传值
子组件 <input @click="sendMsg" type="button" value="给父组件传递值">
data () {
return {
//将msg传递给父组件
msg: "我是子组件的msg",
}
},
methods:{
sendMsg(){
//func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
this.$emit('func',this.msg)
}
}
子组件通过this.$emit()的方式将值传递给父组件
父组件 这里的func是父组件中绑定的函数名
<child @func="getMsgFormSon"></child>
methods:{
getMsgFormSon(data){
this.msgFormSon = data
console.log(this.msgFormSon)
}
}
解决浏览报路由错NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}]
thah.$router.push({
name: "shopping",
params: {
state: 3
}
}).catch(); 添加catch()方法
<!-- 高本的路由需要重写router方法 -->
// 重写路由
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error => error)
}
解决跳转相同路由不能刷新的问题
在路由跳转的时候加上一个时间戳:
this.$router.push({
name:"...",
query:{
t: Date.now(),
},
})
然后在router-view上加上key属性,值为这个时间戳:
<router-view :key="$route.query.t" />
element ui 表头样式设置
<el-table :data='userList' style="width:100%;" border :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
:header-cell-style="{background:'#F5F7FA',color:'#606266'}" 就是设置表头背景颜色
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
使用axios 需要先使用qs将数据转换
生命周期
beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件
created vue实例的数据对象data有了,$el还没有 结束loading、请求数据为mounted渲染做准备
beforeMount vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。 ...
mounted vue实例挂载完成,data.filter成功渲染 配合路由钩子使用
beforeUpdate data更新时触发
updated data更新时触发 数据更新时,做一些处理(此处也可以用watch进行观测)
beforeDestroy 组件销毁时触发
destroyed 组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 组件销毁时进行提示
调用百度地图
https://dafrok.github.io/vue-baidu-map/#/zh/index API地址
axios 发 post 请求,后端接收不到参数的解决方案
问题原因
要点1
原因就是这次的接口使用 java spring mvc
并且在这个方法上使用了注解 @RequestParam
问题2 请求头的问题 'Content-Type': 'application/x-www-form-urlencoded'
那么这个是什么意思呢,这个是只能从请求的地址中取出参数,也就是只能从 username=admin&password=admin这种字符串中解析出参数。
解决方案一
【用 URLSearchParams 传递参数】
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
method: 'post',
url: '/api/lockServer/search',
data: param
})
需要注意的是: URLSearchParams 不支持所有的浏览器,但是总体的支持情况还是 OK 的,所以优先推荐这种简单直接的解决方案
解决方案二 引入 qs ,这个库是 axios 里面包含的,不需要再下载了。
解决方案三 axios({
url: '/api/lockServer/search',
method: 'post',
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return Qs.stringify(data)
}],
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
},
data: {
username: 'admin',
pwd: 'admin'
}
})
解决方案四 【重写一个 axios 实例,重新实现属于我们自己的 transformRequest】
解决方案五
axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");
解决方案六
我们知道现在我们服务端同学接收参数用的是 @RequestParam(通过字符串中解析出参数)
其实还有另一种是 @RequestBody(从请求体中获取参数)。
解决element 表格组件 固定列错位
<el-table ref="multipleTable"
that.$nextTick(() => {
that.$refs.multipleTable.doLayout()
})