vue最詳細的知識整理筆記-Vue.js-PHP中文網

語法不夠強大，例如無法嵌套書寫，導致模組化開發中需要書寫很多重複的選擇器；
沒有變數和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護;
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用稱為【CSS預處理器】的工具,提供CSS缺失的樣式層重複使用機制、減少冗餘程式碼，提高樣式程式碼的可維護性。大大的提高了前端在樣式上的開發效率。

什麼是CSS預處理器

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些程式設計的特性，將CSS作為目標產生文件，然後開發者就只需要使用這種語言進行CSS的編碼工作。轉換成簡單易懂的話來說就是「用一種專門的程式語言，進行Web頁面樣式設計，再透過編譯器轉換為正常的CSS文件，以供專案使用」。

常用的CSS預處理器有哪些

SASS：基於Ruby ，透過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高於LESS。
LESS：基於NodeJS，透過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低於SASS，但在實際開發中足夠了，所以如果我們後台人員如果需要的話，建議使用LESS。

1.5、行為層（JavaScript）

JavaScript一門弱型別腳本語言，其原始碼在發送到客戶端執行之前不需要經過編譯，而是將文字格式的字元代碼傳送給瀏覽器，由瀏覽器解釋運行。

Native 原生JS開發

原生JS開發，也就是讓我們依照【ECMAScript】標準的開發方式，簡稱ES，特點是所有瀏覽器都支援。截至目前，ES標準以發布以下版本：

ES3
ES4（內部，未正式發布）
ES5（全瀏覽器支援）
ES6（常用，目前主流版本：webpack打包成為ES5支援）
ES7
ES8
ES9（草稿階段）

區別就是逐步增加新特性。
TypeScript 微軟的標準
TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類別的物件導向程式設計。由安德斯·海爾斯伯格(C#、Delphi、TypeScript之父； .NET創立者) 主導。語言的特點是除了具備ES的特性之外還納入了許多不在標準範圍內的新特性，所以會導致很多瀏覽器不能直接支援TypeScript語法，需要編譯後(編譯成JS) 才能被瀏覽器正確執行。

JavaScript框架

JQuery：大家熟知的JavaScript函式庫，優點就是簡化了DOM操作，缺點就是DOM操作太頻繁，影響前端效能；在前端眼裡使用它只是為了相容IE6，7，8；
Angular：Google收購的前端框架，由一群Java程式設計師開發，其特點是將後台的MVC模式搬到了前端並增加了模組化開發的理念，與微軟合作，採用了TypeScript語法開發；對後台程式設計師友好，對前端程式設計師不太友好；最大的缺點是版本迭代不合理（如1代–>2 代，除了名字，基本上就是兩個東西；截止發表博客時已推出了Angular6）
React：Facebook 出品，一款高性能的JS前端框架；特點是提出了新概念【虛擬DOM】用於減少真實DOM 操作，在內存中模擬DOM操作，有效的提升了前端渲染效率；缺點是使用複雜，因為需要額外學習一門【JSX】語言；
Vue：一款漸進式JavaScript 框架，所謂漸進式就是逐步實現新特性的意思，如實現模組化開發、路由、狀態管理等新特性。其特點是綜合了Angular（模組化）和React(虛擬DOM) 的優點；
Axios：前端通訊框架；因為Vue 的邊界很明確，就是為了處理DOM，所以並不具備通訊能力，此時就需要額外使用一個通訊框架與伺服器互動；當然也可以直接選擇使用jQuery 提供的AJAX 通訊功能；

二、前端發展史

2.1、UI框架

Ant-Design：阿里巴巴出品，基於React的UI框架
ElementUI、iview、ice：餓了麼出品，基於Vue的UI框架
# BootStrap：Teitter推出的一個用於前端開發的開源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

2.2、JavaScript構建工具

Babel：JS編譯工具，主要用於瀏覽器不支援的ES新特性，例如用於編譯TypeScript
WebPack：模組打包器，主要功能就是打包、壓縮、合併及依序載入

註：以上知識點已將WebApp開發所需技能全部整理完畢

2.3、三端同一

混合開發（Hybrid App）

主要目的是實現一套程式碼三端統一（PC、Android：.apk、iOS：.ipa）並能夠呼叫到裝置底層硬體（如：感測器、 GPS、相機等），打包方式主要有以下兩種：

雲端打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是PhoneGap）

微信小程式

詳見微信官網，這裡就是介紹一個方便微信小程式UI開發的框架：WeUI

#2.4、後端技術

前端人員為了方便開發也需要掌握一定的後端技術但我們Java後台人員知道後台知識體系極其龐大複雜，所以為了方便前端人員開發後台應用，就出現了Node JS這樣的技術。 Node JS的作者已經聲稱放棄Node JS(說是架構做的不好再加上笨重的node modules，可能讓作者不爽了吧)開始開發全新架構的De no
既然是後台技術，那肯定也需要框架與專案管理工具，Node JS框架及專案管理工具如下：

Express：Node JS框架
Koa：Express簡化版
NPM：項目綜合管理工具，類似Maven
YARN：NPM的替代方案，類似Maven和Gradle的關係

2.5、主流前端框架

Vue.js

iView

iview 是一個強大的基於Vue的UI函式庫，有許多實用的基礎元件比element ui的元件更豐富，主要服務於PC介面的中後台產品。使用單一檔案的Vue組件化開發模式基於npm webpack babel開發，支援ES 2015高品質、功能豐富友善的API，自由靈活地使用空間。

官網位址
Github
iview-admin

備註：屬於前端主流框架，選型時可考慮使用，主要特點是行動端支援較多

Element UI

Element是餓了麼前端開源維護的Vue UI元件庫，元件齊全，基本上涵蓋後台所需的所有元件，文件講解詳細，例子也很豐富。主要用於開發PC端的頁面，是一個品質比較高的Vue UI元件庫。
·官網位址
·Git hub
·vue-element-admin
備註：屬於前端主流框架，選型時可考慮使用，主要特點是桌面端支援較多

ICE

飛冰是阿里巴巴團隊基於React/Angular/Vue的中後台應用解決方案，在阿里巴巴內部，已經有270多個幾乎所有BU的專案都在使用。飛冰包含了一條從設計端到開發端的完整鏈路，幫助使用者快速建構屬於自己的中後台應用。

官網位址。
Git hub

備註：主要組件還是以React為主，截止2019年02月17日更新博客前對Vue的支持還不太完善，目前尚處於觀望階段

VantUI

Vant UI是有讚前端團隊基於有讚統一的規範實現的Vue元件庫，提供了-整套UI基礎元件和業務元件。透過Vant，可以快速建置出風格統一的頁面，提升開發效率。

官網位址
Github

#AtUI

at-ui是一款基於Vue 2. x的前端UI元件庫，主要用於快速開發PC網站產品。它提供了一套n pm web pack babel前端開發工作流程， CSS樣式獨立，即使採用不同的框架實作都能保持統一的UI風格。
·官網位址
·Git hub

Cube Ul

cube-ui是滴滴團隊開發的基於Vue js實現的精緻行動裝置組件庫。支援按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。

官網位址
Github

#混合開發

Flutter

Flutter是Google的行動裝置UI框架，可在極短的時間內建立Android和iOS上高品質的原生級應用程式。 Flutter可與現有程式碼一起工作，它被世界各地的開發者和組織使用，並且Flutter是免費和開源的。

官網位址

Github備註：Google出品，主要特點是快速建立原生APP應用程序，如做混合應用該框架為必備框架

loniclonic既是CSS框架也是Javascript UI庫， lonic是目前最有潛力的一款HTML 5手機應用開發框架。透過SASS建立應用程序，它提供了許多UI元件來幫助開發者開發強大的應用。它使用JavaScript MV VM框架和Angular JS/Vue來增強應用。提供資料的雙向綁定，使用它成為Web和行動開發者的共同選擇。 官網位址

·官網文件
·Git hub

微信小程式

mpvue

Vue.js
Vue.js

runtime

和程式碼編譯器

compiler

實現，使其可運行在小程式環境中，從而為小程式開發引入了

Vue.js

開發體驗。

·官網位址

·Git hub
備註：完整的Vue開發體驗，井且支援多平台的小程式開發，推薦使用

WeUI#########WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。 #########官網位址######Github#########三、了解前後分離的演變史######為什麼需要前後分離##### #3.1、後端為主的MVC時代######為了降低開發的複雜度，以後端為出發點，例如：Struts、Spring MVC等框架的使用，就是後端的MVC時代；### 以# ##SpringMVC###流程為例：##########

發起請求到前端控制器(Dispatcher Servlet)
#前端控制器請求HandlerMapping查找Handler，可以根據xml配置、註解進行查找
處理器映射器HandlerMapping向前端控制器傳回Handler
前端控制器呼叫處理器適配器去執行Handler
處理器適配器去執行Handler
Handler執行完成給適配器返回ModelAndView
處理器適配器向前端控制器返回ModelAndView，ModelAndView是SpringMvc框架的一個底層對象，包括Model和View
前端控制器要求視圖解析器去進行視圖解析，根據邏輯視圖名稱解析成真正的視圖(JSP )
視圖解析器向前端控制器返回View
前端控制器進行視圖渲染，視圖渲染將模型資料(在ModelAndView對象中)填入request網域
前端控制器向使用者回應結果
#優點
MVC是一個非常好的協作模式，能夠有效降低程式碼的耦合度從架構上能夠讓開發者明白程式碼應該寫在哪裡。為了讓View更純粹，也可以使用Thyme leaf、Frree marker等模板引擎，讓模板裡無法寫入Java程式碼，讓前後端分工更加清晰。
缺點
前端開發重度依賴開發環境，開發效率低，這種架構下，前後端協作有兩種模式：
- 第一種是前端寫DEMO，寫好後，讓後端去套模板。好處是DEMO可以本地開發，很有效率。不足是還需要後端套模板，有可能套錯，套完後還需要前端確定，來回溝通調整的成本比較大；
- 另一種協作模式是前端負責瀏覽器端的所有開發和伺服器端的View層模板開發。好處是UI相關的程式碼都是前端去寫就好，後端不用太關注，不足就是前端開發重度綁定後端環境，環境成為影響前端開發效率的重要因素。
前後端職責糾纏不清：模板引擎功能強大，依舊可以透過拿到的上下文變數來實現各種業務邏輯。這樣，只要前端弱勢一點，往往就會被後端要求在模板層寫出不少業務代碼，還有一個很大的灰色地帶是Controller，頁面路由等功能本應該是前端最關注的，但卻是由後端來實現。 Controller本身與Model往往也會糾纏不清，看了讓人咬牙的業務程式碼常會出現在Controller層。這些問題不能全歸結於程式設計師的素養，否則JSP就夠了。
對前端發揮的限制：效能優化如果只在前端做空間非常有限，於是我們經常需要後端合作，但由於後端框架限制，我們很難使用[Comet】、【Big Pipe 】等技術方案來優化效能。
註：在這段期間(2005年以前) ，包含早期的JSP、PHP可以稱之為Web 1.0時代。這裡想說一句，如果你是一名Java初學者，請不要再把一些陳舊的技術當回事了，比如JSP，因為時代在變、技術在變、什麼都在變(引用扎克伯格的一句話：唯一不變的是變化本身)；當我們去給大學做實訓時，有些同學會認為我們沒有講什麼乾貨，其實不然，只能說是你認知裡的干貨對於市場來說早就過時了而已

3.2、基於AJAX帶來的SPA時代

時間回到2005年A OAX(Asynchronous JavaScript And XML，異步JavaScript和XML ，老技術新用法)被正式提出並開始使用CDN作為靜態資源存儲，於是出現了JavaScript王者歸來(在這之前JS都是用來在網頁上貼狗皮膏藥廣告的) 的SPA(Single Page Application) 單頁應用時代。

優點
這種模式下， **前後端的分工非常清晰，前後端的關鍵協作點是AJAX介面。 **看起來是如此美妙，但回過頭來看看的話，這與JSP時代區別不大。複雜度從服務端的JSP移到了瀏覽器的JavaScript，瀏覽器端變得非常複雜。類似Spring MVC， 這個時代開始出現瀏覽器端的分層架構：

# 缺點

前後端介面的約定：如果後端的介面一塌糊塗，如果後端的業務模式不夠穩定，那麼前端開發會很痛苦；不少團隊也有類似嘗試，透過介面規則、接口平台等方式來做。 有了和後端一起沉澱的介面規則，還可以用來模擬數據，使得前後端可以在約定介面後實現高效並行開發。
前端開發的複雜度控制：SPA應用大多以功能互動型為主，JavaScript程式碼過十萬行很正常。大量JS程式碼的組織，與View層的綁定等，都不是容易的事。

3.3、前端為主的MV*時代

此處的MV*模式如下：

MVC(同步通訊為主) ：Model 、View、Controller
MVP(非同步通訊為主) ：Model、View、Presenter
MVVM(非同步通訊為主)：Model、View、View Model為了降低前端開發複雜度，湧現了大量的前端框架，例如：Angular JS、React、Vue.js、Ember JS等，這些框架總的原則是先依型別分層，例如Templates、Controllers、Models，然後再在層內做切分，如下圖：

##優點

前後端職責很清晰：前端工作在瀏覽器端，後端工作在服務端。清楚的分工，可以讓開發並行，測試資料的模擬不難，前端可以本地開發。後端則可專注於業務邏輯的處理，輸出RESTful等介面。
前端開發的複雜度可控：前端程式碼很重，但合理的分層，讓前端程式碼能各司其職。這一塊蠻有意思的，簡單如模板特性的選擇，就有很多很多講究。並非越強大越好，限制什麼，留下哪些自由，程式碼應該如何組織，所有這一切設計，得花一本書的厚度去說明。
部署相對獨立：可以快速改進產品體驗缺點
全異步，對SEO不利。往往還需要服務端做同步渲染的降級方案。
效能並非最佳，特別是在行動網路環境下。
SPA無法滿足所有需求，依舊存在大量多頁面應用程式。 URL Design需要後端配合，前端無法完全掌控。

3.4、Node JS帶來的全端時代

前端為主的MV*模式解決了很多很多問題，但如上所述，依舊存在不少不足之處。隨著Node JS的興起， JavaScript開始有能力運行在服務端。這意味著可以有一個新的研發模式：

在這種研發模式下，前後端的職責很清楚。對前端來說，兩個UI層各司其職：

Front-end Ul layer處理瀏覽器層的展現邏輯。透過CSS渲染樣式，透過JavaScript加入互動功能， HTML的生成也可以放在這層，具體看應用場景。
Back-end Ul layer處理路由、範本、資料取得、Cookie等。透過路由，前端終於可以自主把控URL Design，這樣無論是單頁應用或多頁應用，前端都可以自由調控。後端也終於可以擺脫對展現的強烈關注，轉而可以專心於業務邏輯層的開發。
透過Node， WebServer層也是JavaScript程式碼，這表示部分程式碼可前後復用，需要SEO的場景可以在服務端同步渲染，由於非同步請求太多導致的效能問題也可以透過服務端來緩解。前一種模式的不足，透過這種模式幾乎都能完美解決掉。
與JSP模式相比，全端模式看起來是一種回歸，也的確是一種向原始開發模式的回歸，不過是一種螺旋上升式的回歸。
基於Node JS的全端模式，依舊面臨許多挑戰：
需要前端對服務端程式設計有更進一步的認知。例如TCP/IP等網路知識的掌握。
Node JS層與Java層的高效率通訊。 Node JS模式下，都在伺服器端， RESTful HTTP通訊未必高效，透過SOAP等方式通訊更有效率。一切都需要在驗證中前進。
對部著、維運層面的熟練了解，需要更多知識點和實操經驗。
大量歷史遺留問題如何過渡。這可能是最大最大的阻力。
註：看到這裡，相信很多同學就可以理解，為什麼我總在課堂上說：「前端想學後台很難，而我們後端程式設計師學任何東西都很簡單」；就是因為我們後端程式設計師具備相對完善的知識體系。
全端!So Easy!

3.5、總結

#綜上所述，模式也好，技術也罷，沒有好壞優劣之分，只有適合不適合；前後分離的開發思想主要是基於Soc(關注度分離原則)，上面種種模式，都是讓前後端的職責更清晰，分工更合理高效。

四、第一個Vue程式

4.1、什麼是MVVM

MVVM（Model-View-ViewModel）是一種軟體設計模式，由微軟WPF（用於替代WinForm，以前就是用這個技術開發桌面應用程式的）和Silverlight（類似Java Applet，簡單點說就是在瀏覽器上運行WPF）的架構師Ken Cooper和Ted Peters開發，是一種簡化使用者介面的事件驅動程式設計方式。由John Gossman（同樣也是WPF和Sliverlight的架構師）與2005年在他的部落格上發表。

MVVM源自於經典的MVC（Model-View-Controller）模式。 MVVM的核心是ViewModel層，負責轉換Model中的資料物件來讓資料變得更容易管理和使用。其作用如下：

此層向上與視圖層進行雙向資料綁定
#向下與Model層透過介面請求進行資料交互

MVVM已經相當成熟了，主要運用但不僅在網頁應用程式開發中。當下流行的MVVM框架有Vue.js，Anfular JS

4.2、為什麼要使用MVVM

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處

#低耦合：視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可重複使用：你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多View重複使用這段視圖邏輯。
獨立開發：開發人員可以專注於業務邏輯和資料的開發（ViewMode），設計人員可以專注於頁面設計。
可測試：介面素來是比較難以測試的，而現在測試可以針對ViewModel來寫。

(1)View

View是視圖層，也就是使用者介面。前端主要由HTH L和csS來構建，為了更方便地展現vi eu to del或者Hodel層的數據，已經產生了各種各樣的前後端模板語言，例如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來建構使用者介面的內建模板語言。

（2）Model

Model是指資料模型，泛指後端進行的各種業務邏輯處理與資料操控，主要圍繞資料庫系統展開。這裡的困難主要在於需要和前端約定統一的介面規則

#（3）ViewModel

ViewModel是由前端開發人員組織產生和維護的視圖資料層。在這一層，前端開發者會對從後端取得的Model資料進行轉換處理，做二次封裝，以產生符合View層使用預期的視圖資料模型。
需要注意的是View Model所封裝出來的資料模型包含視圖的狀態與行為兩部分，而Model層的資料模型是只包含狀態的

例如頁面的這一塊展示什麼，那一塊展示什麼這些都屬於視圖狀態(展示)
頁面加載進來時發生什麼，點擊這一塊發生什麼，這一塊滾動時發生什麼這些都屬於視圖行為(交互)

視圖狀態和行為都封裝在了View Model。這樣的封裝使得View Model可以完整地去描述View層。由於實現了雙向綁定， View Model的內容會即時展現在View層，這是令人興奮的，因為前端開發者再也不必低效又麻煩地透過操縱DOM去更新視圖。
MVVM框架已經把最髒最累的一塊做好了，我們開發者只需要處理和維護View Model，更新資料視圖就會自動得到相應更新，真正實現事件驅動程式設計。
View層展現的不是 Model層的數據，而是ViewModel的數據，由 ViewModel負責與Model層交互，這就完全解耦了View層和Model層，這個解耦是至關重要的，它是前後端分離方案實作的重要一環。

4.3、Vue

Vue(發音/vju/，類似view) 是一套用於建立使用者介面的漸進式框架，發佈於2014年2月。與其它大型框架不同的是， Vue被設計為可以自底向上逐層應用。 Vue的核心函式庫只關注視圖層，不僅易於上手，也便於與第三方函式庫(如：vue-router，vue-resource，vue x) 或既有專案整合。

（1）MVVM模式的實作者

Model：模型層，在這裡表示JavaScript物件
#View：視圖層，這裡表示DOM(HTML操作的元素)
ViewModel：連接視圖和資料的中間件，Vue.js就是MVVM中的View Model層的實作者

在MVVM架構中，是不允許資料和視圖直接通訊的，只能透過ViewModel來通信，而View Model就是定義了一個Observer觀察者

ViewModel能夠觀察到資料的變化，並對視圖對應的內容進行更新
ViewModel能夠監聽到視圖的變化，並能夠通知資料發生改變

至此，我們就明白了， Vue.js就是一個MV VM的實現者，他的核心就是實現了DOM監聽與資料綁定

（2）為什麼要使用Vue.js

輕量級，體積小是一個重要指標。 Vue.js壓縮後有隻有20多kb(Angular壓縮後56kb ，React壓縮後44kb )
移動優先。更適合行動端，例如行動端的Touch事件
易上手，學習曲線平穩，文檔齊全
吸取了Angular(模組化) 和React(虛擬DOＭ) 的長處，並擁有自己獨特的功能，如：計算屬性
開源，社群活躍度高

4.4、第一個Vue程式

【說明】IDEA可以安裝Vue的插件!
注意：Vue不支援IE 8及以下版本，因為Vue使用了IE 8無法模擬的ECMAScript 5特性。但它支援所有相容ECMAScript 5的瀏覽器。

（1）下載位址

開發版本
- 包含完整的警告和偵錯模式：https：//yuejs.org/ js/vue.js
- 刪除了警告，30.96KB min gzip: https://vuejs.org/js/vue.min.js
CDN
- <script src="%E2%80%9Chttps://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js%E2%80%9D"></script>
- #<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

#（2）程式碼寫

Vue.js的核心是實作了MVVM模式，她扮演的角色就是View Model層，那麼所謂的第一個應用程式就是展示她的資料綁定功能，操作流程如下：
1、建立一個HTML檔

nbsp;html>
    <meta>
    <title>Title</title>

登入後複製

2、引入Vue .js

<!--1.导入Vue.js--><script></script>12

登入後複製

3、建立一個Vue實例

<script>
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message:"hello,vue!"
        }
    });</script>

