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);
複製代碼