阅读 4193

深入前端学习原来这么有趣 第6期

最近做的项目是从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);
复制代码

写作心得感悟:

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

往期回顾:

深入前端学习原来这么有趣 第5期

深入前端学习原来这么有趣 第4期

深入前端学习原来这么有趣 第3期

深入前端学习原来这么有趣 第2期

深入前端学习原来这么有趣 第1期

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

公众号二维码

关注下面的标签,发现更多相似文章
评论

查看更多 >