登入後複製

說明：

##el: '#vue '：綁定元素的ID
data:{message:'Hello Vue!'}：資料物件中有一個名為message的屬性，並且設定了初始值Hello Vue！

4、將資料綁定到頁面元素

<!--view层，模板--><p>
    {{message}}</p>

登入後複製

說明：只需要在綁定的元素中使用雙花括號將Vue建立的名為message屬性包起來，即可實現資料綁定功能，也就實現了View Model層所需的效果，是不是和EL表達式非常像?

（3）完整的HTML#

nbsp;html>
    <meta>
    <title>Title</title><!--view层，模板--><p>
    {{message}}</p><script></script><script>
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message:"hello,vue!"
        }
    });</script>

登入後複製

（4）測試

为了能够更直观的体验Vue带来的数据绑定功能，我们需要在浏览器测试一番，操作流程如下：
1、在浏览器上运行第一个Vue应用程序，进入开发者工具
2、在控制台输入vm.message=‘HelloWorld’，然后回车，你会发现浏览器中显示的内容会直接变成HelloWorld
此时就可以在控制台直接输入vm.message来修改值，中间是可以省略data的，在这个操作中，我并没有主动操作DOM，就让页面的内容发生了变化，这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

五、基础语法指令

4.1、v-bind

我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!
我们还可以使用v-bind来绑定元素特性!
上代码

