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

資訊專欄INFORMATION COLUMN

用Vue自己造個組件輪子，以及實踐背后帶來的思考

icyfire / 2585人閱讀

摘要：用造個組件輪子吧閏土大叔如果你掌握了的組件知識，相關(guān)的指令事件，花點時間你也可以造出這么個入門級的小輪子。接下來，拋出造輪子實踐背后帶來的一些思考。以上三部分內(nèi)容構(gòu)成了的整個執(zhí)行過程。

前言

首先，向大家說聲抱歉。由于之前的井底之蛙，誤認(rèn)為Vue.js還遠(yuǎn)沒有覆蓋到二三線城市的互聯(lián)網(wǎng)小廠里?，F(xiàn)在我錯了，從我司的前端技術(shù)選型之路便可見端倪。以太原為例，已經(jīng)有不少公司陸續(xù)開始采用Vue.js作為他們公司前端的技術(shù)棧，前后端分離正搞得熱火朝天，還有更多的公司正在來時的路上。所以說，還在校的童鞋和仍在培訓(xùn)的萌新們，Vue已經(jīng)成為現(xiàn)在前端的標(biāo)配技能之一，為防止掉隊，跟著閏土大叔學(xué)起來吧。

接下來，正文從這開始~

先來了解下當(dāng)前的行業(yè)背景：

隨著SPA、前后端分離的技術(shù)架構(gòu)在業(yè)界越來越流行，前端的業(yè)務(wù)復(fù)雜度也越來越高，導(dǎo)致前端開發(fā)者需要管理的內(nèi)容，承擔(dān)的職責(zé)越來越多，這一切，使得業(yè)界對前端開發(fā)方案的思考多了很多，以react、vue等框架為代表推動的組件化開發(fā)模式越來越被開發(fā)者認(rèn)可，這種模式極大的降低了我們開發(fā)與維護(hù)的成本。

最近一段時間，我也在研究Vue，在網(wǎng)上看了那么多基于Vue的組件，何不自己也來造個小輪子，有了這個想法后，擼子袖子就是干。本文提供代碼僅僅是提供而已，重要的是思路。

  1 
  2 
  3 
  4     
  5     用Vue造個組件輪子吧-閏土大叔
  6 
  7 
  8     

  9         
 10     

 11 
 12 
111 
112 
113

如果你掌握了Vue的組件知識，相關(guān)的指令、事件，花點時間你也可以造出這么個入門級的小輪子。如果這篇文章只是單純的貼出組件輪子代碼那也太easy了。接下來，拋出造輪子實踐背后帶來的一些思考。

第一問：

vue 已經(jīng)掛載的組件怎么初始化里面的data?

能問出這個問題的童鞋，說明你已經(jīng)迷上了Vue。按照源碼里講的，vue將數(shù)據(jù)綁定到組件的原理分為三個步驟： 當(dāng)實例化一個Vue構(gòu)造函數(shù)，會執(zhí)行 Vue 的 init 方法，在 init 方法中主要執(zhí)行三部分內(nèi)容，一是初始化環(huán)境變量，二是處理 Vue 組件數(shù)據(jù)，三是解析掛載組件。以上三部分內(nèi)容構(gòu)成了 Vue 的整個執(zhí)行過程。

第二問：

vue 注冊組件為什么要必須發(fā)生在根實例初始化前？

可能你已經(jīng)熟讀Vue官方API文檔，但是這個問題你考慮過么。如果在Vue根實例初始化之后才注冊組件會發(fā)生什么？如果你有興趣，我可以等你實踐30秒再說我的想法。

30秒時間到了，在等你的時候，我又實踐了一遍。是的，報錯了。大意是，未知的自定義元素： - 你是否正確注冊了組件？對于遞歸組件，請確保提供name選項。

我曾翻閱過官網(wǎng)API文檔，也曾閱覽過相關(guān)的書籍，但里面都是簡單的提了一句：

這個問題無解么，不是的。其實你仔細(xì)想想報錯信息，你應(yīng)該會泯然一笑，說的通俗點，這就像坐高鐵，買了票才能上。因為實例化的時候會嘗試找這個組件，你不提前注冊就找不到了。如果硬要深究，只能去看源碼了。

第三問：

這個數(shù)字輸入框組件網(wǎng)上很常見，在此基礎(chǔ)上你有做什么擴展么？

是的，與網(wǎng)上的數(shù)字輸入框組件不同的，我做了兩個擴展。

第一個擴展：input框自動獲取焦點，在輸入框聚焦時，監(jiān)聽鍵盤上下按鍵的操作，相當(dāng)于加1或者減1。

實現(xiàn)的思路，在input輸入框上定義一個ref為input引用，然后在模板渲染完畢之后，在mounted鉤子里，通過$refs查找到對應(yīng)的ID：input，然后focus。獲取完焦點之后，接下來就是如何監(jiān)聽鍵盤上下按鍵的操作。首先，我們通過keydown事件綁定一個show()方法，里面?zhèn)饕粋€$event參數(shù)，然后在子組件的methods選項內(nèi)創(chuàng)建一個show方法。我們都知道，鍵盤上的上鍵對應(yīng)的keyCode碼是38，下鍵對應(yīng)的是40。 有了這個之后，我們做一個條件判斷（上加下減），如果event的keyCode碼為38，就調(diào)用handleUp()方法，如果是40，就調(diào)用handleDown()方法。至此，監(jiān)聽鍵盤上下鍵的按下進(jìn)而操作input數(shù)值的擴展完成。

