Vue实战问题记录

Vue 在 methods 中使用 filter 的方法

需求是 要格式化银行卡 我们项目用了一个 ui 组件库

1
2
3
4
// 众所周知 filter 是可以在dom里面的 但是需求就是各种个样 唉
<span>({{item.bdactp | cardtpFilter}})</span></p>

<popup-picker title="卡号" @on-change="handleBankCard" :data="cardList" v-model="cardNumber"></popup-picker>

于是找到了一个方法

1
2
3
4
5
6
this.$options.filters[filter](...args); //这种方法很简单,也很实用
//实践
bankList.map(item => {
arr.push(this.$options.filters['cardnoFilter'](item.bdacct)); // 如果要在methods里面用filter的方法 这样写
this.telNum = item.phonno;
});

Vue Object.defineProperty 最佳实践

Object.defineProperty ,顾名思义,为对象定义属性。在 js 中我们可以通过下面这几种方法定义属性:

1
2
3
4
5
6
7
8
// (1) define someOne property name
someOne.name = 'cover';
//or use (2)
someOne['name'] = 'cover';
// or use (3) defineProperty
Object.defineProperty(someOne, 'name', {
value: 'cover'
});

语法:
Object.defineProperty(object, propertyname, descriptor)
参数:
object 必需。 要在其上添加或修改属性的对象。 这可能是一个本机 JavaScript 对象(即用户定义的对象或内置对象)或 DOM 对象。
propertyname 必需。 一个包含属性名称的字符串。
descriptor 必需。 属性描述符。 它可以针对数据属性或访问器属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
最佳实践;
import Vue from 'vue';
const store = window.sessionStorage;
class StoreMethod {
set(key, val) {
if (key && typeof key === 'string') {
store.setItem(key, JSON.stringify(val));
}
return this;
}
get(key) {
const value = store.getItem(key);
if (typeof value !== 'string') {
return undefined;
}
try {
return JSON.parse(value);
} catch (e) {
return value || undefined;
}
}
remove(key) {
const val = this.get(key);
store.removeItem(key);
return val;
}
has(key) {
let result = false;
if (this.get(key) && this.get(key) !== 'undefined') {
result = true;
}
return result;
}
clear() {
store.clear();
return this;
}
}
Object.defineProperty(Vue.prototype, '$storage', {
value: new StoreMethod()
});
// 使用
let info = this.$storage.get('turnOut');

Vue 全局组件使用路由跳转

是在我写全局组件的时候发现了一个问题,我在组件里面要进行路由跳转,但是组件在 main.js 引入注册全局组件,我认为是在 vue 实例没有创建成功之前引入,导致全局组件里面访问不到 vue 引入的 router。 报错如下:

1
[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'push' of undefined"

当时也很纠结,还是自己技术差的原因。后来只需要在这个组件里面引入 router。就可以使用路由跳转了,代码如下:

1
2
import router from "../../router";
router.push({ path: "xxx" });

还是自己不够强,这种问题都能卡住。

小程序

本文标题:Vue实战问题记录

文章作者:Jonathon

发布时间:2018年07月18日 - 17:07

最后更新:2019年06月04日 - 15:06

原始链接:https://www.jonathon.cn/Vue实战技巧.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!