最近做的项目是从0开始采用Vue作为数据驱动框架。所以有很多Vue实战上的经验体会,下面就专门拿几个常用的但难度不高的VUe功能说一下:
1.阻止事件冒泡:
上面的大概就是典型的需要对冒泡处理的一种业务了,单击商品查看详情界面,单击查看进度进入进度界面。如果不做冒泡处理单击查看进度的时候就会触发父级事件,有可能进入商品详情界面,类似代码如下:
<div @click="detailTap">
......
<div @click="planTap">查看进度</div>
</div>
复制代码
不想单击palnTap的时候也执行detailTap,只需要将查看进度的单击事件修改成如下代码即可:
<div @click.stop="planTap">查看进度</div>
复制代码
原生代码处理方式:
function planTap (event) {
event.preventDefault();
}
复制代码
2.Vue对象新增属性修改不会触发页面数据刷新
// 以下代码不是完整可运行的代码,请不要不做处理直接运行。
<div>{{item.age}}</div>
<div @click="aclick">单击</div>
new Vue({
data: {
item: {}
},
methods: {
aclick: function () {
this.item.age = 18;
}
}
})
复制代码
处理方式也比较简单,只需要处理一次即可。后续无需在做这种处理,处理方式代码如下:
this.$set(this.item, 'age', 18);
复制代码
3.filter的妙用
filter可以是非常强大的功能,可以帮你简化很多的工作量:
我们业务要求所有的单位都必须保留俩位小数,不管有没有值,但是后台传过来的数值都是没有这么加工过的,所以需要前台自己加工有了filter做一些简易的处理就可以完成:
<div>{{price | numTo2}}</div>
复制代码
就是在渲染的数据后面用|隔开添加上你设置的filter函数即可,他不会改变数据的值,但是却可以让得到保留俩位小数的显示效果,相关的filter函数代码如下:
Vue.filter('numTo2', function (value) {
if (value == null || value == undefined || value == '') {
return value
} else {
return value.toFixed(2)
}
})
复制代码
还有一个非常常见的场景就是处理时间,后台传过来的时间基本上都是yyyy-MM-dd HH:mm:ss这种格式的,你可能只想展示年月,或者是年月日等等。用了filter就非常简单了
4.往Vue对象上添加自定义的方法
这个还是简单粗暴的,Vue是一个对象,对象都有原型,也就是直接扩展Vue的原型即可:
Vue.prototype.方法名 = function () {}
复制代码
微信商城难点1:不按套路的返回
手机端的网页操作机制跟PC端的操作机制是不一样的,PC端很少能够用到返回键,因为能够打开新的界面,可是手机端不能,并且操作返回键非常频繁,像history.back()功能太多简单不足以处理太多的复杂场景例如:
商品界面->支付界面->支付成功界面->返回到商品界面
这个单纯的history.back()是没法实现的,像微信小程序,他一共给开发者提供了五种不同的跳转方式,能够满足大部分场景,可是web是不支持的。所以在遇到上面情况的时候你需要监听返回事件,自己跳转返回界面。但是这个样子会陷入返回死循环,所以我想到了俩种处理方式:
- 1.监听所有界面的返回,彻底的掌管返回事件
- 2.存在复杂应用场景的还是少数,可以单独处理,使其在返回的时候直接关闭整个微信内网页
// 相关代码:
Vue.prototype.$historyBack = function (url) {
pushHistory();
window.addEventListener("popstate", function(e) { //回调函数中实现需要的功能
// alert("我监听到了浏览器的返回按钮事件啦");
window.location.href = url; //在这里指定其返回的地址
}, false);
function pushHistory() {
var state = {
title: "我的合同",
url: "#"
};
window.history.pushState(state, state.title, state.url);
}
};
// 使用方式:
this.historyBack(url);
复制代码
写作心得感悟:
不知道从什么时候开始,我开始发现随便听一首歌需要花钱,随便看一个视频需要花钱,随便看一篇文章需要花钱。随着信息的传播越来越方便,对内容的质量就越来越看重了,越来越的平台开启了赞赏功能,刺激作者写出更多优质的文章。我感觉知识付费的时代已经来临,任何一个领域的技术人员都应该掌握知识变现的本领。
往期回顾:
感觉文章有趣可以关注我的公众号吵吵日记: