成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue作為組件在前端項(xiàng)目中的應(yīng)用技巧

fobnn / 1045人閱讀

摘要：所以，我考慮將前端的部分功能抽象出來(lái)使其成為通用的組件，可以在任意地方方便地被調(diào)用，并且具備可擴(kuò)展性和易用性。

為什么要使用vue

因?yàn)楝F(xiàn)有的前端項(xiàng)目中JS在使用方面過(guò)于混亂，存在大量重復(fù)調(diào)用和代碼沖突（同一段代碼可能在10個(gè)不同的地方都有寫(xiě)到，被觸發(fā)的時(shí)候，管理異常困難），所以我認(rèn)識(shí)到之前單純依靠操作DOM的方式是有問(wèn)題的，應(yīng)切換到以數(shù)據(jù)為主。
所以，我考慮將前端的部分功能抽象出來(lái)使其成為通用的組件，可以在任意地方方便地被調(diào)用，并且具備可擴(kuò)展性和易用性。

vue的優(yōu)點(diǎn)

1.完備的中文文檔

2.容易上手

3.體積小 （只有<50kb）

4.基于組件化的開(kāi)發(fā)方式

5.優(yōu)秀的代碼可讀性、可維護(hù)性

期望的實(shí)現(xiàn)方式

前后端代碼分離，組件的vue模板代碼不出現(xiàn)在php模板中，僅定義一個(gè)特定標(biāo)簽，加載特定的JS文件就可以實(shí)現(xiàn)組件加載，使其成為插拔式使用的組件。

通過(guò)$mount方法將vue對(duì)象掛載到某個(gè)ID的dom節(jié)點(diǎn)上

// hideLogin 可以是用來(lái)控制登錄彈窗的參數(shù)之一

var LoginComponent = require("loginForm.js");
var Vue = require("vue");
var loginForm = require("loginForm.vue");
var login = exports;
var form;
/**
 * 初始化登錄組件
 */
login.loadLoginForm = function () {
    if(form){
        return;
    }
    form = new Vue(loginForm);
    form.$mount("#loginForm");
};
登錄組件 + 業(yè)務(wù)調(diào)用

Vue.set() 數(shù)據(jù)傳遞 業(yè)務(wù)回調(diào) https://segmentfault.com/a/11...

彈窗控制組件

組件和父子組件，組件通信，內(nèi)部生命周期

pop.js

var Vue = require("vue");
var pop = require("pop.vue");
new Vue({
    el: "#pop",
    render: function (h) {
        return h(pop)
    }
});

pop.vue // 父組件

子組件（popA.vue）設(shè)置一個(gè)methods 來(lái)給父組件傳值

 methods: {
            closeMsg: function (type) {
                this.$emit("listenPop", type);
            }
        }
城市選擇組件

偵聽(tīng)器 watch：當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，這個(gè)方式是最有用的

過(guò)濾器 filter

// watch方法監(jiān)控該對(duì)象，當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，觸發(fā)function
    watch: {
        list: function(val) {
            this.doSm();
        },
        history: function(val) {
            if(val){
                this.doSm();
            }
        }
    }
