JS+Vue 常见用法（1）-- 一些常用方法

JS

返回上一页：

返回上一页

点击回到顶部

document.body.scrollTop = 0
document.documentElement.scrollTop = 0

a标签跳转锚点到页面指定位置

https://blog.csdn.net/wangweiscsdn/article/details/55100448

正则

 if (!patrn.test(this.inputValue)) {
          _g.toastMsg('warning', '场号必须是数字')
          return
        }
        let arr = this.inputValue.split('')
        if (arr.length !== 3) {
          _g.toastMsg('warning', '长度在3个字符')
          return
        }
        if (!this.inputValue) {
          _g.toastMsg('warning', '请输入场号/集号')
          return
        }

• 正则表达式纯数字校验 JS
  https://blog.csdn.net/wangming520liwei/article/details/53168140
• 判断数字是否为两位数
  https://blog.csdn.net/sinat_39417731/article/details/78266410

JS获取HTML DOM元素的8种方法

let odiv = document.getElementById('id')
odiv.style.color = '#000'

https://www.jb51.net/article/116460.htm

获取鼠标点击位置坐标

https://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html

js 点击事件

document.getElementById("jsOnClick").onclick = clickHandler2;

https://www.cnblogs.com/wenb/p/5956243.html

键盘按下事件（keydown）

$(document).keydown(function(event){
　if(event.keyCode == 13){
  　alert('你按下了Enter'); 
　}
});

https://www.cnblogs.com/pangpanghuan/p/6423204.html

js跳转页面与打开新窗口的方法

window.open("http://www.jb51.net"); //在另外新建窗口中打开窗口
window.location.href="http://www.jb51.net"; //在同当前窗口中打开窗口

https://www.cnblogs.com/lijshui/p/7451360.html

原生js动态添加元素标签及设置属性

https://www.cnblogs.com/cllgeek/articles/5859908.html

删除div中的内容 ，但是保留这个div

$('#test').empty(); //jQuery

https://zhidao.baidu.com/question/289778640.html

js 获取checkbox 所有选中的值

function show(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}

https://www.cnblogs.com/sunxirui00/p/7498014.html

ajax请求，返回值为304 Not Modified 错误原因与解决办法

https://blog.csdn.net/u011724770/article/details/54948748

Vue

vue 设置scrollTop不起作用

一定要加上this.$nextTick()方法

this.$nextTick(() => {
    document.getElementById('scrollUl').scrollTop = (this.hours - 2) * 48 + 100
})

https://blog.csdn.net/Coding_Jia/article/details/80778108

vue watch监听

watch: {
   isShow (new, oldval) {
      if (new == true) {
          this.id = 1
      }
  }
}

vue 的hover事件

具体参考：https://blog.csdn.net/sunshine_ping/article/details/80269707

textarea 失去焦点

https://blog.csdn.net/b671900/article/details/26251921

vue + setTimeout

setTimeout(this.end(),4000);

https://blog.csdn.net/qq_27295403/article/details/83375574

vue 路由配置

https://www.cnblogs.com/padding1015/p/7884861.html

Vue实现标签 href动态拼接，点击后使用新窗口打开网页

https://blog.csdn.net/sunhaobo1996/article/details/81272942

vue 一个方法同时请求多个接口，怎么控制顺序？在下一个接口获取前一个接口返回的值为空，怎么解决

https://blog.csdn.net/weixin_39818813/article/details/82464132
https://blog.csdn.net/qq_38627581/article/details/77353015

将v-for生成的input框数据用v-model绑定到一个数组

a{
  cur:[],
},   //把这个数组cur外面包个对象

v-model="a.cur[index]"

https://blog.csdn.net/TateBrwonJava/article/details/80616074

axios的get与post网络请求

       axios.get('/sys/user/login', {
               params: this.search
       }).then(function (response) {
                console.log(response);
       }).catch(function (error) {
                 console.log(error);
       })

          axios.post('/sys/user/list', this.search).then((res) => {
              console.log(res.data)
              if (res.data.code === 0) {
                  this.tableData = res.data.data
              }
          }).catch((error)=> {
          })

https://blog.csdn.net/qq_41115965/article/details/80780264

vue为一个元素绑定多个事件（分号隔开）

