Vue 小API大妙用

最近做的專案是從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);
複製程式碼