nbsp;html>
    <meta>
    <title>Title</title>
    
    鼠标悬停几秒钟查看此处动态绑定的提示信息！  
<script></script><script>
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message: &#39;页面加载于 &#39; + new Date().toLocaleString()
        }
    });</script>

登入後複製

你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。
如果你再次打开浏览器的JavaScript控制台，输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。

4.2、v-if， v-else

什么是条件判断语句，就不需要我说明了吧，以下两个属性!

v-if
v-else

上代码

nbsp;html>
    <meta>
    <title>Title</title><p>
    </p>Yes
    No
   <script></script><script>
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            type: true
        }
    });</script>

登入後複製

测试：
1.在浏览器上运行，打开控制台!
2.在控制台输入vm.ok=false然后回车，你会发现浏览器中显示的内容会直接变成NO
注：使用v-*属性绑定数据是不需要双花括号包裹的

v-else-if

v-if
v-else-if
v-else
注：===三个等号在JS中表示绝对等于(就是数据与类型都要相等)上代码：

nbsp;html>
    <meta>
    <title>Title</title><p>
    </p>A
    B
    D
    C
<script></script><script>
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            type: &#39;A&#39;
        }
    });</script>

登入後複製

4.3、v-for

v-for

格式说明

<p>
    </p>

登入後複製