多个事件时，要加括号
如：@click="Click();click(2)"

https://blog.csdn.net/CWH0908/article/details/86687999

正确理解使用Vue里的nextTick方法

https://blog.csdn.net/qq_39517820/article/details/83684517

vue解析文本以后,换行丢失解决（v-html指令）

• {{additionalRules}}放在标签之间会有一个问题就是空格符号不会被识别,所以直接用的v-html指令进行替换

.cmm-wrapper{
  white-space: pre-wrap; //解决的关键就是这一句,
  line-height: 40px;
  color: #000032;
  font-size: 28px;
}

https://blog.csdn.net/qq_42833001/article/details/86551256

纯CSS3使用vw和vh视口单位实现自适应

http://caibaojian.com/vw-vh.html

移动web适配之--vh,vw,vmin,vmax

https://www.nihaoshijie.com.cn/index.php/archives/788/

html5浏览器less应用

https://www.cnblogs.com/WhiteM/p/6187102.html

js 当变量值为0，判断是否为空时（0==""）返回ture的问题

https://blog.csdn.net/fengsx0521/article/details/81239488

vue之登录和token处理

https://www.cnblogs.com/qdlhj/p/9844944.html

阻止事件冒泡用

@click.stop 点击子节点不会捕获到父节点的事件
https://blog.csdn.net/weixin_34315485/article/details/91387568

axios的delete写法

axios.delete({
  url: '/api/commodityCategory/delete',
  data: {
    "id":"a"
  }
})
.then(function(response) {
  console.log(response);
})
.catch(function(response) {
  console.log(response);
});

http://www.imooc.com/wenda/detail/512278

vuejs项目如何修改node_mudule为公用文件？

https://blog.csdn.net/qq_35393869/article/details/81283870

JS实现拖动图片

https://blog.csdn.net/qq_33665647/article/details/52089526

Vue使用watch监听路由的变化

watch:{
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
 }

https://blog.csdn.net/xukongjing1/article/details/82901054

粒子运动 particles.js 在vue中的使用

https://blog.csdn.net/zhy18820612/article/details/92770301

• particles.js 属性：

https://blog.csdn.net/lbPro0412/article/details/82417078

html2canvas 在Vue中的应用

• 在Vue中，html2canvas生成页面截图并上传
  https://www.cnblogs.com/steamed-twisted-roll/p/10496054.html
• html2canvas截图只能截到可视区域（clone）
  https://blog.csdn.net/zt_fucker/article/details/76583032
• html2canvas截图清晰度问题（scale）
  https://blog.csdn.net/qq_36459098/article/details/79803280
• 截图清晰度了解（没用过）：
  https://www.jianshu.com/p/96ce8a0df559
  https://blog.csdn.net/xdongll/article/details/55667071

canvas截图：

• 通过css设置canvas背景图片
  方法：将图片和canvas的尺寸设置相同，然后元素叠加
  https://blog.csdn.net/meiqi0538/article/details/82057055
• canvas实现视频截图（html）
  https://www.cnblogs.com/lillian0106/p/6925323.html
  https://blog.csdn.net/ffffffff8/article/details/84637895
• canvas 获取主色调
  https://blog.csdn.net/mengshang529/article/details/86316264
• canvas改变图片灰度

        var video = document.getElementById("video");
        var canvas = document.createElement("canvas");
        canvas.crossOrigin = "Anonymous"; // 跨域
        var context = canvas.getContext('2d');
        canvas.width = video.width;
        canvas.height = video.height;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      // 获取像素数据
      var data = context.getImageData(0, 0, canvas.width, canvas.height).data;
      var targetBitmap = context.createImageData(canvas.width, canvas.height);
      for (var i = 0; i < data.length; i += 4) {
        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2];
        var c = (r + g + b) / 3;
        targetBitmap.data[i] = c;
        targetBitmap.data[i + 1] = c;
        targetBitmap.data[i + 2] = c;
        targetBitmap.data[i + 3] = 255;
      }
      context.putImageData(targetBitmap, 0, 0);

下载文件到本地

 window.location.href = window.HOST + res.data

• res.data为后台返回的路径

下载图片或者视频到本地

• a标签

https://segmentfault.com/q/1010000010493203