亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

用Vue自己造個(gè)組件輪子，以及實(shí)踐背后帶來的思考

icyfire / 2613人閱讀

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

前言

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

接下來，正文從這開始~

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

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

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

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

  9         
 10     

 11 
 12 
111 
112 
113

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

第一問：

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

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

第二問：

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

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

30秒時(shí)間到了，在等你的時(shí)候，我又實(shí)踐了一遍。是的，報(bào)錯(cuò)了。大意是，未知的自定義元素： - 你是否正確注冊(cè)了組件？對(duì)于遞歸組件，請(qǐng)確保提供name選項(xiàng)。

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

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

第三問：

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

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

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

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

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

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

后記

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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