{{item.message}}---{{index}}

123456

注：items是数组，item是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！
上代码：

nbsp;html>
    <meta>
    <title>Title</title><p>
    </p>

登入後複製

{{item.message}}---{{index}}

测试：在控制台输入vm.items.push({message：'狂神说运维'})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条狂神说运维.

4.4、v-on

v-on监听事件
emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件!
上代码：

nbsp;html>
    <meta>
    <title>Title</title>
    <script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:&#39;Hello World&#39;
        },
        methods:{
            sayHi:function(event){
                //&#39;this&#39;在方法里面指向当前Vue实例
                alert(this.message);
            }
        }
    });</script>

登入後複製

点击测试
Vue还有一些基本的使用方式，大家有需要的可以再跟着官方文档看看，因为这些基本的指令几乎我们都见过了，一通百通!掌握学习的方式!

六、表单双绑、组件

6.1、什么是双向数据绑定

Vue.js是一个MV VM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

（1）为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

6.2、在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

（1）单行文本

nbsp;html>
    <meta>
    <title>Title</title>
    输入的文本：{{message}}<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });</script>

登入後複製

（2）多行文本

nbsp;html>
    <meta>
    <title>Title</title>
   多行文本：  多行文本是：{{pan}}<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello hello!"
        }
    });</script>

登入後複製

（3）单复选框

nbsp;html>
    <meta>
    <title>Title</title>
    单复选框：    
      
    {{checked}}<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });</script>

登入後複製

（4）多复选框

nbsp;html>
    <meta>
    <title>Title</title>
    多复选框：    
      
    Jack
    
      
    Jack
    
      
    Mike
    选中的值：{{checkedNames}}<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });</script>

登入後複製

（6）单选按钮

nbsp;html>
    <meta>
    <title>Title</title>
    单选框按钮    
    One
    
    Two
    选中的值：{{picked}}<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            picked:&#39;Two&#39;
        }
    });</script>

登入後複製

（7）下拉框

nbsp;html>
    <meta>
    <title>Title</title>

    下拉框:    
    value:{{pan}}<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });</script>

登入後複製

注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

6.3、什么是组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

（1）第一个Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。
使用Vue.component()方法注册组件，格式如下：

<p>
  <pan></pan></p><script></script><script>
    //先注册组件
    Vue.component("pan",{
        
        template:&#39;<li>Hello&#39;

    });
    //再实例化Vue
    var vm = new Vue({
        el:"#app",
    });</script>

登入後複製

说明：

Vue.component()：注册组件
pan：自定义组件的名字
template：组件的模板

（2）使用`props`属性传递参数

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！
注意：默认规则下props属性里的值不能为大写；

nbsp;html>
    <meta>
    <title>Title</title>
    
  <script></script><script>
    //定义组件
    Vue.component("pan",{
        props:[&#39;panh&#39;],
        template:&#39;<li>{{panh}}&#39;

    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","Linux","前端"]
        }
    });</script>

登入後複製

说明：

v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

七、Axios异步通信

7.1、什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

7.2、为什么要使用Axios

由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它操作Dom太频繁!

7.3、第一个Axios应用程序

咱们开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建一个名为data.json的文件并填入上面的内容，放在项目的根目录下

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说Java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]}

登入後複製

测试代码

nbsp;html>
    <meta>
    <title>Title</title>
    
    <p>
    </p>地名：{{info.name}}
    地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}
    链接：{{info.url}} 
<script></script><script></script><script>
    var vm = new Vue({
        el:"#vue",
        //data：属性：vm
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数
            axios                .get(&#39;data.json&#39;)
                .then(response=>(this.info=response.data));
        }
    });</script>

登入後複製

说明：

在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

7.4、Vue的生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

八、计算属性、内容分发、自定义事件

1、什么是计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!
上代码

nbsp;html>
    <meta>
    <title>Title</title><p>
    </p>currentTime1:{{currentTime1()}}
    currentTime2:{{currentTime2}}
