這篇文章為大家帶來了Vue的最全、最仔細的知識整理，為實現認識前端、了解前端、掌握前端，希望對大家有幫助！
一、前端核心分析
1.1、概述
Soc原則：關注點分離原則
Vue 的核心函式庫只關注視圖層，方便與第三方函式庫或既有專案整合。
HTML CSS JS : 視圖： 給使用者看，刷新後台給的資料
網路通訊： axios
頁面跳轉： vue-router
狀態管理：vuex
Vue-UI : ICE , Element UI
1.2、前端三要素
HTML（結構）：超文字標記語言（Hyper Text Markup Language），決定網頁的結構和內容
CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
JavaScript（行為）：是一種弱型別腳本語言，其原始碼不需經過編譯，而是由瀏覽器解釋運行，用於控制網頁的行為
1.3 、結構層 （HTML）
太簡單，略
1.4、表現層（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 微軟的標準
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
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， 自由靈活地使用空間。
備註：屬於前端主流框架，選型時可考慮使用，主要特點是行動端支援較多
Element UI
Element是餓了麼前端開源維護的Vue UI元件庫， 元件齊全， 基本上涵蓋後台所需的所有元件，文件講解詳細， 例子也很豐富。主要用於開發PC端的頁面， 是一個品質比較高的Vue UI元件庫。 備註：屬於前端主流框架，選型時可考慮使用，主要特點是桌面端支援較多
ICE
飛冰是阿里巴巴團隊基於React/Angular/Vue的中後台應用解決方案， 在阿里巴巴內部， 已經有270多個幾乎所有BU的專案都在使用。飛冰包含了一條從設計端到開發端的完整鏈路，幫助使用者快速建構屬於自己的中後台應用。
備註：主要組件還是以React為主， 截止2019年02月17日更新博客前對Vue的支持還不太完善，目前尚處於觀望階段
VantUI
Vant UI是有讚前端團隊基於有讚統一的規範實現的Vue元件庫， 提供了-整套UI基礎元件和業務元件。透過Vant， 可以快速建置出風格統一的頁面，提升開發效率。
#AtUI
at-ui是一款基於Vue 2. x的前端UI元件庫，主要用於快速開發PC網站產品。它提供了一套n pm web pack babel前端開發工作流程， CSS樣式獨立， 即使採用不同的框架實作都能保持統一的UI風格。
Cube Ul
cube-ui是滴滴團隊開發的基於Vue js實現的精緻行動裝置組件庫。支援按需引入和後編譯， 輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。
#混合開發
Flutter
Flutter是Google的行動裝置UI框架， 可在極短的時間內建立Android和iOS上高品質的原生級應用程式。 Flutter可與現有程式碼一起工作， 它被世界各地的開發者和組織使用， 並且Flutter是免費和開源的。
Github
lonic官網位址
微信小程式
mpvue
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網域
前端控制器向使用者回應結果#優點 缺點
前端開發重度依賴開發環境，開發效率低，這種架構下，前後端協作有兩種模式：
第一種是前端寫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) 單頁應用時代。 優點 這個時代開始出現瀏覽器端的分層架構 ：
前後端介面的約定 ：如果後端的介面一塌糊塗，如果後端的業務模式不夠穩定，那麼前端開發會很痛苦；不少團隊也有類似嘗試，透過介面規則、接口平台等方式來做。 有了和後端一起沉澱的介面規則，還可以用來模擬數據，使得前後端可以在約定介面後實現高效並行開發。
前端開發的複雜度控制：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開始有能力運行在服務端。這意味著可以有一個新的研發模式：
Front-end Ul layer處理瀏覽器層的展現邏輯。透過CSS渲染樣式， 透過JavaScript加入互動功能， HTML的生成也可以放在這層， 具體看應用場景。
Back-end Ul layer處理路由、範本、資料取得、Cookie等。透過路由， 前端終於可以自主把控URL Design， 這樣無論是單頁應用或多頁應用， 前端都可以自由調控。後端也終於可以擺脫對展現的強烈關注，轉而可以專心於業務邏輯層的開發。
需要前端對服務端程式設計有更進一步的認知。例如TCP/IP等網路知識的掌握。
Node JS層與Java層的高效率通訊。 Node JS模式下， 都在伺服器端， RESTful HTTP通訊未必高效， 透過SOAP等方式通訊更有效率。一切都需要在驗證中前進。
對部著、維運層面的熟練了解，需要更多知識點和實操經驗。
大量歷史遺留問題如何過渡。這可能是最大最大的阻力。 註：看到這裡，相信很多同學就可以理解，為什麼我總在課堂上說：「前端想學後台很難，而我們後端程式設計師學任何東西都很簡單」；就是因為我們後端程式設計師具備相對完善的知識體系。
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。這樣的封裝使得View Model可以完整地去描述View層。由於實現了雙向綁定， View Model的內容會即時展現在View層， 這是令人興奮的， 因為前端開發者再也不必低效又麻煩地透過操縱DOM去更新視圖。 事件驅動程式設計。 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的插件!
（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带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：
五、基础语法指令
4.1、v-bind
我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!上代码
nbsp;html>
<meta>
<title>Title</title>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message: '页面加载于 ' + new Date().toLocaleString()
}
});</script> 登入後複製
你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。
4.2、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> 登入後複製
测试：vm.ok=false然后回车，你会发现浏览器中显示的内容会直接变成NOv-*属性绑定数据是不需要双花括号包裹的
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: 'A'
}
});</script> 登入後複製
4.3、v-for
格式说明
{{item.message}}---{{index}} 123456
注：items是数组，item是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！
nbsp;html>
<meta>
<title>Title</title><p>
</p> 登入後複製
{{item.message}}---{{index}}
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
items:[
{message:'狂神说Java'},
{message:'狂神说前端'},
{message:'狂神说运维'}
]
}
});</script>
测试：在控制台输入vm.items.push({message：'狂神说运维'})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条狂神说运维.
4.4、v-on
v-on监听事件click是vue的事件， 可以绑定到Vue中的methods中的方法事件!上代码 ：
nbsp;html>
<meta>
<title>Title</title>
点我
<script></script><script>
var vm = new Vue({
el:"#app",
data:{
message:'Hello World'
},
methods:{
sayHi:function(event){
//'this'在方法里面指向当前Vue实例
alert(this.message);
}
}
});</script> 登入後複製
点击测试
六、表单双绑、组件
6.1、什么是双向数据绑定
Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
（1）为什么要实现数据的双向绑定
在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。
6.2、在表单中使用双向数据绑定
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
（1）单行文本 （2）多行文本 nbsp;html>
<meta>
<title>Title</title>
多行文本： 多行文本是：{{pan}}
<script></script><script>
var vm = new Vue({
el:"#app",
data:{
message:"Hello hello!"
}
});</script> 登入後複製
（3）单复选框 （4 ）多复选框
（6）单选按钮 （7）下拉框 nbsp;html>
<meta>
<title>Title</title>
下拉框:
---请选择---
A
B
C
D
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:'<li>Hello'
});
//再实例化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:['panh'],
template:'<li>{{panh}}'
});
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
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('data.json')
.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#生命周期图示
八、计算属性、内容分发、自定义事件
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('todo',{
template:'<p>\
<p>代办事项\
<ul>\
<li>学习狂神说Java\
\
'
})</script> 登入後複製
第二步 我们需要让，代办事项的标题和值实现动态绑定，怎么做呢？我们可以留一个插槽！
Vue.component('todo',{
template:'<p>\ <slot></slot>\ </p> 登入後複製
\ '
});
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('todo',{
template:'<p>\
<slot name="todo-title">\
<ul>\
<slot name="todo-items">\
\
'
});
Vue.component('todo-title',{
props:['title'],
template:'<p>{{title}}'
});
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
Vue.component("todo-items",{
props:["item","index"],
template:"<li>{{index+1}},{{item}}"
});
var vm = new Vue({
el:"#vue",
data:{
title:"秦老师系列课程",
todoItems:['test1','test2','test3']
}
});</script> 登入後複製
8.3、自定义事件
通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数) ， 操作过程如下：
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('todo',{
template:'<p>\
<slot name="todo-title">\
<ul>\
<slot name="todo-items">\
\
'
});
Vue.component('todo-title',{
props:['title'],
template:'<p>{{title}}'
});
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
Vue.component("todo-items",{
props:["item_p","index_p"],
template:"<li>{{index_p+1}},{{item_p}} <button @click='remove_methods'>删除",
methods:{
remove_methods:function (index) {
//this.$emit 自定义事件分发
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:"#vue",
data:{
title_text:"秦老师系列课程",
todoItems:['test1','test2','test3']
},
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的项目模板；项目的功能
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
9.2、需要的环境
Node.js：http://nodejs.cn/download/
Git：https://git-scm.com/doenloads
确认nodejs安装成功：
cmd下输入node -v，查看是否能够正确打印出版本号即可！
cmd下输入npm -v，查看是否能够正确打印出版本号即可！安装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.
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 登入後複製
优点
适合在浏览器环境中异步加载模块
可以并行加载多个模块
缺点
提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅
不符合通用的模块化思维方式，是一种妥协的实现
实现
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打包，模块的加载逻辑偏重
实现
ES6模块
EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES 6模块的设计思想， 是尽量静态化， 使编译时就能确定模块的依赖关系， 以及输入和输出的变量。Commons JS和AMD模块，都只能在运行时确定这些东西。
import "jquery"export function doStuff(){}module "localModule"{} 登入後複製
优点
容易进行静态分析
面向未来的Ecma Script标准
缺点
原生浏览器端还没有实现该标准
全新的命令，新版的Node JS才支持
实现
大家期望的模块
10.3、安装Webpack
WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。安装：
npm install webpack -g
npm install webpack-cli -g 登入後複製
测试安装成功
webpack -vwebpack-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
npm install vue-router --save-dev 登入後複製
如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter); 登入後複製
11.3、测试
1、先删除没有用的东西components 目录下存放我们自己编写的组件Content.vue 的组件
<template>
<p>
</p>
<h1>内容页</h1>
</template><script>
export default {
name:"Content"
}</script> 登入後複製
Main.vue组件
<template>
<p>
</p>
<h1>首页</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:'App'
}</script><style></style> 登入後複製
十二、实战快速上手
我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；
12.1、创建工程
注意：命令行都要使用管理员模式运行vue init webpack hello-vue
#进入工程目录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>欢迎登录</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:'',
password:''
},
//表单验证，需要在 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('/main');
}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: 'App',}</script><style>#app {
font-family: 'Avenir', 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
12.3、路由嵌套
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。
<template>
<h1>个人信息</h1></template><script>
export default {
name: "UserProfile"
}</script><style></style> 登入後複製
2、在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；
<template>
<h1>用户列表</h1></template><script>
export default {
name: "UserList"
}</script><style></style> 登入後複製
3、 修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：
<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中写入子模块，代码如下
//导入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、参数传递
这里演示如果请求带有参数该怎么传递
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile} 登入後複製
2、传递参数
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定--><router-link>个人信息</router-link> 登入後複製
登入後複製
3、在要展示的组件Profile.vue中接收参数 使用 {{$route.params.id}}来接收
<p>
</p>
个人信息
{{$route.params.id}} 登入後複製
第二种取值方式 使用props 减少耦合
{
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 属性
<template>
<p>
个人信息
{{ id }} </p></template><script>
export default {
props: ['id'],
name: "UserProfile"
}</script><style></style> 登入後複製
图 传参效果图
12.5、组件重定向
重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下，比如：
{
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
<template>
<p>
</p>
<h1>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：在进入路由前执行
在Profile.vue中写
export default {
name: "UserProfile",
beforeRouteEnter: (to, from, next) => {
console.log("准备进入个人信息页");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开个人信息页");
next();
}
} 登入後複製
参数说明：
在钩子函数中使用异步请求
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 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
// 静态数据存放的位置static/mock/data.json 登入後複製
4.在 beforeRouteEnter 中进行异步请求
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中文網其他相關文章！
