Vue 笔记

1.模拟点击

this.$refs.button.click(); 第一步给元素添加 ref 第二步触发点击事件 this.$refs.refName.click();

2.input文字输入限制

IOS不能触发input标签的@KeyUp事件 但能触发@input事件
<input class=“login-user” type=“text” placeholder=“请输入手机号” v-model=“userName” @input=“onKeyUp”>
onKeyUp:function(){ //禁止input框输入汉字
var self = this;
self.userName=self.userName.replace(/[^\w./]/ig,’’);
},

3.【转义字符】HTML 字符实体< >: &等

传入一个包含< &gt: &等字符的字符串转译出HTML标签的文本
unescapeHTML: function(a){
a = “” + a;
return a.replace(/</g, “<”).replace(/>/g, “>”).replace(/&/g, “&”).replace(/"/g, ‘"’).replace(/’/g, “’”);
},
地址链接:https://www.cnblogs.com/LiuLiangXuan/p/5212155.html

4.vue项目利用vue-clipboard2实现剪切板的功能

安装vue-clipboard2插件：npm install --save vue-clipboard2
main.js添加
import VueClipboard from ‘vue-clipboard2’
Vue.use(VueClipboard)
{{message}}
复制分享链接
copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调

5. 过滤器

filters 与methods平级
{{number|numFilter}}
filters: { //过滤器
numFilter(value) {
// 截取当前数据到小数点后两位
let realVal = Number(value).toFixed(2);
// num.toFixed(2)获取的是字符串
return Number(realVal);
}
},

filters: { //过滤器
strFilter(value) {
// 截取当前数据到30个字符长度,大于30长度的显示…
if(value&& value.length > 30) {
value= value.substring(0,30)+ ‘…’;
}
return value;
}
},

//秒转换为年与日
filters: { //过滤器
numFilter(value) {
value = value*1000
value = new Date(value);
value = value.toISOString().substring(0, 10) + ‘’ + value.toTimeString().substring(0, 9)
return value;
}
}

6.离开页面时执行的函数

destroyed 与methods平级
离开
destroyed: function () {
if(this.timer) { //如果定时器在运行则关闭
clearInterval(this.timer);
}
},

7.弹性布局

flex-direction: column; //纵向布局
flex-direction: row; //横向布局
.limit {display: flex;flex-direction: row;
.limit1 {flex: 2;}
.limit2 {flex: 1;}
.limit3 {flex: 1;}
}

8.前端生成二维码

1，导入第三方插件
npm install qrcodejs2 --save
2，在页面上引入插件
import QRCode from ‘qrcodejs2’

二维码位置

methods: { qrcode () { let qrcode = new QRCode('qrcode', { width: 100, height: 100, // 高度 text: '56663159' // 二维码内容 // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas） // background: '#f0f' // foreground: '#ff0' }) console.log(qrcode) } }, mounted () { this.qrcode() }

9.移动端h5图片下载

主要是通过a标签的download属性，设置为img，href设置为后端或者当前所需要下载的路径。代码如下：
< a href=“https://www.vitian.vip/Public/img/home/banner2.jpg” download=“img” >
</ a>

10. 时间戳 毫秒 转 年月日

showingExpirationDate (date) { //date 时间戳 毫秒
var today = new Date(date)
// return today.toISOString().substring(0,10);
return today.toISOString().substring(0, 10) + ’ ’ + today.toTimeString().substring(0, 9)
},