Bili狂神说Vue笔记
1、前端知識體系
想要成為真正的“互聯網Java全棧工程師”還有很長的一段路要走，其中前端是繞不開的一門必修課。本階段課程的主要目的就是帶領Java后臺程序員認識前端、了解前端、掌握前端，為實現成為“互聯網Java全棧工程師”再向前邁進一步。
1.1、前端三要素
- HTML（結構）：超文本標記語言（Hyper Text Markup Language），決定網頁的結構和內容
- CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
- JavaScript（行為）：是一種弱類型腳本語言，其源碼不需經過編譯，而是由瀏覽器解釋運行，用于控制網頁的行為
1.2、結構層（HTML）
太簡單，略
1.3、表現層（CSS）
CSS層疊樣式表是一門標記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：
- 語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
- 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護；
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為【CSS預處理器】的工具,提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大的提高了前端在樣式上的開發效率。
什么是CSS預處理器
CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只需要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的編程語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用”。
常用的CSS預處理器有哪些
- SASS：基于Ruby ，通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高于LESS。
- LESS：基于NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低于SASS，但在實際開發中足夠了，所以如果我們后臺人員如果需要的話，建議使用LESS。
1.4、行為層（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 通信功能；
UI框架
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ElementUI、iview、ice：餓了么出品，基于Vue的UI框架
- BootStrap：Teitter推出的一個用于前端開發的開源工具包
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
JavaScript構建工具
- Babel：JS編譯工具，主要用于瀏覽器不支持的ES新特性，比如用于編譯TypeScript
- WebPack：模塊打包器，主要作用就是打包、壓縮、合并及按序加載
注：以上知識點已將WebApp開發所需技能全部梳理完畢
1.5、三端同一
混合開發（Hybrid App）
主要目的是實現一套代碼三端統一（PC、Android：.apk、iOS：.ipa）并能夠調用到設備底層硬件（如：傳感器、GPS、攝像頭等），打包方式主要有以下兩種：
- 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）
微信小程序
詳見微信官網，這里就是介紹一個方便微信小程序UI開發的框架：WeUI
1.6、后端技術
前端人員為了方便開發也需要掌握一定的后端技術但我們Java后臺人員知道后臺知識體系極其龐大復雜，所以為了方便前端人員開發后臺應用，就出現了Node JS這樣的技術。Node JS的作者已經聲稱放棄Node JS(說是架構做的不好再加上笨重的node modules，可能讓作者不爽了吧)開始開發全新架構的De no
既然是后臺技術，那肯定也需要框架和項目管理工具， Node JS框架及項目管理工具如下：
- Express：Node JS框架
- Koa：Express簡化版
- NPM：項目綜合管理工具，類似于Maven
- YARN：NPM的替代方案，類似于Maven和Gradle的關系
主流前端框架
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是谷歌的移動端UI框架， 可在極短的時間內構建Android和iOS上高質量的原生級應用。Flutter可與現有代碼一起工作， 它被世界各地的開發者和組織使用， 并且Flutter是免費和開源的。
- 官網地址
- Github
備注：Google出品， 主要特點是快速構建原生APP應用程序， 如做混合應用該框架為必選框架
lonic
lonic既是一個CSS框架也是一個Javascript UI庫， lonic是目前最有潛力的一款HTML 5手機應用開發框架。通過SASS構建應用程序， 它提供了很多UI組件來幫助開發者開發強大的應用。它使用JavaScript MV VM框架和Angular JS/Vue來增強應用。提供數據的雙向綁定， 使用它成為Web和移動開發者的共同選擇。
- 官網地址
·官網文檔
·Git hub
微信小程序
mpvue
mpvue是美團開發的一個使用Vue.js開發小程序的前端框架， 目前支持微信小程序、百度智能小程序，頭條小程序和支付寶小程序?？蚣芑赩ue.js， 修改了的運行時框架runtime和代碼編譯器compiler實現， 使其可運行在小程序環境中， 從而為小程序開發引入了Vue.js開發體驗。
·官網地址
·Git hub
備注：完備的Vue開發體驗， 井且支持多平臺的小程序開發， 推薦使用
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫， 由微信官方設計團隊為微信內網頁和微信小程序量身設計， 令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。
- 官網地址
- Github
2、了解前后分離的演變史
為什么需要前后分離
2.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， 因為時代在變、技術在變、什么都在變(引用扎克伯格的一句話：唯一不變的是變化本身)；當我們去給大學做實訓時，有些同學會認為我們沒有講什么干貨，其實不然，只能說是你認知里的干貨對于市場來說早就過時了而已
2.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層的綁定等，都不是容易的事情。
2.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需要后端配合， 前端無法完全掌控。
2.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!
2.5、總結
綜上所述，模式也好，技術也罷，沒有好壞優劣之分，只有適合不適合；前后分離的開發思想主要是基于Soc(關注度分離原則)，上面種種模式，都是讓前后端的職責更清晰，分工更合理高效
#2.第一個Vue程序
##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
##2、為什么要使用MVVM
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處
- 低耦合：視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 可復用：你可以把一些視圖邏輯放在一個ViewModel里面，讓很多View重用這段視圖邏輯。
- 獨立開發：開發人員可以專注于業務邏輯和數據的開發（ViewMode），設計人員可以專注于頁面設計。
- 可測試：界面素來是比較難以測試的，而現在測試可以針對ViewModel來寫。
（1）View
View是視圖層， 也就是用戶界面。前端主要由HTML和CSS來構建， 為了更方便地展現vi ew Model或者Model層的數據， 已經產生了各種各樣的前后端模板語言， 比如FreeMarker，Thymeleaf等等， 各大MVVM框架如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層， 這個解耦是至關重要的， 它是前后端分離方案實施的重要一環。
##2、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Ｍ) 的長處， 并擁有自己獨特的功能，如：計算屬性
- 開源，社區活躍度高
- ……
##3、第一個Vue程序
【說明】IDEA可以安裝Vue的插件!
??注意：Vue不支持IE 8及以下版本， 因為Vue使用了IE 8無法模擬的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的瀏覽器。
（1）下載地址
- 開發版本
- 包含完整的警告和調試模式：https：//yuejs.org/js/vue.js
- 刪除了警告， 30.96KBmin+gzip：https：//vuejs.org/js/vue.min.js
- CDN
- <script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></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文件
2、引入Vue.js
<!--1.導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>3、創建一個Vue實例
<script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數據*/data:{message:"hello,vue!"}}); </script>說明：
- el: '#vue'：綁定元素的ID
- data:{message:'Hello Vue!'}：數據對象中有一個名為message的屬性，并設置了初始值 Hello Vue！
4、將數據綁定到頁面元素
<!--view層，模板--> <div id="app">{{message}} </div>說明：只需要在綁定的元素中使用雙花括號將Vue創建的名為message屬性包裹起來， 即可實現數據綁定功能， 也就實現了View Model層所需的效果， 是不是和EL表達式非常像?
（3）完整的HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><!--view層，模板--> <div id="app">{{message}} </div><!--1.導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數據*/data:{message:"hello,vue!"}}); </script> </body> </html>（4）測試
為了能夠更直觀的體驗Vue帶來的數據綁定功能， 我們需要在瀏覽器測試一番， 操作流程如下：
??1、在瀏覽器上運行第一個Vue應用程序， 進入開發者工具
??2、在控制臺輸入vm.message=‘HelloWorld’， 然后回車， 你會發現瀏覽器中顯示的內容會直接變成HelloWorld
??此時就可以在控制臺直接輸入vm.message來修改值， 中間是可以省略data的， 在這個操作中， 我并沒有主動操作DOM， 就讓頁面的內容發生了變化， 這就是借助了Vue的數據綁定功能實現的； MV VM模式中要求View Model層就是使用觀察者模式來實現數據的監聽與綁定， 以做到數據與視圖的快速響應。
3.基礎語法知識
##1、v-bind
我們已經成功創建了第一個Vue應用!看起來這跟渲染一個字符串模板非常類似， 但是Vue在背后做了大量工作。現在數據和DOM已經被建立了關聯， 所有東西都是響應式的。我們在控制臺操作對象屬性，界面可以實時更新!
??我們還可以使用v-bind來綁定元素特性!
??上代碼
你看到的v-bind等被稱為指令。指令帶有前綴v以表示它們是Vue提供的特殊特性?？赡苣阋呀洸碌搅?#xff0c; 它們會在渲染的DOM上應用特殊的響應式行為在這里，該指令的意思是：“將這個元素節點的title特性和Vue實例的message屬性保持一致”。
??如果你再次打開瀏覽器的JavaScript控制臺， 輸入app， message=‘新消息’，就會再一次看到這個綁定了title特性的HTML已經進行了更新。
##2、v-if， v-else
什么是條件判斷語句，就不需要我說明了吧，以下兩個屬性!
- v-if
- v-else
上代碼
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--view層，模板--> <div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1></div><!--1.導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數據*/data:{type: true}}); </script> </body> </html>測試：
1.在瀏覽器上運行，打開控制臺!
2.在控制臺輸入vm.ok=false然后回車，你會發現瀏覽器中顯示的內容會直接變成NO
??注：使用v-*屬性綁定數據是不需要雙花括號包裹的
##v-else-if
- v-if
- v-else-if
- v-else
??注：===三個等號在JS中表示絕對等于(就是數據與類型都要相等)上代碼：
##3、v-for
- v-for
格式說明
<div id="app"><li v-for="(item,index) in items">{{item.message}}---{{index}}</li></div> 123456注：items是數組，item是數組元素迭代的別名。我們之后學習的Thymeleaf模板引擎的語法和這個十分的相似！
??上代碼：
測試：在控制臺輸入vm.items.push({message：'狂神說運維'})，嘗試追加一條數據，你會發現瀏覽器中顯示的內容會增加一條狂神說運維.
v-on
??v-on監聽事件
?emsp;事件有Vue的事件、和前端頁面本身的一些事件!我們這里的click是vue的事件， 可以綁定到Vue中的methods中的方法事件!
??上代碼：
點擊測試
??Vue還有一些基本的使用方式， 大家有需要的可以再跟著官方文檔看看， 因為這些基本的指令幾乎我們都見過了，一通百通!掌握學習的方式!
4.表單雙向綁定以及組件
##1、什么是雙向數據綁定
Vue.js是一個MV VM框架， 即數據雙向綁定， 即當數據發生變化的時候， 視圖也就發生變化， 當視圖發生變化的時候，數據也會跟著同步變化。這也算是Vue.js的精髓之處了。
??值得注意的是，我們所說的數據雙向綁定，一定是對于UI控件來說的非UI控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用vue x那么數據流也是單項的，這時就會和雙向數據綁定有沖突。
###（1）為什么要實現數據的雙向綁定
在Vue.js中，如果使用vuex， 實際上數據還是單向的， 之所以說是數據雙向綁定，這是用的UI控件來說， 對于我們處理表單， Vue.js的雙向數據綁定用起來就特別舒服了。即兩者并不互斥，在全局性數據流使用單項，方便跟蹤；局部性數據流使用雙向，簡單易操作。
##2、在表單中使用雙向數據綁定
你可以用v-model指令在表單、及元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇， 但v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。
??注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數據作為數據來源。你應該通過JavaScript在組件的data選項中聲明初始值!
###（1）單行文本
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app">輸入的文本：<input type="text" v-model="message" value="hello">{{message}} </div><script src="../js/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""}}); </script> </body> </html>###（2）多行文本
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app">多行文本：<textarea v-model="pan"></textarea> 多行文本是：{{pan}} </div><script src="../js/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{message:"Hello hello!"}}); </script> </body> </html>###（3）單復選框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">單復選框：<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{checked}}</label> </div><script src="../js/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{checked:false}}); </script> </body> </html>###（4）多復選框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">多復選框：<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label><input type="checkbox" id="join" value="Join" v-model="checkedNames"> <label for="join">Jack</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label><span>選中的值：{{checkedNames}}</span> </div><script src="../js/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{checkedNames:[]}}); </script> </body> </html>###（6）單選按鈕
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">單選框按鈕<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><span>選中的值：{{picked}}</span> </div><script src="../js/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{picked:'Two'}}); </script> </body> </html>###（7）下拉框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"> <!-- 性別：<input type="radio" name="sex" value="男" v-model="pan">男<input type="radio" name="sex" value="女" v-model="pan">女<p>選中了：{{pan}}</p>-->下拉框:<select v-model="pan"><option value="" disabled>---請選擇---</option><option>A</option><option>B</option><option>C</option><option>D</option></select><span>value:{{pan}}</span></div><script src="../js/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{pan:"A"}}); </script> </body> </html>注意：v-model表達式的初始值未能匹配任何選項，元系將被渲染為“未選中”狀態。 在iOS中， 這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS不會觸發change事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。
##3、什么是組件
組件是可復用的Vue實例， 說白了就是一組可以重復使用的模板， 跟JSTL的自定義標簽、Thymeleal的th:fragment等框架有著異曲同工之妙，通常一個應用會以一棵嵌套的組件樹的形式來組織：
例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件。
###（1）第一個Vue組件
注意：在實際開發中，我們并不會用以下方式開發組件，而是采用vue-cli創建，vue模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。
??使用Vue.component()方法注冊組件，格式如下：
說明：
- Vue.component()：注冊組件
- pan：自定義組件的名字
- template：組件的模板
###（2）使用props屬性傳遞參數
像上面那樣用組件沒有任何意義，所以我們是需要傳遞參數到組件的，此時就需要使用props屬性了！
??注意：默認規則下props屬性里的值不能為大寫；
說明：
- v-for="item in items"：遍歷Vue實例中定義的名為items的數組，并創建同等數量的組件
- v-bind:panh="item"：將遍歷的item項綁定到組件中props定義名為item屬性上；= 號左邊的panh為props定義的屬性名，右邊的為item in items 中遍歷的item項的值
5.Axios異步通信
##什么是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/
##為什么要使用Axios
由于Vue.js是一個視圖層框架并且作者(尤雨溪) 嚴格準守SoC(關注度分離原則)所以Vue.js并不包含AJAX的通信功能， 為了解決通信問題， 作者單獨開發了一個名為vue-resource的插件， 不過在進入2.0版本以后停止了對該插件的維護并推薦了Axios框架。少用jQuery， 因為它操作Dom太頻繁!
##第一個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/"}] }測試代碼
<!DOCTYPE html> <html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--v-cloak 解決閃爍問題--><style>[v-cloak]{display: none;}</style> </head> <body> <div id="vue"><div>地名：{{info.name}}</div><div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div><div>鏈接：<a v-binf:href="info.url" target="_blank">{{info.url}}</a> </div> </div><!--引入js文件--> <script src="../js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#vue",//data：屬性：vmdata(){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></body> </html>說明：
##Vue的生命周期
官方文檔：https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示
??Vue實例有一個完整的生命周期，也就是從開始創建初女臺化數據、編譯模板、掛載DOM、渲染一更新一渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
??在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊JS方法，可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。
6計算機屬性、內容分發、自定義事件
##1、什么是計算屬性
計算屬性的重點突出在屬性兩個字上(屬性是名詞)，首先它是個屬性其次這個屬性有計算的能力(計算是動詞)，這里的計算就是個函數：簡單點說，它就是一個能夠將計算結果緩存起來的屬性(將行為轉化成了靜態的屬性)，僅此而已；可以想象為緩存!
??上代碼
注意：methods和computed里的東西不能重名
說明：
- methods：定義方法， 調用方法使用currentTime1()， 需要帶括號
- computed：定義計算屬性， 調用屬性使用currentTime2， 不需要帶括號：this.message是為了能夠讓currentTime2觀察到數據變化而變化
- 如何在方法中的值發生了變化，則緩存就會刷新!可以在控制臺使用vm.message=”q in jiang"， 改變下數據的值，再次測試觀察效果!
??結論：
??調用方法時，每次都需要講行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果緩存起來，采用計算屬性可以很方便的做到這點，計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷；
##2、內容分發
在Vue.js中我們使用<slot>元素作為承載分發內容的出口，作者稱其為插槽，可以應用在組合組件的場景中；
###測試
比如準備制作一個待辦事項組件(todo) ， 該組件由待辦標題(todo-title) 和待辦內容(todo-items)組成，但這三個組件又是相互獨立的，該如何操作呢?
??第一步定義一個待辦事項的組件
第二步 我們需要讓，代辦事項的標題和值實現動態綁定，怎么做呢？我們可以留一個插槽！
??1-將上面的代碼留出一個插槽，即slot
2-定義一個名為todo-title的待辦標題組件 和 todo-items的待辦內容組件
Vue.component('todo-title',{props:['title'],template:'<div>{{title}}</div>'}); //這里的index，就是數組的下標，使用for循環遍歷的時候，可以循環出來！Vue.component("todo-items",{props:["item","index"],template:"<li>{{index+1}},{{item}}</li>"});3-實例化Vue并初始化數據
var vm = new Vue({el:"#vue",data:{todoItems:['test1','test2','test3']}});4-將這些值，通過插槽插入
<div id="vue"><todo><todo-title slot="todo-title" title="秦老師系列課程"></todo-title><!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>--><!--如下為簡寫--><todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items</todo> </div>說明：我們的todo-title和todo-items組件分別被分發到了todo組件的todo-title和todo-items插槽中
??完整代碼如下：
##3、自定義事件
通以上代碼不難發現，數據項在Vue的實例中， 但刪除操作要在組件中完成， 那么組件如何才能刪除Vue實例中的數據呢?此時就涉及到參數傳遞與事件分發了， Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題； 使用this.$emit(‘自定義事件名’， 參數) ， 操作過程如下：
??1-在vue的實例中增加了methods對象并定義了一個名為removeTodoltems的方法
2-修改todo-items待辦內容組件的代碼，增加一個刪除按鈕，并且綁定事件！
Vue.component("todo-items",{props:["item_p","index_p"],template:"<li>{{index_p+1}},{{item_p}} <button @click='remove'>刪除</button></li>",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 slot="todo-items" v-for="(item,index) in todoItems":item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"> </todo-items>對上一個代碼進行修改，實現刪除功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--view層，模板--> <div id="vue"><todo><todo-title slot="todo-title" :title="title_text"></todo-title><!--<todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"></todo-items>--><!--如下為簡寫--><todo-items slot="todo-items" v-for="(item,index) in todoItems":item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"></todo-items></todo> </div> <!--1.導入Vue.js--> <script src="../js/vue.js"></script> <script type="text/javascript">Vue.component('todo',{template:'<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'});Vue.component('todo-title',{props:['title'],template:'<div>{{title}}</div>'});//這里的index，就是數組的下標，使用for循環遍歷的時候，可以循環出來！Vue.component("todo-items",{props:["item_p","index_p"],template:"<li>{{index_p+1}},{{item_p}} <button @click='remove_methods'>刪除</button></li>",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> </body> </html>###邏輯理解
##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/
7.第一個Vue-cli項目（腳手架）
##1、什么是vue-cli
vue-cli官方提供的一個腳手架，用于快速生成一個vue的項目模板；
??預先定義好的目錄結構及基礎代碼，就好比咱們在創建Maven項目時可以選擇創建一個骨架項目，這個估計項目就是腳手架，我們的開發更加的快速；
??項目的功能
- 統一的目錄結構
- 本地調試
- 熱部署
- 單元測試
- 集成打包上線
##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）
??這樣的話，下載會快很多~
安裝的過程可能有點慢~，耐心等待！雖然安裝了cnpm，但是盡量少用！
??安裝的位置：C:\Users\administrator\AppData\Roaming\npm
??安裝vue-cli
##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：項目作者，默認回車即可
- Vue build (Use arrow keys)：選擇第一個即可
- 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執行完成后，目錄多了很多依賴
當出現問題時，可以查看提示進行處理如下
8.webPack的使用
什么是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代碼，這給前端的開發流程和資源組織帶來了巨大挑戰。
??前端開發和其他開發工作的主要區別，首先是前端基于多語言、多層次的編碼和組織工作，其次前端產品的交付是基于瀏覽器的，這些資源是通過增量加載的方式運行到瀏覽器端，如何在開發環境組織好這些碎片化的代碼和資源，并且保證他們在瀏覽器端快速、優雅的加載和更新，就需要一個模塊化系統，這個理想中的模塊化系統是前端工程師多年來一直探索的難題。
##模塊化的演進
Script標簽
<script src = "module1.js"></script><script src = "module2.js"></script><script src = "module3.js"></script>這是最原始的JavaScript文件加載方式，如果把每一個文件看做是一個模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在window對象中，不同模塊的調用都是一個作用域。
??這種原始的加載方式暴露了一些顯而易見的弊端：
- 全局作用域下容易造成變量沖突
- 文件只能按照<script>的書寫順序進行加載
- 開發人員必須主觀解決模塊和代碼庫的依賴關系
- 在大型項目中各種資源難以管理，長期積累的問題導致代碼庫混亂不堪
CommonsJS
服務器端的NodeJS遵循CommonsJS規范，該規范核心思想是允許模塊通過require方法來同步加載所需依賴的其它模塊，然后通過exports或module.exports來導出需要暴露的接口。
require("module"); require("../module.js"); export.doStuff = function(){}; module.exports = someValue;優點：
- 服務器端模塊便于重用
- 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){});優點
- 適合在瀏覽器環境中異步加載模塊
- 可以并行加載多個模塊
缺點
- 提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不暢
- 不符合通用的模塊化思維方式，是一種妥協的實現
實現
- 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、圖片、字體等資源也需要模塊化。
##安裝Webpack
WebPack是一款模塊加載器兼打包工具， 它能把各種資源， 如JS、JSX、ES 6、SASS、LESS、圖片等都作為模塊來處理和使用。
??安裝：
測試安裝成功
- webpack -v
- webpack-cli -v
配置
創建 webpack.config.js配置文件
- entry：入口文件， 指定Web Pack用哪個文件作為項目的入口
- output：輸出， 指定WebPack把處理完成的文件放置到指定路徑
- module：模塊， 用于處理各種類型的文件
- plugins：插件， 如：熱更新、代碼重用等
- resolve：設置路徑指向
- watch：監聽， 用于設置文件改動后直接打包
直接運行webpack命令打包
##使用webpack
說明
# 參數--watch 用于監聽變化 webpack --watch9.Vue-Router的使用
##說明
學習的時候，盡量的打開官方的文檔
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 讓構建單頁面應用變得易如反掌。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數、查詢、通配符
- 基于Vue js過渡系統的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的CSS class的鏈接
- HTML5 歷史模式或hash模式， 在IE 9中自動降級
- 自定義的滾動行為
##安裝
基于第一個vue-cli進行測試學習； 先查看node modules中是否存在vue-router
??vue-router是一個插件包， 所以我們還是需要用n pm/cn pm來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。
如果在一個模塊化工程中使用它，必須要通過Vue.use()明確地安裝路由功能：
import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter);##測試
1、先刪除沒有用的東西
2、components 目錄下存放我們自己編寫的組件
3、定義一個Content.vue 的組件
Main.vue組件
<template><div><h1>首頁</h1></div> </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:Mian}]});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/>' });6、在App.vue中使用路由
<template><div id="app"><!--router-link：默認會被渲染成一個<a>標簽，to屬性為指定鏈接router-view：用于渲染路由匹配到的組件--><router-link to="/">首頁</router-link><router-link to="/content">內容</router-link><router-view></router-view></div> </template><script>export default{name:'App'} </script><style></style>7、輸入命令
npm install
npm run dev
啟動服務
頁面如下：
輸入Ctrl+c，關閉
10.Vue實戰快速入手
我們采用實戰教學模式并結合ElementUI組件庫，將所需知識點應用到實際中，以最快速度帶領大家掌握Vue的使用；
##創建工程
注意：命令行都要使用管理員模式運行
1、創建一個名為hello-vue的工程vue init webpack hello-vue
2、安裝依賴， 我們需要安裝vue-router、element-ui、sass-loader和node-sass四個插件
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為該命令的縮寫
##創建登錄頁面
把沒有用的初始化東西刪掉！
??在源碼目錄中創建如下結構：
- assets：用于存放資源文件
- components：用于存放Vue功能組件
- views：用于存放Vue視圖組件
- router：用于存放vue-router配置
創建首頁視圖，在views目錄下創建一個名為Main.vue的視圖組件：
<template><div>首頁</div> </template> <script>export default {name:"Main"} </script> <style scoped> </style>創建登錄頁視圖在views目錄下創建名為Login.vue的視圖組件，其中el-*的元素為ElementUI組件；
<template><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"><h3 class="login-title">歡迎登錄</h3><el-form-item label="賬號" prop="username"><el-input type="text" placeholder="請輸入賬號" v-model="form.username"/></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" placeholder="請輸入密碼" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button></el-form-item></el-form><el-dialogtitle="溫馨提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>請輸入賬號和密碼</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">確 定</el-button></span></el-dialog></div> </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: '密碼不可為空', trigger: '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 lang="scss" scoped>.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路由配置文件
//導入vue import 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><div id="app"><router-link to="/login">登錄</router-view><router-view></router-view></div> </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
import Vue from 'vue' import App from './App' import VueRouter from "vue-router"; //掃描路由配置 import router from "./router" //導入elementUI import ElementUI from "element-ui" //導入element css import 'element-ui/lib/theme-chalk/index.css' //使用 Vue.use(VueRouter) Vue.use(ElementUI) Vue.config.productionTip = false new Vue({el: '#app',router,render: h => h(App),//ElementUI規定這樣使用 })測試：在瀏覽器打開http://localhost:8080/#/login
如果出現錯誤：可能時因為sass-loader的版本過高導致的編譯錯誤，當前最高版本時8.x，需要退回到7.3.1；
去package.json文件里面的“sass-loader”的版本更換成7.3.1，然后重新cnpm install就可以了；
路由嵌套
嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的組件組合而成。同樣地，URL中各段動態路徑也按某種結構對應嵌套的各層組件，例如：
1、用戶信息組件，在views/user目錄下創建一個名為Profile.vue的視圖組件；
2、
用戶列表組件在views/user目錄下創建一個名為List.vue的視圖組件；
3、配置嵌套路由修改router目錄下的index.js路由配置文件，代碼如：
//導入vue import 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},] })
說明：主要在路由配置中增加了children數據配置，用于在該組件下設置嵌套路由
4、修改首頁視圖，我們修改Main.vue視圖組件，在此使用了Element-UI布局容器組件，代碼如下：
4、傳遞參數
配置路由傳參
鏈接傳遞參數
頁面顯示參數（方法一）
頁面顯示參數（方法二）
開啟props傳遞參數
界面接收參數如下，鏈接格式不用變
組件重定向
重定向的意思代價都明白，但Vue中的重定向是作用在路徑不同但組件相同的情況下，比如：
說明：這里定義了兩個路徑，一個是 /main，一個是 /goHome，其中 /goHome重定向到了 /main路徑，由此可以看出重定向不需要定義組件；
使用的話，只需要設置對應路徑即可；
路由模式與404
路由模式有兩種
-
hash：路徑帶# 符號，比如http://localhost/#/login
-
history：路徑不帶 # 符號，比如http://localhost/login
修改路由配置，代碼如下：
處理404創建一個名為NotFound.vue的視圖組件，代碼如下：
修改路由配置，代碼如下：
路由鉤子與異步請求
beforeRouteEnter：在進入路由前執行
beforeRouteLeave：在離開路由前執行
上代碼：
參數說明：
- to ：路由將要跳轉的路勁信息
- from ： 路徑跳轉前的路徑信息
- next：路由的控制參數
- next()跳入下一個頁面
- next(’/path’) 改變路由的跳轉方向，十七跳到另一個路由
- next(false)返回原來的頁面
- next((vm)=>{})僅在beforeRouteEnter中可用，vm是組件實例
在鉤子函數中使用異步請求
安裝 Axios
cnpm install --save vue-axiosmain.js引用 Axios
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)準備數據 ： 只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態文件放入該目錄下。
數據和之前用的json數據一樣 需要的去上述axios例子里
在 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();},//axiosmethods: {getData: function () {this.axios({method: 'get',url: 'http://localhost:8080/static/mock/data.json'}).then(function (response) {console.log(response)})}}}執行
cnpm install --save vue-axios
2. main.js引用 Axios?```javascript import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)準備數據 ： 只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態文件放入該目錄下。
數據和之前用的json數據一樣 需要的去上述axios例子里
在 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();},//axiosmethods: {getData: function () {this.axios({method: 'get',url: 'http://localhost:8080/static/mock/data.json'}).then(function (response) {console.log(response)})}}}執行
總結
以上是生活随笔為你收集整理的Bili狂神说Vue笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 免费专利检索和下载网站（亲测超实用）
- 下一篇： 湖北出台禁犬令PHP 新闻,湖北省拟出台