熱愛自由和芝士的偽文藝少女
發(fā)簡信
IP屬地：上海
-
-
react開源項目唧取、框架航夺、組件媳叨、demo腥光、重點難點記錄分享关顷！
-
AICODER的創(chuàng)始人议双，有理想有情懷的IT教育從業(yè)者，致力于協(xié)助寒門子弟的IT技術學習和幫助他們改變自己的命運而奮斗捉片。老馬是資深全棧開發(fā)工程師平痰，中國HTML5產(chǎn)業(yè)聯(lián)盟特邀嘉賓，曾任職傳智播客前端學院院長伍纫，對Web前端全棧開發(fā)技術宗雇、HTML5、數(shù)據(jù)庫集群等有深入研究莹规。曾參與大型分布式高并發(fā)互聯(lián)網(wǎng)項目設計開發(fā)等工作赔蒲，對于分布式應用架構設計、系統(tǒng)優(yōu)化等經(jīng)驗豐富访惜。<br>官網(wǎng)：<a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.aicoder.com" target="_blank">http://www.aicoder.com</a> <br> 騰訊課堂：<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fqtxh.ke.qq.com" target="_blank">https://qtxh.ke.qq.com</a>
-
不會的原因是想的太多, 而做得太少.<br>不管寫的好不好债热，能夠認真的寫，你已經(jīng)是最棒的了幼苛。
-
JavaScript正則表達式
-
-
-
程序員就是我們的標簽
-
-
-
git實用知識梳理（一）最基礎的知識
一般我們寫代碼會用到版本控制工具算行，那么git就是免費開源的工具之一，同時也是目前世界上最先進的分布式版本控制系統(tǒng)（沒有之一）苫耸。因此州邢，它的功能也是十分強大的了！當然了褪子，精通gi...
-
-
-
-
-
1.vue-router是什么？ 它是一個vue.js下的路由組件癣猾。 2.路由是什么敛劝？ router，即“路由”纷宇。路由是一個網(wǎng)絡工程里面的術語夸盟。James F.Kurose,Keith W.Ross著.陳鳴譯．《計算機網(wǎng)絡》中有講到 路由（routing）是指分組從源到目的地時，決定端到端路徑的網(wǎng)絡范圍的進程 在WEB開發(fā)的世界里面像捶，路由其實指的就是控制我們在瀏覽器中輸入的URL應該走入哪個頁面中的一個組件上陕。 3.為什么需要路由？ 在最原始的ASP作岖，以及傳統(tǒng)的 開發(fā)中唆垃，我們在瀏覽器路徑中輸入URL，位于服務器上的WEB服務器程序（比如說Apache httpd）則會自動更加這URL痘儡，找到WEB目錄下對應的文件辕万，通過一些解析器將服務端腳本執(zhí)行之后返回的HTML內(nèi)容發(fā)回給瀏覽器，瀏覽器將收到的HTML渲染出來。這時WEB服務器程序（比如說Apache httpd）自己就完成了這個路由功能渐尿。 比如說wordpress的后臺就是 http://www.changwei.me/wp-admin/post-new.php 直接請求對應的php腳本醉途，該腳本執(zhí)行之后返回HTML給瀏覽器渲染。 但是現(xiàn)在越來越流行框架開發(fā)了砖茸，很多PHP項目都是用框架開發(fā)的隘擎，框架都遵循單一入口原則，也就是在WEB目錄下只有一個index.php文件和一些靜態(tài)資源文件凉夯，其他所有業(yè)務邏輯以及框架本身的代碼都寫在WEB目錄外面的各種文件中货葬，所有入站請求都到達入口文件，入口文件再通過請求的各種參數(shù)來判斷應該是將請求分發(fā)給WEB目錄外的哪個文件（控制器）執(zhí)行劲够。我們?nèi)绻行夷軌蛘业揭恍┦褂梅浅＠系腜HP框架開發(fā)的網(wǎng)站震桶，觀察他們的站內(nèi)連接，各種URL上面有可能會像這種樣子 http://xxx.com/index.php?module=home&controller=passport&action=login 等等征绎，這就是該框架通過入口文件接受module蹲姐，controller，action等參數(shù)來判斷究竟應該把該請求分發(fā)給哪個模塊人柿，哪個控制器柴墩，哪個操作去處理。這樣就可以十分神奇的實現(xiàn)只有一個文件就處理千千萬萬邏輯的方法凫岖。 到了現(xiàn)在WEB2.0時代江咳，信息分享是很多用戶上網(wǎng)的主要操作，如果你的URL足夠簡短美觀隘截，那么用戶只需要簡單的輸入URL就可以訪問對應的網(wǎng)頁扎阶，而不用輸入一堆module，controller婶芭，action之類的非IT行業(yè)的用戶看起來不明不白的單詞。同時也為了SEO（搜索引擎優(yōu)化）和URL美觀着饥，因此路由便誕生了犀农。 路由可以進一步將類似于 http://xxx.com/index.php?module=home&controller=passport&action=login 這樣的URL簡寫成 http://xxx.com/login 這樣看起來是不是美觀了很多。 4.Apache自帶URL重寫可以達到上述目的宰掉，為什么還需要路由呵哨？ ? 如果你會問出這個問題，你一定還沒有體驗過PHP的Laravel框架轨奄。 我們看一看Laravel在輸出hello world的時候孟害，用xphrof做性能測試的結果，發(fā)現(xiàn)路由相關的操作占據(jù)了大量執(zhí)行時間挪拟，從中也可以側(cè)面看出Laravel中路由的功能強大挨务。 前面說了這么多，還是沒講到路由究竟好在哪？為什么不用各種WEB服務器自帶的URL重寫功能谎柄？ 首先URL重寫只是單純的正則表達式匹配請求URL丁侄，然后將請求轉(zhuǎn)發(fā)到真正的URL路徑上執(zhí)行，這里從高內(nèi)聚低耦合的角度來看朝巫，URL重寫將一個WEB程序的業(yè)務邏輯分散到了WEB服務器程序和WEB程序兩個地方鸿摇。并且我們從Apache服務器程序換到nginx上還需要修改配置文件，移植性降低了劈猿。另外我們有的時候需要對一組URL進行一些特殊的操作拙吉，比如說所有后臺操作請求都必須驗證登錄操作，在傳統(tǒng)的開發(fā)中揪荣，要么在每一個后臺操作的腳本（控制器）中寫一個驗證操作筷黔，更加高級一點的會include一個驗證腳本，但是怎么看還是不夠優(yōu)雅”涮樱現(xiàn)在有路由了必逆，可以將一組和后臺操作有關的URL都劃分到一個分組中，然后綁定中間件（和java中的過濾器揽乱，攔截器很像） 5.vue-router在前端開發(fā)中能帶來什么好處名眉？ 前面講了這么多關于路由的好處，其實都指的是后端路由凰棉。也就是前后端不分離的項目中的路由∷鹇＃現(xiàn)在我們是前后端分離項目中，路由有什么用撒犀，能帶來什么好處呢福压？ 我們先看看知乎客戶端 ??這是知乎客戶端的兩個頁面。 我們先來看看這個需求： 有一天產(chǎn)品經(jīng)理說需要開發(fā)一個像知乎一樣的SPA或舞，要求底部有一些按鈕固定不動的底部導航欄荆姆，頂部也有一個帶有返回按鈕的導航欄固定不動，點擊底部導航欄之后映凳，中間部分的頁面應該跳轉(zhuǎn)到對應功能頁面胆筒，點擊頂部的返回按鈕之后，應該返回到之前的頁面诈豌。 如果是傳統(tǒng)開發(fā)仆救，你肯定第一想到的是使用css的display進行切換顯示不同的vue組件（components）實現(xiàn)。 但是我們看到知乎底部的“我的”按鈕存在一個邏輯矫渔，如果用戶沒有登錄彤蔽，那么他會跳轉(zhuǎn)到登錄頁面，如果已經(jīng)登錄則顯示對應頁面庙洼。如果使用傳統(tǒng)開發(fā)顿痪，那么就會顯得很不優(yōu)雅镊辕。 另外還要考慮一個情況，就是一般訪問SPA的用戶都是移動端员魏，移動端最需要考慮的就是加載速度丑蛤，并且不能耗費用戶過多流量。那么就需要讓用戶點擊這個按鈕之后再加載這個組件的相關代碼撕阎，以及該組件需要請求的數(shù)據(jù)受裹，最后在渲染頁面。 最后就是URL要美觀漂亮虏束，并且URL可以動態(tài)接受參數(shù)棉饶，比如說網(wǎng)易云音樂這個非常典型的SPA項目便使用了后端路由并且可以接受參數(shù) http://music.163.com/#/my/m/music/playlist?id=121597667 要滿足這些需求的話，在vue.js下使用vue-router是最合適不過的了镇匀。 6.vue-router都提供了什么照藻？ 1.前端路由（編程式導航 · GitBook）：讓頁面中的部分內(nèi)容可以無刷新的跳轉(zhuǎn)，就像原生APP一樣汗侵。 2.懶加載（懶加載 · GitBook）：結合異步組件以及在組建的created鉤子上觸發(fā)獲取數(shù)據(jù)的ajax請求（數(shù)據(jù)獲取 · GitBook）可以最大化的降低加載時間幸缕，減少流量消耗。 3.重定向（重定向 和 別名 · GitBook）：可以實現(xiàn)某些需要根據(jù)特定邏輯改變頁面原本路由的需求晰韵，比如說未登錄狀態(tài)下訪問“個人信息”時應該重定向到登錄頁面发乔。 4.美化URL（HTML5 History 模式）：還記得前面網(wǎng)易云音樂的URL嗎？ http://music.163.com/#/my/m/music/playlist?id=121597667 網(wǎng)易云音樂網(wǎng)頁版的URL里面幾乎都帶有一個#號雪猪，大家可能會疑惑栏尚，#號是URL的hash部分，并不會傳遞到服務端只恨，那么#號起什么作用呢译仗？其實前端路由器就是通過URL的hash部分來像傳統(tǒng)的后端路由器一樣判斷某些請求需要交給哪個前端組件處理。 但是大家都會覺得URL里面帶一個#號太丑了官觅，要是能像傳統(tǒng)WEB應用一樣的URL多好纵菌。這個時候vue-router提供的“HTML5 History 模式”就“完美”解決了這個問題。 為什么前面的完美要加上引號呢休涤？ 請參考官方文檔： 不過這種模式要玩好产艾，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用滑绒，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404隘膘，這就不好看了疑故。 所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源弯菊，則應該返回同一個index.html 頁面纵势，這個頁面就是你 app 依賴的頁面。 這里還要引出另一個話題，就是為什么前端路由的時候需要改變URL呢钦铁？前面提到了WEB2.0時代是一個信息分享的時代软舌，如果用戶切換到了另一個頁面，但是URL仍然顯示的是index.html牛曹，那么用戶想要分享這個頁面給他的朋友佛点，他的朋友訪問到的則只是這個SPA的首頁，并不是這個分享的用戶本身希望他朋友看到的頁面黎比。因此前端路由在改變頁面的時候必須讓URL跟著一起變超营。這樣同時也近似完美地解決了歷史上ajax導致瀏覽器返回前進按鈕失效的問題。 5.前置操作阅虫，中間件演闭，過濾器，攔截器（導航鉤子 · GitBook） 在后端路由中都有前置操作颓帝，中間件米碰，過濾器，攔截器等概念购城。前端路由也可以有的吕座，vue-router本身較為完美的支持了這些功能，讓你做前端SPA開發(fā)就像后端開發(fā)一樣工猜。在第三點提到的用戶未登錄重定向的判斷邏輯就可以寫在這里米诉。 6.路由元信息（路由元信息 · GitBook）：后端路由中可以對路由規(guī)則進行分組，比如說把所有需要登錄才能訪問的頁面劃分為一組篷帅。vue-router并沒有路由規(guī)則分組功能史侣，但是它提供了路由元信息，可以在元信息中定義一些規(guī)則魏身，在路由鉤子中再去判斷這些規(guī)則惊橱，進行相應的操作。 7.滾動位置控制（滾動行為 · GitBook）：相對于官方翻譯的滾動行為箭昵，我更喜歡自己將他翻譯為“滾動位置控制”税朴，官方文檔對于它的作用已經(jīng)講的比較通俗易懂了，大家可以參閱官方文檔學習家制。
-
-
vue基礎語法是對Vue.js實戰(zhàn)（Vue.js作者 尤雨溪推薦帖蔓，梁灝編著）書籍內(nèi)容進行整理的，供廣大vue學習愛好者進行學習瞳脓。 本專題適合在了解vue.js是什么的基礎上進行閱讀學習的人群塑娇。 希望整理對你的vue學習之路有所幫助。
-
-
一起探討angular與vue的相關知識以及所遇到的那些問題
