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); // bcdbbss

11.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记得绑定

25.element-ui checkbox 设置选中为1，未选中为0

<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