<script></script><script>
    var vm = new Vue({
        el:"#app",
        data:{
          message:"pan"
        },
        methods:{
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function(){//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });</script>

登入後複製

注意：methods和computed里的东西不能重名
说明：

methods：定义方法，调用方法使用currentTime1()，需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”q in jiang"，改变下数据的值，再次测试观察效果!

结论：
调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

8.2、内容分发

在Vue.js中我们使用<slot></slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；

测试

比如准备制作一个待办事项组件(todo) ，该组件由待办标题(todo-title) 和待办内容(todo-items)组成，但这三个组件又是相互独立的，该如何操作呢?
第一步定义一个待办事项的组件

<p>
    <todo></todo></p><!--1.导入Vue.js--><script></script><script>
    Vue.component(&#39;todo&#39;,{
        template:&#39;<p>\
                <p>代办事项\
                <ul>\
                    <li>学习狂神说Java\
                \
            &#39;
    })</script>

登入後複製

第二步我们需要让，代办事项的标题和值实现动态绑定，怎么做呢？我们可以留一个插槽！
1-将上面的代码留出一个插槽，即slot

 Vue.component('todo',{
        template:'<p>\                <slot></slot>\                </p>

登入後複製

\ <slot></slot>\ \ ' });

2-定义一个名为todo-title的待办标题组件和 todo-items的待办内容组件

Vue.component('todo-title',{
        props:['title'],
        template:'<p>{{title}}</p>'
    });
   12345//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item","index"],
        template:"

登入後複製

{{index+1}},{{item}}

" });

3-实例化Vue并初始化数据

 var vm = new Vue({
        el:"#vue",
        data:{
            todoItems:['test1','test2','test3']
        }
    });

登入後複製

4-将这些值，通过插槽插入

<p>
    <todo>
        <todo-title></todo-title>
        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items></todo-items>    </todo></p>

登入後複製

说明：我们的todo-title和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中
完整代码如下：

nbsp;html>
    <meta>
    <title>Title</title><p>
    <todo>
        <todo-title></todo-title>
        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items></todo-items>    </todo></p><script></script><script>
    Vue.component(&#39;todo&#39;,{
        template:&#39;<p>\
                <slot name="todo-title">\
                <ul>\
                    <slot name="todo-items">\
                \
            &#39;
    });
    Vue.component(&#39;todo-title&#39;,{
        props:[&#39;title&#39;],
        template:&#39;<p>{{title}}&#39;
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item","index"],
        template:"<li>{{index+1}},{{item}}"
    });

    var vm = new Vue({
        el:"#vue",
        data:{
            title:"秦老师系列课程",
            todoItems:[&#39;test1&#39;,&#39;test2&#39;,&#39;test3&#39;]
        }
    });</script>

登入後複製

8.3、自定义事件

通以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’，参数) ，操作过程如下：
1-在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法

var vm = new Vue({
        el:"#vue",
        data:{
            title_text:"秦老师系列课程",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                //splice（） 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中index
                this.todoItems.splice(index,1);
            }
        }
    });

登入後複製

2-修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！

 Vue.component("todo-items",{
        props:["item_p","index_p"],
        template:"

登入後複製

{{index_p+1}},{{item_p}}

", methods:{ remove:function (index) { //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式 //this.$emit 自定义事件分发 this.$emit('remove',index); } } });

3-修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

<!--增加了v-on:remove="removeTodoItems(index)"自定义事件，该组件会调用Vue实例中定义的--><todo-items></todo-items>

登入後複製

对上一个代码进行修改，实现删除功能

nbsp;html>
    <meta>
    <title>Title</title>
    
        
        
        
        
    
<script></script><script>
    Vue.component(&#39;todo&#39;,{
        template:&#39;<p>\
                <slot name="todo-title">\
                <ul>\
                    <slot name="todo-items">\
                \
            &#39;
    });
    Vue.component(&#39;todo-title&#39;,{
        props:[&#39;title&#39;],
        template:&#39;<p>{{title}}&#39;
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item_p","index_p"],
        template:"<li>{{index_p+1}},{{item_p}} <button @click=&#39;remove_methods&#39;>删除",
        methods:{
            remove_methods:function (index) {
                //this.$emit 自定义事件分发
                this.$emit(&#39;remove&#39;,index);
            }
        }
    });

    var vm = new Vue({
        el:"#vue",
        data:{
            title_text:"秦老师系列课程",
            todoItems:[&#39;test1&#39;,&#39;test2&#39;,&#39;test3&#39;]
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);
            }
        }
    });</script>

登入後複製

逻辑理解

8.4、Vue入门小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到this.$emit("事件名",参数);
计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

说明

Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

官网：

https://element.eleme.cn/#/zh-CN
https://ice.work/

九、第一个vue-cli项目

9.1、什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；
项目的功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

9.2、需要的环境

Node.js：http://nodejs.cn/download/
安装就是无脑的下一步就好，安装在自己的环境目录下
Git：https://git-scm.com/doenloads
镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功：

cmd下输入node -v，查看是否能够正确打印出版本号即可！
cmd下输入npm -v，查看是否能够正确打印出版本号即可！
这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！
安装Node.js淘宝镜像加速器（cnpm）
这样的话，下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

登入後複製

安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！
安装的位置：C:\Users\administrator\AppData\Roaming\npm

安装vue-cli

cnpm instal1 vue-cli-g#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpackvue list

登入後複製

9.3、第一个vue-cli应用程序

1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录

D:\Project\vue-study;

登入後複製

2.创建一个基于webpack模板的vue应用程序

#1、首先需要进入到对应的目录 cd D:\Project\vue-study#2、这里的myvue是顶日名称，可以根据自己的需求起名vue init webpack myvue

登入後複製

一路都选择no即可；
说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

（1）初始化并运行

cd myvue
npm install
npm run dev

登入後複製

执行完成后，目录多了很多依赖

当出现问题时，可以查看提示进行处理如下

十、webpack使用

10.1、什么是Webpack

本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；
伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA(单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

10.2、模块化的演进

Script标签

	<script></script>
	<script></script>
	<script></script>

登入後複製

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域。
这种原始的加载方式暴露了一些显而易见的弊端：

全局作用域下容易造成变量冲突
文件只能按照<script></script>的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonsJS

服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。

require("module");require("../module.js");export.doStuff = function(){};module.exports = someValue;1234

登入後複製

优点：

服务器端模块便于重用
NPM中已经有超过45万个可以使用的模块包
简单易用

缺点：

同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块

实现：

服务端的NodeJS
•Browserify，浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大
modules-webmake，类似Browserify，但不如Browserify灵活
wreq，Browserify的前身

AMD

Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行。

define("module",["dep1","dep2"],functian(d1,d2){
	return someExportedValue;});require（["module","../file.js"],function(module，file){});1234

登入後複製

优点

适合在浏览器环境中异步加载模块
可以并行加载多个模块

缺点

提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅
不符合通用的模块化思维方式，是一种妥协的实现

实现

RequireJS
curl

CMD

Commons Module Definition规范和AMD很相似，尽保持简单，并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性。

define(function(require,exports,module){
	var $=require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports=...;});

登入後複製

优点：

依赖就近，延迟执行
可以很容易在NodeJS中运行缺点
依赖SPM打包，模块的加载逻辑偏重

实现

Sea.js
coolie

ES6模块

EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES 6模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。Commons JS和AMD模块，都只能在运行时确定这些东西。

import "jquery"export function doStuff(){}module "localModule"{}

登入後複製

优点

容易进行静态分析
面向未来的Ecma Script标准

缺点

原生浏览器端还没有实现该标准
全新的命令，新版的Node JS才支持

实现

Babel

大家期望的模块
系统可以兼容多种模块风格，尽量可以利用已有的代码，不仅仅只是JavaScript模块化，还有CSS、图片、字体等资源也需要模块化。

10.3、安装Webpack

WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。
安装：

npm install webpack -g
npm install webpack-cli -g

登入後複製

测试安装成功

webpack -v
webpack-cli -v

配置

创建 webpack.config.js配置文件

entry：入口文件，指定Web Pack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true}

登入後複製

直接运行webpack命令打包

10.4、使用webpack

创建项目
创建一个名为modules的目录，用于放置JS模块等资源文件
在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

	//暴露一个方法：sayHi
	exports.sayHi = function(){
		document.write("<p>Hello Webpack</p>");
	}

登入後複製

在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

//require 导入一个模块，就可以调用这个模块中的方法了var hello = require("./hello");hello.sayHi();

登入後複製

在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

module.exports = {
	entry:"./modules/main.js",
	output:{
		filename:"./js/bundle.js"
	}}

登入後複製

在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

	nbsp;html>
	
		
			<meta>
			<title>狂神说Java</title>
		
		
			<script></script>

登入後複製

在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员权限运行即可！
运行HTML看效果

说明

# 参数--watch 用于监听变化webpack --watch

登入後複製

十一、vue-router路由

11.1、说明

学习的时候，尽量的打开官方的文档

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5 历史模式或hash模式，在IE 9中自动降级
自定义的滚动行为

11.2、安装

基于第一个vue-cli进行测试学习；先查看node modules中是否存在vue-router
vue-router是一个插件包，所以我们还是需要用n pm/cn pm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

登入後複製

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter);

登入後複製

11.3、测试

1、先删除没有用的东西
2、components 目录下存放我们自己编写的组件
3、定义一个Content.vue 的组件

<template>
	<p>
		</p>
<h1 id="内容页">内容页</h1>
	</template><script>
	export default {
		name:"Content"
	}</script>

登入後複製

Main.vue组件

	<template>
	<p>
		</p>
<h1 id="首页">首页</h1>
	</template><script>
	export default {
		name:"Main"
	}</script>

登入後複製

4、安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下

import Vue from'vue'//导入路由插件import Router from 'vue-router'//导入上面定义的组件import Content from '../components/Content'import Main from '../components/Main'//安装路由Vue.use(Router) ;//配置路由export default new Router({
	routes:[
		{
			//路由路径
			path:'/content',
			//路由名称
			name:'content',
			//跳转到组件
			component:Content			},{
			//路由路径
			path:'/main',
			//路由名称
			name:'main',
			//跳转到组件
			component:Main			}
		]
	});