// 使用filter 來(lái)對(duì)接口返回的數(shù)據(jù)進(jìn)行處理
    constructUrl: function (list) {
        var vm = this;
        return list.filter(function (item) {
            if (if (vm.type == "1") {)
            return item["url"] = "javascript:;";
        })
    }
相關(guān)知識(shí)點(diǎn)應(yīng)用

安裝版本受webpack影響

因項(xiàng)目原因不支持babel轉(zhuǎn)換es6語(yǔ)法，因此只能用es5

初始化，基礎(chǔ)語(yǔ)法，屬性綁定，數(shù)據(jù)綁定，事件綁定

mount掛載

生命周期鉤子 （create，mount，update，destroy）

組件和父子組件,組件通信，內(nèi)部生命周期

Vue.set() 數(shù)據(jù)傳遞 業(yè)務(wù)回調(diào)

偵聽(tīng)器 watch：當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，這個(gè)方式是最有用的

過(guò)濾器 filter

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/28413.html

相關(guān)文章

  • Vue作為組件在前端項(xiàng)目中的應(yīng)用&Vue.set 的用法

    摘要：業(yè)務(wù)背景是，在的前端項(xiàng)目中加入作為組件。但隨著需要登錄的頁(yè)面的增多，多個(gè)頁(yè)面都需要添加相同的，，以及前端登錄邏輯，所以在原先的項(xiàng)目中添加了，將重復(fù)的添加的代碼加入到了文件中，然后通過(guò)方法將對(duì)象掛載到某個(gè)的節(jié)點(diǎn)上。 業(yè)務(wù)背景是，在jq的前端項(xiàng)目中加入Vue作為組件。 原本的登錄功能是每個(gè)頁(yè)面加一個(gè)登錄彈窗（手機(jī)號(hào)+驗(yàn)證碼驗(yàn)證登錄），然后發(fā)ajax請(qǐng)求到后端，登錄成功后再進(jìn)行一些操作。 但...

    hersion 評(píng)論0 收藏0

  • Vue.js新手入門指南[轉(zhuǎn)載]

    摘要：就是一個(gè)用于搭建類似于網(wǎng)頁(yè)版知乎這種表單項(xiàng)繁多，且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁(yè)版應(yīng)用。單頁(yè)應(yīng)用程序顧名思義，單頁(yè)應(yīng)用一般指的就是一個(gè)頁(yè)面就是應(yīng)用，當(dāng)然也可以是一個(gè)子應(yīng)用，比如說(shuō)知乎的一個(gè)頁(yè)面就可以視為一個(gè)子應(yīng)用。 最近在逛各大網(wǎng)站，論壇，以及像SegmentFault等編程問(wèn)答社區(qū)，發(fā)現(xiàn)Vue.js異常火爆，重復(fù)性的提問(wèn)和內(nèi)容也很多，樓主自己也趁著這個(gè)大前端的熱潮，著手學(xué)習(xí)了一...

    MartinHan 評(píng)論0 收藏0

  • Vue 2019開(kāi)發(fā)者圖譜

    摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開(kāi)發(fā)者知識(shí)圖譜，它包含了所有開(kāi)發(fā)過(guò)程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場(chǎng)景無(wú)需大量代碼開(kāi)發(fā)和測(cè)試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。 作為 Vue 的初學(xué)者，您或許已經(jīng)聽(tīng)過(guò)很多關(guān)于它的專業(yè)術(shù)語(yǔ)了，例如：?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽(tīng)過(guò)和Vue經(jīng)常一起被提到的工具和庫(kù)，如Vuex、Webp...

    cgspine 評(píng)論0 收藏0

  • 2016年最具潛力前端開(kāi)源項(xiàng)目Top20

    摘要：作為年最具潛力，乃至最具影響力的前端開(kāi)源項(xiàng)目真的不為過(guò)。通過(guò)上的介紹，這個(gè)項(xiàng)目是偏右阿里的前端大牛和阿里的前端大牛主導(dǎo)，而且從中也不難看出有些部分是來(lái)自參與過(guò)的項(xiàng)目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的開(kāi)源世界越發(fā)精彩，Vue的不斷壯大，Angular 2的發(fā)布，Amaze UI 3....

    winterdawn 評(píng)論0 收藏0

  • 2016年最具潛力前端開(kāi)源項(xiàng)目Top20

    摘要：作為年最具潛力，乃至最具影響力的前端開(kāi)源項(xiàng)目真的不為過(guò)。通過(guò)上的介紹，這個(gè)項(xiàng)目是偏右阿里的前端大牛和阿里的前端大牛主導(dǎo)，而且從中也不難看出有些部分是來(lái)自參與過(guò)的項(xiàng)目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的開(kāi)源世界越發(fā)精彩，Vue的不斷壯大，Angular 2的發(fā)布，Amaze UI 3....

    xiguadada 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<