第二個擴展：給組件增加一個控制步伐的prop——step，比如設(shè)置為10，點擊加號按鈕，一次增加10。

繼續(xù)說說我的思路，這個就相對來說比較簡單了，首先在props選項內(nèi)定義一個step對象，類型設(shè)置為Number，默認(rèn)值設(shè)置為5。然后將methods里面的handleDown和handleUp里面將 this.currentValue +/-= （具體的數(shù)值）替換為 this.step。相當(dāng)于進(jìn)一步封裝了它的可用性。至此，所有擴展完成。

后記

自己曾經(jīng)求職面試前端，因不會Vue框架而被淘汰，而且不止一次，也曾因此賦閑半年在家。所以，事不過三，我要抓緊時間學(xué)會它，以及它的全家桶。有原則有危機感的人，往往都是之前吃過大虧的人。他們知道犯錯誤的代價，所以不敢觸碰這個紅線。愿我走過的路踩過的坑，你們不會再踩一遍，才會哭著鼻子記住這個教訓(xùn)。以銅為鏡,可以正衣冠;以人為鏡,可以明得失。在之后的日子里，我還會繼續(xù)更新vue相關(guān)的文章，愿我們都做一個愛思考的孩子。前端路上，we are not alone。

想了解我的更多動態(tài)？歡迎關(guān)注我的公眾號：閏土大叔，或者添加我的個人微信號：wxd91traveler，期待與你發(fā)生一段純純的友誼。

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

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

相關(guān)文章

  • 造個輪子,我學(xué)到了什么

    摘要：閱讀原文造個輪子我學(xué)到了什么聽說的最多的是不是不要重復(fù)的造輪子不要被這句話蒙騙了，這句話應(yīng)該還沒說完整，在什么情況下不要造輪子實際項目中由于工期和質(zhì)量原因，肯定不希望你造輪子，你造輪子花費時間且質(zhì)量不如現(xiàn)有的輪子。 閱讀原文：造個輪子,我學(xué)到了什么 聽說的最多的是不是不要重復(fù)的造輪子？不要被這句話蒙騙了，這句話應(yīng)該還沒說完整，在什么情況下不要造輪子?實際項目中由于工期和質(zhì)量原因，肯定不...

    Acceml 評論0 收藏0

  • 我厭倦了 Redux，那就造個輪子 Rectx：第三集

    摘要：呵呵，你沒想到吧，這玩意兒竟然有第三集我靠，我自己都沒想到，讓我們悄悄的回顧一下前兩集完全沒想到，竟然會有第二集我厭倦了，那就造個輪子第二集痛點分析第一集在這里我厭倦了，那就造個輪子算了，我都懶得寫了，自己看吧，當(dāng)然不看也無所謂，正式開始。 倉庫：215566435/rectx 前言 麻煩快去我的倉庫里面噴： 老子學(xué)不動了，求不要更新。 呵呵，你沒想到吧，這玩意兒竟然有第三集！我靠，我...

    adam1q84 評論0 收藏0

  • 我厭倦了 Redux，那就造個輪子 Rectx：第三集

    摘要：呵呵，你沒想到吧，這玩意兒竟然有第三集我靠，我自己都沒想到，讓我們悄悄的回顧一下前兩集完全沒想到，竟然會有第二集我厭倦了，那就造個輪子第二集痛點分析第一集在這里我厭倦了，那就造個輪子算了，我都懶得寫了，自己看吧，當(dāng)然不看也無所謂，正式開始。 倉庫：215566435/rectx 前言 麻煩快去我的倉庫里面噴： 老子學(xué)不動了，求不要更新。 呵呵，你沒想到吧，這玩意兒竟然有第三集！我靠，我...

    eternalshallow 評論0 收藏0

  • 「造個輪子」——cicada 設(shè)計一個配置模塊

    摘要：同時也新增了一個。將不同的配置文件用不同的對象進(jìn)行管理。由于需要支持多個配置文件，所有需要定義一個抽象類供所有的配置管理實現(xiàn)。其實就是一個結(jié)構(gòu)的緩存，用于存放所有的配置?？偨Y(jié)這就是本次中的升級內(nèi)容，包含了配置支持以及代碼重構(gòu)。 showImg(https://segmentfault.com/img/remote/1460000016392132?w=2048&h=1365); 前言 ...

    fsmStudy 評論0 收藏0

  • 造個輪子，基于 Laravel5.4 的下一代 PHP 開發(fā)框架 （API/SPA/Vue2/iVi

    摘要：像操作系統(tǒng)一樣，你可以通過安裝軟件，成為適用于你的電腦。先進(jìn)的技術(shù)方案，使得你無需擔(dān)心后期功能拓展與迭代問題，大大降低了維護(hù)成本。對于一個超過三年生命周期的項目來說，最適合不過?？傊切碌募夹g(shù)方向標(biāo)，能讓每個藝術(shù)家像構(gòu)建工程一樣構(gòu)建程序。 這是我們團(tuán)隊的一個非盈利項目，以Apache2.0協(xié)議開源...不限制商用 Notadd是什么 Notadd 是基于Laravel 和 Vue 的...

    Rocture 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<