Vue 小API大妙用__Vue.js__前端__微信__微信小程序

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

最近做的项目是从0开始采用Vue作为数据驱动框架。所以有很多Vue实战上的经验体会，下面就专门拿几个常用的但难度不高的VUe功能说一下：

1.阻止事件冒泡：

冒泡图片

冒泡概念普及： 当单击事件在dom结构上存在父子关系时，单击子dom，不仅会触发子dom单击事件还会触发父dom单击事件。

上面的大概就是典型的需要对冒泡处理的一种业务了，单击商品查看详情界面，单击查看进度进入进度界面。如果不做冒泡处理单击查看进度的时候就会触发父级事件，有可能进入商品详情界面，类似代码如下：

    <div @click="detailTap">
            ......
        <div @click="planTap">查看进度</div>
    </div>

不想单击palnTap的时候也执行detailTap，只需要将查看进度的单击事件修改成如下代码即可：

<div @click.stop="planTap">查看进度</div>

原生代码处理方式：

// 1、w3c标准方法：event.stopPropagation()
// 2、IE则使用：event.cancelBubble=true
// 3、兼容性写法
function planTap (event) {
    if(event&& event.stopPropagation){
        event.stopPropagation();  //  w3c标准
    }
    else{
        event.cancelBubble = true;  // ie 678 ie浏览器
    }
}

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);

写作心得感悟：

不知道从什么时候开始，我开始发现随便听一首歌需要花钱，随便看一个视频需要花钱，随便看一篇文章需要花钱。随着信息的传播越来越方便，对内容的质量就越来越看重了，越来越的平台开启了赞赏功能，刺激作者写出更多优质的文章。我感觉知识付费的时代已经来临，任何一个领域的技术人员都应该掌握知识变现的本领。

往期回顾：

感觉文章有趣可以关注我的公众号吵吵日记：

公众号二维码