登入後複製

5、在main.js中配置路由

import Vue from 'vue'import App from './App'//导入上面创建的路由配置目录import router from './router'//自动扫描里面的路由配置//来关闭生产模式下给出的提示Vue.config.productionTip = false;new Vue({
	el:"#app",
	//配置路由
	router,
	components:{App},
	template:'<app></app>'});

登入後複製

6、在App.vue中使用路由

<template>
	<p>
		<!--
			router-link：默认会被渲染成一个<a>标签，to属性为指定链接
			router-view：用于渲染路由匹配到的组件
		-->
		<router-link>首页</router-link>
		<router-link>内容</router-link>
		<router-view></router-view>
	</p></template><script>
	export default{
		name:&#39;App&#39;
	}</script><style></style>

登入後複製

十二、实战快速上手

我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；

12.1、创建工程

注意：命令行都要使用管理员模式运行
1、创建一个名为hello-vue的工程vue init webpack hello-vue
2、安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

#进入工程目录cd hello-vue#安装vue-routern npm install vue-router --save-dev#安装element-uinpm i element-ui -S#安装依赖npm install# 安装SASS加载器cnpm install sass-loader node-sass --save-dev#启功测试npm run dev

登入後複製

3、Npm命令解释：

npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

12.2、创建登录页面

把没有用的初始化东西删掉！
在源码目录中创建如下结构：

assets：用于存放资源文件
components：用于存放Vue功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置

创建首页视图，在views目录下创建一个名为Main.vue的视图组件：

<template>
	<p>首页</p></template><script>
	export default {
			name:"Main"
	}</script><style></style>

登入後複製

创建登录页视图在views目录下创建名为Login.vue的视图组件，其中el-*的元素为ElementUI组件；

