VUE 开发杂货指南

前言：全文无逻辑顺序，也无关联，开发中遇到知识盲点/模糊点（当时的）有缘就来记一下

从后端到前端 ~

1、数据遍历时拿数据

<template slot-scope="scope">
       <el-button 
       		type="danger"
            @click="closeActivity(scope.row.id, scope.$index)">
            结束活动
       </el-button>
</template>

// scope.$index→拿到每一行的index
// scope.row→拿到每一行的数据

2、页面跳转以及传参取参

//页面跳转，并携带参数 id
location.href = `/createUserGroup?id=${this.groupId}`
window.open(url)
this.$router.push('/route')

//从 url 中取出参数
if(this.$route.query.id != null){   
        this.id = this.$route.query.id  //从url中那参数
        this.getUserGroup()
        }

3、单选按钮 el-radio 监听选中变化

<el-radio-group v-model="radioSex" @change="changeHandler">
    <el-radio class="radio" label="man">男</el-radio>
    <el-radio class="radio" label="woman">女</el-radio> 
</el-radio-group>
------------------------------------------------------------------------
methods: {
        changeHandler(value) {
            console.log('改变之后的值是:' + value)
        }
    }

4、页面刷新

//1、原始方法：
location.reload();

//2、vue自带的路由跳转：
this.$router.go(0);

5、日期格式转换

//监听定时段时间参数变化
        orderTimeChange(){
            this.form.orderTimeMin = this.orderTimes[0]
            this.form.orderTimeMax = this.orderTimes[1]
            var dateMin,dateMax;
            dateMin = new Date(this.form.orderTimeMin)
            dateMax = new Date(this.form.orderTimeMax)
            this.form.orderTimeMin = dateMin.getFullYear()+'-'+this.checkTime(dateMin.getMonth()+1)+'-'+this.checkTime(dateMin.getDate()+' '+this.checkTime(dateMin.getHours())+':'+this.checkTime(dateMin.getMinutes())+':'+this.checkTime(dateMin.getSeconds()));
            this.form.orderTimeMax = dateMax.getFullYear()+'-'+this.checkTime(dateMax.getMonth()+1)+'-'+this.checkTime(dateMax.getDate()+' '+this.checkTime(dateMax.getHours())+':'+this.checkTime(dateMax.getMinutes())+':'+this.checkTime(dateMax.getSeconds()));
        },
         checkTime(i){
            if(i<10){
            i = '0'+i
            }
            return i
            },
let timeTemp = moment(val).format('YYYY-MM-DD HH:mm:ss')
(dayjs)

6、数据不更新

this.$set(obj)
this.$set(item,'height',200)
this.$forceUpdate(obj)
this.$nextTick(()=>{……})

7、键盘监听

@keyup.enter.native = "option()" //回车键触发

import hotkeys from 'hotkeys-js'
hotkeys(
      'ctrl+z, command+z, ctrl+y, command+shift+z, ctrl+v',
      (event, handler) => {
        if (handler.key === 'ctrl+v') {
          this.paste()
        } else if (handler.key === 'ctrl+z' || handler.key === 'command+z') {
          this.$store.commit('poster/undo')
        } else {
          this.$store.commit('poster/redo')
        }
      }
    )//created
hotkeys.unbind('ctrl+z, command+z, ctrl+y, command+shift+z, ctrl+v')//destroyed()

8、组件常见的事件

// click	点击 Tag 时触发的事件
// blur	在 Input 失去焦点时触发
// focus	在 Input 获得焦点时触发
// change	仅在输入框失去焦点或用户按下回车时触发
// input	数据改变时触发
// hide	隐藏时触发
// show	显示时触发

9、数据转换

//转成两位小数的浮点数
parseFloat(str).toFixed(2) 
//字符串、数组
let str = "582563631792,582551399749,582313753586"
let arr = str.split(",")
console.log(arr) //[ '582563631792', '582551399749', '582313753586' ]
console.log(arr.join(",")) //582563631792,582551399749,582313753586
//数据深复制
newObj = JSON.parse(JSON.stringify(oldObj))

10、下一行弱校验

// eslint-disable-next-line

11、不显示滚动条滚动

element {
overflow-y: scroll;
}
element::-webkit-scrollbar {
  width: 0 !important;
}


// 优化滚动条样式
	width: 8px;
    height: 8px;
    opacity: 0;
    -webkit-transition: opacity 120ms ease-in-out;
    transition: opacity 120ms ease-in-out;

12、合并对象属性

Object.assign(target, ...sources)
将所有可枚举的属性值分配到目标对象上，若出现一样的属性名，以靠后的对象的属性值为准;

13、Boolean判断

空数组、空对象的 Boolean 值为 true ;
NaN 、 null 、 undefined 、0 为 false

14、鼠标悬浮时(光标)的样式

cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

15、css 数学计算 calc()

width: calc(100% - 50px);
//小于它父元素宽度 50px

---

持续更新中……

文章链接：

Vue 父子组件之间的通信传参

VUE动态加载子组件

nvm安装管理多个node.js版本

html 开发杂货指南