vue中工作总结-持续更新
1.vue中数据向下传递时，无法使用@close方法清除
原因：传递的时候需要进行一波深拷贝
方法：JSON.parse(JSON.stringify(obj))
2.表格选择的时候无法再次点击取消
使用elementui的时候有选中按钮@row-click="aaa"接下来复写aaa方法
aaa(row){
this.selectRadio = row.id == this.selectRadio?false:row.id
this.selectObj = this.selectRadio?row''
}3.监听工作使用方法
// watch能监听
var vue = new Vue({
data:{
a:1,
b:[],
c:{
d:2,
e:"3"
},
firstName: ''
},
methods:{
clickMethod(){
this.c.f=4 // 通过点方法给对象添加属性，这时候watch监听不到变化
this.$set(this.c,"f",4) // 通过$set方法添加属性，watch能监听到变化
}
},
watch:{
// 当a的值发生改变时触发
a:function(val,oldVal){
console.log('new:%s,old:%s',val,oldVal)
}，
// 数组长度发生变化时触发
b:function(val,oldVal){
console.log('new:%s,old:%s',val,oldVal)
}，
// 对象中的属性值发生变化时触发
c:{
handler: function (val, oldVal) {
console.log('new:%s,old:%s',val,oldVal)
},
deep: true // 深度监听，监听到更深层级值的变化
},
// 深度监听对性能影响较大，修改c里面任何一个属性都会触发这个监听器里的 handle。可以做如下处理：
‘c.d': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
},
// 上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
immediate: true
}
}
})4.父传子
//父页面中引用的子组件
<Son :msg="aaa" :user="bbb"></Son>//aaa和bbb是数据或数组，可传多个
//子组件页面接受
props:['msg','user']//data之外
//子页面引用
<p>{{msg}}<p>
<p>{{user}}<p>//父组件中引入子组件，并且加入ref方式
<Son :ref="aaa"></Son>
//方法中传值进去
this.$refs.Son.name="ccc"
//子组件中要有name这个字段5.子传父
//子方法里面写入
this.$emit('add',this.selectObj)
//父组件里面写入
<Son @add='addData'></Son>//add对应方法起的名字
//父方法里面获取并使用方法
addData(data){
this.name=data.name
}6.使用Axios调用接口
//首先引入
import myAxios form 'Axios的地址'
//方法
export const aaa = (data) =>{//aaa是这个方法起的名称data是传入的值
return myAxios ({
url:接口的地址,
method:'post',//这里是看你的方法是post还是get
data,//get就使用params:data
})
}7.深拷贝数据方法（这里用在查询按钮中）
//查询方法
searcInfo(){
let data = this.form
data['id'] = this.id
data['name'] = this.name
aaa.bbb(data).then((res)=>{//aaa和bbb分别是引入的js文件和js文件中的方法名
this.tableData = []
this.tableData = res.data.list
})
}
//深拷贝处理
submitForm(){//点击查看的时候触用的方法
this.pageNum = 1
this.pageSize = 10
this.form = deepCopyObject(this.form)//deepCopyObject是封装引用的方法
this.searcInfo()//换更新个form数据来调用
}
//deepCopyObject的方法
export function deepCopyObject(obj){
var res = JSON.parse(JSON.stringify(obj))
return res
}
注：深拷贝是拷贝了一个堆粒子数据，不会受其他的影响。浅拷贝的话数据会受其影响浅拷贝，
只拷贝了数据对象的一层数据，拷贝后的数据与原始数据还是有关联数组的concat、slice,对象的assign拷贝8.VUE中多选框是否选中做操作
//使用v-model绑定，会自动赋予true(选中)或flase（未选中）
<el-checkbox c-model="check" @change="click()">
//data的return中加上check
//写方法判断
click(){
if(this.check==true){
this.$alert("选中")
}else{
this.$alert("未选中")
}9.动态组件/动态数据ES6写法
//原理：使用（：is）来实现数组转换
<div id="app">
<button @click="changeComponent('coma')">coma</button>
<button @click="changeComponent('comb')">comb</button>
<button @click="changeComponent('comc')">comc</button>
<component :is="com_name"></component>
</div>
<script>
var coma = {
template: '<div>aaaa</div>'
}
var comb = {
template: '<div>bbbb</div>'
}
var comc = {
template: '<div>cccc</div>'
}
let vm = new Vue({
el: '#app',
data: {
com_name: 'coma'
},
components: {
coma: coma,
comb: comb,
comc: comc,
},
methods: {
changeComponent: function(name) {
this.com_name = name
}
}
})
</script>//动态数组
//原本需要拼接判断的数据：
if(this.canshu=='001'){
this.$refs.son001.open()
}
if(this.canshu=='002'){
this.$refs.son002.open()
}......
//现修改为：
let a = "son"+this.canshu
this.$refs[a].open()10.字符串的拼接与删除
//字符串部分新增使用的是直接在后面添加配置：
this.data = this.data + ",002"
//字符串的删除我其实是使用了替换的方式replace()
let a = new RegExp(",002")
let a1 = this.data.replace(a,"")//a后面的""是你要替换成的数据，我这边做删除操做，所以传空
this.data = a1
//除此之外，删除方法还有slice()
var str = "hello hgbhggfj!";
console.log("原始字符串是："+str); // 原始字符串是：hello hgbhggfj!
console.log("删除字符串的第一个字符："+str.slice(1)); // 删除字符串的第一个字符：ello hgbhggfj!
console.log("删除字符串的最后一个字符："+str.slice(0, str.length - 1)); // 删除字符串的最后一个字符：hello hgbhggfj
//除此之外，删除方法还有substring()
var str="aabbccdd";
console.log(str.substring(4));
//除此之外，删除方法还有拆散去除然后再拼接重组
var str = "abcdaabbssaaa";
var a = str.split("a").join("");
console.log(a); // bcdbbss11.VUE中函数的执行顺序
执行顺序beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created
//例：如果在data中定义一个方法A在Methods中也定义一个A，在执行的过程中会报错Methods的方法未定义，因为Data中的A替换掉了Methods中的A
12.清空新增表单校验方法
this.$refs.form.resetFields();在使用resetFields()方法时必须满足以下的条件：
1、在表单中使用ref : ref=“form”
<Form ref="form" :model="formData" label-position="right" :label-width="100">
<Row>
<Col span="6">
<FormItem label="文档编号" prop="dtno">
<Input v-model="formData.dtno"></Input>
</FormItem>
</Col>
</Row>
</Form>13.在title中动态传值进入
<xxx :title="’这里进行传值‘+title">
data () {
return {
title:''//父页面传入或者自写数据
}
}14.阻止按钮和行同时触发某个方法
openDetail(row,column) {
//column存在的话，说明是点击行触发；
//column不存在的话，说明是点击详情按钮触发；
//判断是否是在操作列点击
if(column && column.label=='操作'){
return;
}
this.detailVisible = true;
},//加上.native.stop
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
type="text"
size="medium"
@click.native.stop="editTable(scope.row)"
>编辑</el-button
>
<el-button
type="text"
size="medium"
@click.native.stop="delTable(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>15.el-select中@change事件返回对象方法
<el-select v-model="form.dutyHeader" placeholder="请选择" style="width: 100%;"@change="changeOnDutyHeaderBB">
//方法
changeOnDutyHeaderBB(data){
console.log(data)//data一般为绑定的vaule值
}16.提交验证判断
1.1在页面中引入js验证包，并在rules中书写对应方法
<el-form :rules="rules">
<xxx v-model='form.protocolId' xxx>//因为在form里面做判定，所以用v-model绑定form里面的参数就好
</el-form>
import * as validate form '@/xxx/validate.js'//引入多的判断js
var isNum = validate.isNum
rules:{
protocolId: [
{ required: true, message: '请选择解析协议', trigger: 'blur'},
{ validator:isNum,trigger: 'blur'}
],
},1.2 validate.js验证
export const isNum =(rule, value, callback) => {
if (value<0) {
callback("请输入大于等于0的数");
}
callback();
};1.3校验及清除校验方法
this.$refs.form.validateField('protocolId', (valid) => {
//valid返回的是规则集中写的错误提示信息，如果满足条件，返回的就是空
if(!valid){
return
}
})
this.$refs.editFormRef.resetFields();//清除校验方法，建议用这个，这个也可以清除表单
//this.$refs.form.clearValidate();清除校验方法17.es6合并对象的方法
1.1.利用“Object.assign()”方法，语法“Object.assign(obj1,obj2,obj3)”；
let obj1 = {a: 1}
let obj2 = {b: 2}
let obj3 = {b: 3, c:4}
let obj = Object.assign(obj1, obj2, obj3)
console.log(obj, obj1, obj2, obj3)
//输出
{a: 1, b: 3, c: 4} {a: 1, b: 3, c: 4} {b: 2} {b: 3, c: 4}1.2.使用扩展运算符
let obj1 = {a: 1}
let obj2 = {b: 2}
let obj3 = {b: 3, c:4}
let objTwo = {...obj1,...obj2,...obj3}
console.log(objTwo, obj1, obj2, obj3)
//输出
{a: 1, b: 3, c: 4} {a: 1, b: 3, c: 4} {b: 2} {b: 3, c: 4}18.获取到数组进行拆分并循环在首字母前添加一个字符'K'
function(val){
//val为传过来的需要拆分的字符串
let KMain = 'K'
let Data = val.split(",")//以“，”将这个字符串进行拆分为数组
let arr = Data.map((item)=>{
return KMain+item
})
console.log(arr)
},19.血泪教训，使用checkbox的时候记得看要不要使用checkbox-group
<template>
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkedCities: ['上海', '北京'],
cities: cityOptions
};
}
};
</script>
//主要是跟checkbox-group里面的v-model里面绑定的数组有关
//<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>中的lable和key可以变为固定的字符串
20.强制失焦方法，有的按钮点击了以后还会显示原来的颜色
//用来强制失焦
if (event.target.nodeName === 'SPAN') {
event.target.parentNode.blur()
} else {
event.target.blur()
}21.table实现多选框
<el-table
:data="tableData2"
border
style="width: 100%"
ref="checkTable"
@selection-change="handleSelectionChange"
ref="textDocRef"
@row-click="textRowClick"//行点击事件
>
<!-- 在type="selection的列里添加selectable参数,通过函数返回true或false可以设置是否可选" -->
<el-table-column
type="selection"
:selectable="handleDisable"
width="55">
</el-table-column>
.
.
.
</el-table>
methods: {
handleSelectionChange(val) {
console.log('选中的表格', val)
this.list = val
},
textRowClick(row) {
this.$refs.textDocRef.toggleRowSelection(row);
},
// 删除,取消表格选中
removeName(item) {
const arr = this.tableData.filter(sub => { return sub.id === item.id }) // 取消当前表格里的选中状态时,用表格里的数据
const row = arr.length ? arr[0] : item
// console.log(item, row)
this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(row, false)
},
}22.数据改变，但页面未变化
1.强制刷新 this.$forceupdate()
2.直接替换数据 this.tableData.splice(0,1,data)23.页面打开深入传值问题
this.$nextTick(function() {
this .$refs.belongorgSelect.belnotallow=this .form.belongorgName
this.$refs.selectArea.selectedArea=this form.areaCode
})
// let that = this
// this.$nextTick(()=>{
//that.$refs.selectBank.bankName=that.form.bankHeadName//
})24.验证方法
//在data里面写验证方法
const secondRules = (rule, value, callback) => {
if (this.form.accounts!=this.form.secondAccounts)
callback(new Error(两次账号输入不一致!))
}else {
callback()
}
}
//rules中引用验证
rules：{
secondAccounts:[{validator: secondRules, trigger: "blur'}]
}
//rules记得绑定
<el-checkbox v-model="data" :true-label="1" :false-label="0"></el-checkbox>
<el-checkbox v-model="data" :true-label="1" :false-label="0"></el-checkbox>26.vue中删除行和新增行方法
//新增行push方法
//比如你有个数组，叫data[id:'',index:'0']，然后你在新增的方法里面里面这样写
add(){
var addData={
id:'',
index:this.data.length
}
this.data.push(addData)
},
//多行删除
delete(){
const q = this.list.map(item=>item.index)//this.list为选中的集合，这个方法是从选中的集合中拿出选中index为一个数组
var b = b.filter((item)=>!q.includes(item.index))
}//单行删除
//传入的方法
<template slot-scope="scope">
<el-button
@click="delete(scope.$index)"
>
</el-button>
<template>
delete(index){
this.data.splice(index,1)
}27.productionSourceMap失效
module.exports = {
productionSourceMap: false,
publicPath:"auto",
...
...
chainWebpack(config) {
// config.devtool('source-map') 这样写会不生效
// 正确写法以下方形式为准，判断一下环境
config.devtool(process.env.NODE_ENV ===
"production" ? false : 'source-map');
// 或者
config.devtool(config.mode === "production" ? false : 'source-map');
}
}28.vue过滤器filter的用法
const aaa = reactice({data[
{
value:'1',
text:"这是1"
},
{
value:'2',
text:"这是2"
},
{
value:'3',
text:"这是3"
},
]})//利用一个list集合来过滤信息
//使用
const data = ref('1')
const textData = aaa.filter((item)=>(aaa.data.value == data.value))[0].text© 版权声明
文章版权归作者所有，未经允许请勿转载。