<template>
  <p>
    <el-form>
      <h3 id="欢迎登录">欢迎登录</h3>
      <el-form-item>
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog>
      <span>请输入账号和密码</span>
      <span>
          <el-button>确定</el-button>
        </span>
    </el-dialog>
  </p></template><script>
    export default {
        name: "Login",
      data(){
          return{
            form:{
              username:&#39;&#39;,
              password:&#39;&#39;
            },
            //表单验证，需要在 el-form-item 元素中增加prop属性
            rules:{
              username:[
                {required:true,message:"账号不可为空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密码不可为空",tigger:"blur"}
              ]
            },

            //对话框显示和隐藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //为表单绑定验证功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，该方式称为编程式导航
                this.$router.push(&#39;/main&#39;);
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }</script><style>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }</style>

登入後複製

创建路由，在router目录下创建一个名为index.js的vue-router路由配置文件

//导入vueimport Vue from 'vue';import VueRouter from 'vue-router';//导入组件import Main from "../views/Main";import Login from "../views/Login";//使用Vue.use(VueRouter);//导出export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main    },
    //首页
    {
      path: '/login',
      component: Login    },
  ]})

登入後複製

APP.vue

<template>
  <p>
    <router-view></router-view>
  </p></template><script>export default {
  name: &#39;App&#39;,}</script><style>#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;}</style>

登入後複製

main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from "./router"import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(router)Vue.use(ElementUI)/* eslint-disable no-new */new Vue({
  el: '#app',
  router,
  render:h=>h(App)})

登入後複製

测试：在浏览器打开 http://localhost:8080/#/login
如果出现错误: 可能是因为sass-loader的版本过高导致的编译错误，当前最高版本是8.0.2，需要退回到7.3.1 ；
去package.json文件里面的 "sass-loader"的版本更换成7.3.1，然后重新cnpm install就可以了；

12.3、路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。
demo
1、创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件；
Profile.vue

<template>
  <h1 id="个人信息">个人信息</h1></template><script>
  export default {
    name: "UserProfile"
  }</script><style></style>

登入後複製

2、在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；
List.vue

<template>
  <h1 id="用户列表">用户列表</h1></template><script>
  export default {
    name: "UserList"
  }</script><style></style>

登入後複製

3、修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：
Main.vue

<template>
    <p>
      <el-container>
        <el-aside>
          <el-menu>
            <el-submenu>
              <template><i></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item>
                <!--插入的地方-->
                  <router-link>个人信息</router-link>
                </el-menu-item>
                <el-menu-item>
                <!--插入的地方-->
                  <router-link>用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu>
              <template><i></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item>分类管理</el-menu-item>
                <el-menu-item>内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header>
            <el-dropdown>
              <i></i>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在这里展示视图-->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </p></template><script>
    export default {
        name: "Main"
    }</script><style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }</style>

登入後複製

4、配置嵌套路由修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块，代码如下
index.js

//导入vueimport Vue from 'vue';import VueRouter from 'vue-router';//导入组件import Main from "../views/Main";import Login from "../views/Login";//导入子模块import UserList from "../views/user/List";import UserProfile from "../views/user/Profile";//使用Vue.use(VueRouter);//导出export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main,
      //  写入子模块
      children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
      ]
    },
    //首页
    {
      path: '/login',
      component: Login    },
  ]})

登入後複製

5、路由嵌套实战效果图

图路由嵌套效果图

12.4、参数传递

这里演示如果请求带有参数该怎么传递
demo
用的还是上述例子的代码修改一些代码这里不放重复的代码了
第一种取值方式
1、修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile}

登入後複製

2、传递参数
此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称一定要和路由中的 name 属性名称匹配，因为这样 Vue 才能找到对应的路由路径；

<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定--><router-link>个人信息</router-link>

登入後複製

3、在要展示的组件Profile.vue中接收参数使用 {{$route.params.id}}来接收
Profile.vue 部分代码

登入後複製

第二种取值方式使用props 减少耦合
1、修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile, 
	props: true}

登入後複製

2、传递参数和之前一样在Main.vue中修改route-link地址

<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定--><router-link>个人信息</router-link>

登入後複製

3、在Profile.vue接收参数为目标组件增加 props 属性
Profile.vue

<template>
  <p>
    个人信息
    {{ id }}  </p></template><script>
    export default {
      props: [&#39;id&#39;],
      name: "UserProfile"
    }</script><style></style>

登入後複製

图传参效果图

12.5、组件重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下，比如：
在router下面index.js的配置

{
  path: '/main',
  name: 'Main',
  component: Main},{
  path: '/goHome',
  redirect: '/main'}

登入後複製

说明：这里定义了两个路径，一个是 /main ，一个是 /goHome，其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件；

使用的话，只需要在Main.vue设置对应路径即可；

<el-menu-item>
    <router-link>回到首页</router-link></el-menu-item>

登入後複製

12.6、路由模式与 404

路由模式有两种

hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login

修改路由配置，代码如下：

export default new Router({
  mode: 'history',
  routes: [
  ]});

登入後複製

404 demo
1.创建一个NotFound.vue视图组件
NotFound.vue

<template>
    <p>
      </p>
<h1 id="你的页面走丢了">404,你的页面走丢了</h1>
    </template><script>
    export default {
        name: "NotFound"
    }</script><style></style>

登入後複製

2.修改路由配置index.js

import NotFound from '../views/NotFound'{
   path: '*',
   component: NotFound}

登入後複製

3.效果图

图 404效果图

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

在Profile.vue中写

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

登入後複製

参数说明：
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

在钩子函数中使用异步请求

1、安装 Axios

cnpm install --save vue-axios

登入後複製

2、main.js引用 Axios

import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

登入後複製

3、准备数据：只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
数据和之前用的json数据一样需要的去上述axios例子里

// 静态数据存放的位置static/mock/data.json

登入後複製

4.在 beforeRouteEnter 中进行异步请求
Profile.vue

  export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }

登入後複製

5.路由钩子和axios结合图

更多编程相关知识，请访问：编程入门！！

以上是vue最詳細的知識整理筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn