不求甚解 - VUE實踐

時間 2019-11-17

標籤不求甚解 vue 實踐简体版

原文原文鏈接

初衷

以前就是laravel自帶的blade加上jquery，配上boostrap。看前端都上Vue了，新頁面嘗試下，總結下體驗javascript

好處：表單操做變得方便了，簡化了動態渲染頁面的邏輯。
缺點：之前使用的js庫，在Vue的框架下，會有初始化的問題。目前都是在updated回調了從新初始化，不知道是否是正路。
未知：前端自動化工具及單文件組件，一直沒用。主要仍是隨便寫寫~

讓Vue工做

看到前端各類工具，頭就很大。最簡單使用Vue的方式就是直接引入vue.min.js，像引入其餘js庫同樣。而後就能夠按照官方的例子來個hello world頁面。到此，準備工做ok了。而後就要開始改變觀念，以前一直laravel的，因此前端頁面也比較依賴laravel的相關。用Vue的話，只好硬搞先後端分離，全部數據都暫有js來獲取php

QA

符號衝突

laravel默認使用的也是 {{}} 來表示變量，因此想一想仍是改Vue的吧，變成<% vue_variable %>前端

var hotelController = new Vue({
    el:'#hotelEl',
    delimiters: ["<%","%>"],
    ...
})

複製代碼

加載初始數據

遇到的第一個問題，什麼時候發頁面數據請求，怎樣控制頁面初始時的loading狀態vue

[v-cloak]來控制Vue初始頁面，不然頁面總會先看到一個Vue的變量在Vue初始化以前
定義一個loading變量來控制loading狀態。頁面數據請求好後，置loading爲false。
在created回調裏發起數據請求，使用了axios發發請求

Post請求

這多是vue最方便個人地方了，直接post vue裏的data，不用再關心form表單裏的字段設計. 後端直接處理json參數便可java

update_data : function(){
    var paras = JSON.parse(JSON.stringify(this.$data));//covert data to json
    axios.post(url,paras.hotel)
        .then(function(response){
            //parse response
        })
        .catch(function(error){
            //console.log(error)
        });
}
複製代碼

動態表單

之前的思路是，經過Jquery構造表單string，而後append到對應的div裏去。相對來講比較麻煩，調整樣式也蛋疼，如今經過控制Vue data來搞，基本就是arr.splice(index, 0, empty) 或者 arr.splice(index,1) 來改變數組大小，從而控制表單數目jquery

子控件傳遞數據

這個Vue官方有說，父到子經過props定義，子到父經過emit事件傳遞ios

<z-float-input-district 
    dom_id="district" 
    placeholder="區域" 
    name="district"
    v-model="hotel.location.district" 
    v-on:district_select="event_district">
    </z-float-input-district>
                                
                                
    Vue.component('z-float-input-district',{
        props:["placeholder","name", "value", "dom_id"],
        template: '<label class="form-group has-float-label">' +
        '<input :id="dom_id" class="form-control form_input" :name="name" :placeholder="placeholder" ' +
        'v-bind:value="value"' +
        'v-on:input="update($event.target.value)"/>' +
        '<span><% placeholder %></span>',
        mounted:function(){
            //...
        },
        data : function(){
            return {
                //...
            }
        },
        methods: {
            update:function(item){
                if(item.hasOwnProperty("district")){
                    this.$emit('input', item.district)
                    this.$emit('district_select', item)
                }
            }
        }
    });
複製代碼

Jquery修改的form表單，若是同步到Vue的data中

一般來講，用戶輸入修改的表單，能夠經過 v-model 實現雙向綁定，可是因爲一些遺留問題，仍然須要經過Jquery或者代碼的方式修改表單數據，好比使用了一個date-range-picker的第三方控件，此時就須要構造原生事件通知Vue了。laravel

helper_js_event : function(obj){
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('input', false, true);
    obj.dispatchEvent(evt);
}
複製代碼

當經過Jquery修改某個input時，再調用helper_js_event(input)來同步到Vue中vue-router

強制刷新

不知道爲何，就是不自動更新頁面，不求甚解的話，直接強制刷新this.$forceUpdate()json

複製數據

須要一個複製功能，可是複製Vue的data裏的數據，object和arr是deep copy，尷尬，須要本身實現一個clone功能

function clone(obj) {
        var copy;
        if (null == obj || "object" != typeof obj) return obj;

        if (obj instanceof Date) {
            copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }
        if (obj instanceof Array) {
            copy = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                copy[i] = clone(obj[i]);
            }
            return copy;
        }
        if (obj instanceof Object) {
            copy = {};
            for (var attr in obj) {
                if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
            }
            return copy;
        }

        throw new Error("Unable to copy obj! Its type isn't supported.");
    }
複製代碼

頁面返回時檢查是否保存

因爲表單數據較多，防止內容丟失，作一個詢問是否保存功能。

至於爲啥不自動保存，怕誤操做自動保存就回不去了。。。

原本想經過watch來監聽Vue data的變化的，發現有點問題，就是每次Vue data賦值完後會調用兩次watch，致使我沒法判斷data的初始狀態了，可是我watch一個簡單的變量行爲就是對的，多是data的結構太複雜了麼。。

不求甚解的方案，經過比較json串來判斷

//在每次保存數據成功後調用 last_json = this.helper_hotel_json()
window.addEventListener("beforeunload", function (e) {
        if(last_json != hotelController.helper_hotel_json()){
            var confirmationMessage = '離開以前請確認保存,不然更改信息會丟失的!!!';
            (e || window.event).returnValue = confirmationMessage; //Gecko + IE
            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
        }
    });
複製代碼

解析路由參數

須要用到vue-router，我用這個主要是要解析url參數，獲取一些配置信息

var router = new VueRouter({
        mode: 'history',
        routes: []
    });
var hotelList = new Vue({
        router,
        ...,
        created:function () {
            var hotel_id = this.$route.query.id;
        }
    )
}
複製代碼

for循環

//直接渲染
<div v-for="(item, index) in items">
    <% item %>
</div>

//數字，[ 1, 7 ]，注意從1開始的。。。
<div v-for="index in 7">
    <% index %>
</div>

//for循環不關聯dom元素，能夠作更多邏輯
<template v-for="(item, index) in items">
    <div>
        <% item %>
    </div>
    <div v-if="index % 4 == 3"></div>
</template>
複製代碼

頁面大小適配

好吧，有些控件要適配頁面大小。想了想仍是直接代碼搞試試先~

固然，h5頁面仍是要單獨寫的，通常在php路由時重定向到h5對應的頁面

mounted:function(){
    window.addEventListener('resize', this.handle_resize)
    this.handle_resize(null);
},
beforeDestroy: function () {
    window.removeEventListener('resize', this.handle_resize)
},
methods : {
    handle_resize : function(event){
        var height = document.documentElement.clientHeight;
        var width = document.documentElement.clientWidth;
        //而後這裏能夠各類操做那些和界面大小相關的data參數
    }
}
複製代碼