Vue 小API大妙用

时间 2019-11-29

标签 vue api 妙用繁體版

原文原文链接

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

1.阻止事件冒泡：

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

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

<div @click="detailTap">
            ......
        <div @click="planTap">查看进度</div>
    </div>
复制代码

不想单击palnTap的时候也执行detailTap，只须要将查看进度的单击事件修改为以下代码便可：小程序

<div @click.stop="planTap">查看进度</div>
复制代码

原生代码处理方式：微信小程序

// 一、w3c标准方法：event.stopPropagation()
// 二、IE则使用：event.cancelBubble=true
// 三、兼容性写法
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能够是很是强大的功能，能够帮你简化不少的工做量:bash

咱们业务要求全部的单位都必须保留俩位小数，无论有没有值，可是后台传过来的数值都是没有这么加工过的，因此须要前台本身加工有了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就很是简单了dom

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);
复制代码

写做心得感悟：

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

往期回顾：

感受文章有趣能够关注个人公众号吵吵日记：