溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue知識點有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue知識點有哪些”這篇文章吧。
Soc原則：關(guān)注點分離原則
Vue 的核心庫只關(guān)注視圖層，方便與第三方庫或既有項目整合。
HTML + CSS + JS : 視圖 ： 給用戶看，刷新后臺給的數(shù)據(jù)
網(wǎng)絡(luò)通信 ： axios
頁面跳轉(zhuǎn) ： vue-router
狀態(tài)管理：vuex
Vue-UI : ICE , Element UI
HTML（結(jié)構(gòu)）：超文本標(biāo)記語言（Hyper Text Markup Language），決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容
CSS（表現(xiàn)）：層疊樣式表（Cascading Style Sheets），設(shè)定網(wǎng)頁的表現(xiàn)樣式。
JavaScript（行為）：是一種弱類型腳本語言，其源碼不需經(jīng)過編譯，而是由瀏覽器解釋運行，用于控制網(wǎng)頁的行為
太簡單，略
CSS層疊樣式表是一門標(biāo)記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：
語法不夠強大，比如無法嵌套書寫，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；
沒有變量和合理的樣式復(fù)用機制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護；
這就導(dǎo)致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發(fā)人員會使用一種稱之為【CSS預(yù)處理器】的工具,提供CSS缺失的樣式層復(fù)用機制、減少冗余代碼，提高樣式代碼的可維護性。大大的提高了前端在樣式上的開發(fā)效率。
什么是CSS預(yù)處理器
CSS預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只需要使用這種語言進行CSS的編碼工作。轉(zhuǎn)化成通俗易懂的話來說就是“用一種專門的編程語言，進行Web頁面樣式設(shè)計，再通過編譯器轉(zhuǎn)化為正常的CSS文件，以供項目使用”。
常用的CSS預(yù)處理器有哪些
SASS：基于Ruby ，通過服務(wù)端處理，功能強大。解析效率高。需要學(xué)習(xí)Ruby語言，上手難度高于LESS。
LESS：基于NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低于SASS，但在實際開發(fā)中足夠了，所以如果我們后臺人員如果需要的話，建議使用LESS。
JavaScript一門弱類型腳本語言，其源代碼在發(fā)往客戶端運行之前不需要經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給瀏覽器，由瀏覽器解釋運行。
Native 原生JS開發(fā)
原生JS開發(fā)，也就是讓我們按照【ECMAScript】標(biāo)準(zhǔn)的開發(fā)方式，簡稱ES，特點是所有瀏覽器都支持。截至到當(dāng)前，ES標(biāo)準(zhǔn)以發(fā)布如下版本：
ES3
ES4（內(nèi)部，未正式發(fā)布）
ES5（全瀏覽器支持）
ES6（常用，當(dāng)前主流版本：webpack打包成為ES5支持）
ES7
ES8
ES9（草案階段）
區(qū)別就是逐步增加新特性。
TypeScript 微軟的標(biāo)準(zhǔn)
TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個超集， 而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭Ｓ砂驳滤埂ず査共?C#、Delphi、TypeScript之父； .NET創(chuàng)立者) 主導(dǎo)。該語言的特點就是除了具備ES的特性之外還納入了許多不在標(biāo)準(zhǔn)范圍內(nèi)的新特性，所以會導(dǎo)致很多瀏覽器不能直接支持TypeScript語法， 需要編譯后(編譯成JS) 才能被瀏覽器正確執(zhí)行。
JavaScript框架
JQuery：大家熟知的JavaScript庫，優(yōu)點就是簡化了DOM操作，缺點就是DOM操作太頻繁，影響前端性能；在前端眼里使用它僅僅是為了兼容IE6，7，8；
Angular：Google收購的前端框架，由一群Java程序員開發(fā)，其特點是將后臺的MVC模式搬到了前端并增加了模塊化開發(fā)的理念，與微軟合作，采用了TypeScript語法開發(fā)；對后臺程序員友好，對前端程序員不太友好；最大的缺點是版本迭代不合理（如1代–>2 代，除了名字，基本就是兩個東西；截止發(fā)表博客時已推出了Angular6）
React：Facebook 出品，一款高性能的JS前端框架；特點是提出了新概念 【虛擬DOM】用于減少真實 DOM 操作，在內(nèi)存中模擬 DOM操作，有效的提升了前端渲染效率；缺點是使用復(fù)雜，因為需要額外學(xué)習(xí)一門【JSX】語言；
Vue：一款漸進式 JavaScript 框架，所謂漸進式就是逐步實現(xiàn)新特性的意思，如實現(xiàn)模塊化開發(fā)、路由、狀態(tài)管理等新特性。其特點是綜合了 Angular（模塊化）和React(虛擬 DOM) 的優(yōu)點；
Axios：前端通信框架；因為 Vue 的邊界很明確，就是為了處理 DOM，所以并不具備通信能力，此時就需要額外使用一個通信框架與服務(wù)器交互；當(dāng)然也可以直接選擇使用jQuery 提供的AJAX 通信功能；
Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：餓了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一個用于前端開發(fā)的開源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
Babel：JS編譯工具，主要用于瀏覽器不支持的ES新特性，比如用于編譯TypeScript
WebPack：模塊打包器，主要作用就是打包、壓縮、合并及按序加載
注：以上知識點已將WebApp開發(fā)所需技能全部梳理完畢
混合開發(fā)（Hybrid App）
主要目的是實現(xiàn)一套代碼三端統(tǒng)一（PC、Android：.apk、iOS：.ipa）并能夠調(diào)用到設(shè)備底層硬件（如：傳感器、GPS、攝像頭等），打包方式主要有以下兩種：
云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）
微信小程序
詳見微信官網(wǎng)，這里就是介紹一個方便微信小程序UI開發(fā)的框架：WeUI
前端人員為了方便開發(fā)也需要掌握一定的后端技術(shù)但我們Java后臺人員知道后臺知識體系極其龐大復(fù)雜，所以為了方便前端人員開發(fā)后臺應(yīng)用，就出現(xiàn)了Node JS這樣的技術(shù)。Node JS的作者已經(jīng)聲稱放棄Node JS(說是架構(gòu)做的不好再加上笨重的node modules，可能讓作者不爽了吧)開始開發(fā)全新架構(gòu)的De no
既然是后臺技術(shù)，那肯定也需要框架和項目管理工具， Node JS框架及項目管理工具如下：
Express：Node JS框架
Koa：Express簡化版
NPM：項目綜合管理工具，類似于Maven
YARN：NPM的替代方案，類似于Maven和Gradle的關(guān)系
Vue.js
iView
iview是一個強大的基于Vue的UI庫， 有很多實用的基礎(chǔ)組件比element ui的組件更豐富， 主要服務(wù)于PC界面的中后臺產(chǎn)品。使用單文件的Vue組件化開發(fā)模式基于npm+webpack+babel開發(fā)， 支持ES 2015高質(zhì)量、功能豐富友好的API， 自由靈活地使用空間。
官網(wǎng)地址
Github
iview-admin
備注：屬于前端主流框架，選型時可考慮使用，主要特點是移動端支持較多
Element UI
Element是餓了么前端開源維護的Vue UI組件庫， 組件齊全， 基本涵蓋后臺所需的所有組件，文檔講解詳細， 例子也很豐富。主要用于開發(fā)PC端的頁面， 是一個質(zhì)量比較高的Vue UI組件庫。
·官網(wǎng)地址
·Git hub
·vue-element-admin
備注：屬于前端主流框架，選型時可考慮使用，主要特點是桌面端支持較多
ICE
飛冰是阿里巴巴團隊基于React/Angular/Vue的中后臺應(yīng)用解決方案， 在阿里巴巴內(nèi)部， 已經(jīng)有270多個來自幾乎所有BU的項目在使用。飛冰包含了一條從設(shè)計端到開發(fā)端的完整鏈路，幫助用戶快速搭建屬于自己的中后臺應(yīng)用。
官網(wǎng)地址。
Git hub
備注：主要組件還是以React為主， 截止2019年02月17日更新博客前對Vue的支持還不太完善，目前尚處于觀望階段
VantUI
Vant UI是有贊前端團隊基于有贊統(tǒng)一的規(guī)范實現(xiàn)的Vue組件庫， 提供了-整套UI基礎(chǔ)組件和業(yè)務(wù)組件。通過Vant， 可以快速搭建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。
官網(wǎng)地址
Github
AtUI
at-ui是一款基于Vue 2.x的前端UI組件庫， 主要用于快速開發(fā)PC網(wǎng)站產(chǎn)品。它提供了一套n pm+web pack+babel前端開發(fā)工作流程， CSS樣式獨立， 即使采用不同的框架實現(xiàn)都能保持統(tǒng)一的UI風(fēng)格。
·官網(wǎng)地址
·Git hub
Cube Ul
cube-ui是滴滴團隊開發(fā)的基于Vue js實現(xiàn)的精致移動端組件庫。支持按需引入和后編譯， 輕量靈活；擴展性強，可以方便地基于現(xiàn)有組件實現(xiàn)二次開發(fā)。
官網(wǎng)地址
Github
混合開發(fā)
Flutter
Flutter是谷歌的移動端UI框架， 可在極短的時間內(nèi)構(gòu)建Android和iOS上高質(zhì)量的原生級應(yīng)用。Flutter可與現(xiàn)有代碼一起工作， 它被世界各地的開發(fā)者和組織使用， 并且Flutter是免費和開源的。
官網(wǎng)地址
Github
備注：Google出品， 主要特點是快速構(gòu)建原生APP應(yīng)用程序， 如做混合應(yīng)用該框架為必選框架
lonic
lonic既是一個CSS框架也是一個Javascript UI庫， lonic是目前最有潛力的一款HTML 5手機應(yīng)用開發(fā)框架。通過SASS構(gòu)建應(yīng)用程序， 它提供了很多UI組件來幫助開發(fā)者開發(fā)強大的應(yīng)用。它使用JavaScript MV VM框架和Angular JS/Vue來增強應(yīng)用。提供數(shù)據(jù)的雙向綁定， 使用它成為Web和移動開發(fā)者的共同選擇。
官網(wǎng)地址
·官網(wǎng)文檔
·Git hub
微信小程序
mpvue
mpvue是美團開發(fā)的一個使用Vue.js開發(fā)小程序的前端框架， 目前支持微信小程序、百度智能小程序，頭條小程序和支付寶小程序?？蚣芑?code>Vue.js， 修改了的運行時框架runtime和代碼編譯器compiler實現(xiàn)， 使其可運行在小程序環(huán)境中， 從而為小程序開發(fā)引入了Vue.js開發(fā)體驗。
·官網(wǎng)地址
·Git hub
備注：完備的Vue開發(fā)體驗， 井且支持多平臺的小程序開發(fā)， 推薦使用
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫， 由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計， 令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。
官網(wǎng)地址
Github
為什么需要前后分離
為了降低開發(fā)的復(fù)雜度， 以后端為出發(fā)點， 比如：Struts、Spring MVC等框架的使用， 就是后端的MVC時代；
以SpringMVC流程為例：
發(fā)起請求到前端控制器(Dispatcher Servlet)
前端控制器請求HandlerMapping查找Handler，可以根據(jù)xml配置、注解進行查找
處理器映射器HandlerMapping向前端控制器返回Handler
前端控制器調(diào)用處理器適配器去執(zhí)行Handler
處理器適配器去執(zhí)行Handler
Handler執(zhí)行完成給適配器返回ModelAndView
處理器適配器向前端控制器返回ModelAndView，ModelAndView是SpringMvc框架的一個底層對象，包括Model和View
前端控制器請求視圖解析器去進行視圖解析，根據(jù)邏輯視圖名解析成真正的視圖(JSP)
視圖解析器向前端控制器返回View
前端控制器進行視圖渲染，視圖渲染將模型數(shù)據(jù)(在ModelAndView對象中)填充到request域
前端控制器向用戶響應(yīng)結(jié)果
優(yōu)點
MVC是一個非常好的協(xié)作模式， 能夠有效降低代碼的耦合度從架構(gòu)上能夠讓開發(fā)者明白代碼應(yīng)該寫在哪里。為了讓View更純粹， 還可以使用Thyme leaf、Frree marker等模板引擎， 使模板里無法寫入Java代碼， 讓前后端分工更加清晰。
缺點
前端開發(fā)重度依賴開發(fā)環(huán)境，開發(fā)效率低，這種架構(gòu)下，前后端協(xié)作有兩種模式：
第一種是前端寫DEMO， 寫好后， 讓后端去套模板。好處是DEMO可以本地開發(fā)， 很高效。不足是還需要后端套模板，有可能套錯，套完后還需要前端確定，來回溝通調(diào)整的成本比較大；
另一種協(xié)作模式是前端負責(zé)瀏覽器端的所有開發(fā)和服務(wù)器端的View層模板開發(fā)。好處是UI相關(guān)的代碼都是前端去寫就好，后端不用太關(guān)注，不足就是前端開發(fā)重度綁定后端環(huán)境，環(huán)境成為影響前端開發(fā)效率的重要因素。
前后端職責(zé)糾纏不清：模板引擎功能強大，依舊可以通過拿到的上下文變量來實現(xiàn)各種業(yè)務(wù)邏輯。這樣，只要前端弱勢一點，往往就會被后端要求在模板層寫出不少業(yè)務(wù)代碼，還有一個很大的灰色地帶是Controller， 頁面路由等功能本應(yīng)該是前端最關(guān)注的， 但卻是由后端來實現(xiàn)。Controller本身與Model往往也會糾纏不清，看了讓人咬牙的業(yè)務(wù)代碼經(jīng)常會出現(xiàn)在Controller層。這些問題不能全歸結(jié)于程序員的素養(yǎng)， 否則JSP就夠了。
對前端發(fā)揮的局限性：性能優(yōu)化如果只在前端做空間非常有限，于是我們經(jīng)常需要后端合作，但由于后端框架限制，我們很難使用[Comet】、【Big Pipe】等技術(shù)方案來優(yōu)化性能。
注：在這期間(2005年以前) ， 包括早期的JSP、PHP可以稱之為Web 1.0時代。在這里想說一句， 如果你是一名Java初學(xué)者， 請你不要再把一些陳舊的技術(shù)當(dāng)回事了， 比如JSP， 因為時代在變、技術(shù)在變、什么都在變(引用扎克伯格的一句話：唯一不變的是變化本身)；當(dāng)我們?nèi)ソo大學(xué)做實訓(xùn)時，有些同學(xué)會認為我們沒有講什么干貨，其實不然，只能說是你認知里的干貨對于市場來說早就過時了而已
時間回到2005年A OAX(Asynchronous JavaScript And XML， 異步JavaScript和XML，老技術(shù)新用法)被正式提出并開始使用CDN作為靜態(tài)資源存儲， 于是出現(xiàn)了JavaScript王者歸來(在這之前JS都是用來在網(wǎng)頁上貼狗皮膏藥廣告的) 的SPA(Single Page Application) 單頁面應(yīng)用時代。
優(yōu)點
這種模式下， **前后端的分工非常清晰， 前后端的關(guān)鍵協(xié)作點是AJAX接口。**看起來是如此美妙， 但回過頭來看看的話， 這與JSP時代區(qū)別不大。復(fù)雜度從服務(wù)端的JSP里移到了瀏覽器的JavaScript，瀏覽器端變得很復(fù)雜。類似Spring MVC， 這個時代開始出現(xiàn)瀏覽器端的分層架構(gòu)：
缺點
前后端接口的約定：如果后端的接口一塌糊涂，如果后端的業(yè)務(wù)模型不夠穩(wěn)定，那么前端開發(fā)會很痛苦；不少團隊也有類似嘗試，通過接口規(guī)則、接口平臺等方式來做。有了和后端一起沉淀的接口規(guī)則，還可以用來模擬數(shù)據(jù)，使得前后端可以在約定接口后實現(xiàn)高效并行開發(fā)。
前端開發(fā)的復(fù)雜度控制：SPA應(yīng)用大多以功能交互型為主，JavaScript代碼過十萬行很正常。大量JS代碼的組織，與View層的綁定等，都不是容易的事情。
此處的MV*模式如下：
MVC(同步通信為主) ：Model、View、Controller
MVP(異步通信為主) ：Model、View、Presenter
MVVM(異步通信為主)：Model、View、View Model為了降低前端開發(fā)復(fù)雜度，涌現(xiàn)了大量的前端框架，比如：Angular JS、React、Vue.js、Ember JS等， 這些框架總的原則是先按類型分層， 比如Templates、Controllers、Models， 然后再在層內(nèi)做切分，如下圖：
優(yōu)點
前后端職責(zé)很清晰：前端工作在瀏覽器端，后端工作在服務(wù)端。清晰的分工，可以讓開發(fā)并行，測試數(shù)據(jù)的模擬不難， 前端可以本地開發(fā)。后端則可以專注于業(yè)務(wù)邏輯的處理， 輸出RESTful等接口。
前端開發(fā)的復(fù)雜度可控：前端代碼很重，但合理的分層，讓前端代碼能各司其職。這一塊蠻有意思的，簡單如模板特性的選擇，就有很多很多講究。并非越強大越好，限制什么，留下哪些自由，代碼應(yīng)該如何組織，所有這一切設(shè)計，得花一本書的厚度去說明。
部署相對獨立：可以快速改進產(chǎn)品體驗缺點
代碼不能復(fù)用。比如后端依舊需要對數(shù)據(jù)做各種校驗，校驗邏輯無法復(fù)用瀏覽器端的代碼。如果可以復(fù)用，那么后端的數(shù)據(jù)校驗可以相對簡單化。
全異步， 對SEO不利。往往還需要服務(wù)端做同步渲染的降級方案。
性能并非最佳，特別是移動互聯(lián)網(wǎng)環(huán)境下。
SPA不能滿足所有需求， 依舊存在大量多頁面應(yīng)用。URL Design需要后端配合， 前端無法完全掌控。
前端為主的MV*模式解決了很多很多問題， 但如上所述， 依舊存在不少不足之處。隨著Node JS的興起， JavaScript開始有能力運行在服務(wù)端。這意味著可以有一種新的研發(fā)模式：
在這種研發(fā)模式下，前后端的職責(zé)很清晰。對前端來說，兩個UI層各司其職：
Front-end Ul layer處理瀏覽器層的展現(xiàn)邏輯。通過CSS渲染樣式， 通過JavaScript添加交互功能， HTML的生成也可以放在這層， 具體看應(yīng)用場景。
Back-end Ul layer處理路由、模板、數(shù)據(jù)獲取、Cookie等。通過路由， 前端終于可以自主把控URL Design， 這樣無論是單頁面應(yīng)用還是多頁面應(yīng)用， 前端都可以自由調(diào)控。后端也終于可以擺脫對展現(xiàn)的強關(guān)注，轉(zhuǎn)而可以專心于業(yè)務(wù)邏輯層的開發(fā)。
通過Node， WebServer層也是JavaScript代碼， 這意味著部分代碼可前后復(fù)用， 需要SEO的場景可以在服務(wù)端同步渲染，由于異步請求太多導(dǎo)致的性能問題也可以通過服務(wù)端來緩解。前一種模式的不足，通過這種模式幾乎都能完美解決掉。
與JSP模式相比， 全棧模式看起來是一種回歸， 也的確是一種向原始開發(fā)模式的回歸， 不過是一種螺旋上升式的回歸。
基于Node JS的全棧模式， 依舊面臨很多挑戰(zhàn)：
需要前端對服務(wù)端編程有更進一步的認識。比如TCP/IP等網(wǎng)絡(luò)知識的掌握。
Node JS層與Java層的高效通信。Node JS模式下， 都在服務(wù)器端， RESTful HTTP通信未必高效， 通過SOAP等方式通信更高效。一切需要在驗證中前行。
對部著、運維層面的熟練了解，需要更多知識點和實操經(jīng)驗。
大量歷史遺留問題如何過渡。這可能是最大最大的阻力。
注：看到這里，相信很多同學(xué)就可以理解，為什么我總在課堂上說：“前端想學(xué)后臺很難，而我們后端程序員學(xué)任何東西都很簡單”；就是因為我們后端程序員具備相對完善的知識體系。
全棧!So Easy!
綜上所述，模式也好，技術(shù)也罷，沒有好壞優(yōu)劣之分，只有適合不適合；前后分離的開發(fā)思想主要是基于Soc(關(guān)注度分離原則)，上面種種模式，都是讓前后端的職責(zé)更清晰，分工更合理高效。
MVVM（Model-View-ViewModel）是一種軟件設(shè)計模式，由微軟WPF（用于替代WinForm，以前就是用這個技術(shù)開發(fā)桌面應(yīng)用程序的）和Silverlight（類似于Java Applet，簡單點說就是在瀏覽器上運行WPF）的架構(gòu)師Ken Cooper和Ted Peters開發(fā)，是一種簡化用戶界面的事件驅(qū)動編程方式。由John Gossman（同樣也是WPF和Sliverlight的架構(gòu)師）與2005年在他的博客上發(fā)表。
MVVM源自于經(jīng)典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel層，負責(zé)轉(zhuǎn)換Model中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用。其作用如下：
該層向上與視圖層進行雙向數(shù)據(jù)綁定
向下與Model層通過接口請求進行數(shù)據(jù)交互
MVVM已經(jīng)相當(dāng)成熟了，主要運用但不僅僅在網(wǎng)絡(luò)應(yīng)用程序開發(fā)中。當(dāng)下流行的MVVM框架有Vue.js，Anfular JS
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處
低耦合：視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當(dāng)View變化的時候Model可以不變，當(dāng)Model變化的時候View也可以不變。
可復(fù)用：你可以把一些視圖邏輯放在一個ViewModel里面，讓很多View重用這段視圖邏輯。
獨立開發(fā)：開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewMode），設(shè)計人員可以專注于頁面設(shè)計。
可測試：界面素來是比較難以測試的，而現(xiàn)在測試可以針對ViewModel來寫。
（1）View
View是視圖層， 也就是用戶界面。前端主要由HTH L和csS來構(gòu)建， 為了更方便地展現(xiàn)vi eu to del或者Hodel層的數(shù)據(jù)， 已經(jīng)產(chǎn)生了各種各樣的前后端模板語言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構(gòu)建用戶界面的內(nèi)置模板語言。
（2）Model
Model是指數(shù)據(jù)模型， 泛指后端進行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控， 主要圍繞數(shù)據(jù)庫系統(tǒng)展開。這里的難點主要在于需要和前端約定統(tǒng)一的接口規(guī)則
（3）ViewModel
ViewModel是由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。在這一層， 前端開發(fā)者對從后端獲取的Model數(shù)據(jù)進行轉(zhuǎn)換處理， 做二次封裝， 以生成符合View層使用預(yù)期的視圖數(shù)據(jù)模型。
??需要注意的是View Model所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分， 而Model層的數(shù)據(jù)模型是只包含狀態(tài)的
比如頁面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態(tài)(展示)
頁面加載進來時發(fā)生什么，點擊這一塊發(fā)生什么，這一塊滾動時發(fā)生什么這些都屬于視圖行為(交互)
視圖狀態(tài)和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由于實現(xiàn)了雙向綁定， View Model的內(nèi)容會實時展現(xiàn)在View層， 這是激動人心的， 因為前端開發(fā)者再也不必低效又麻煩地通過操縱DOM去更新視圖。
??MVVM框架已經(jīng)把最臟最累的一塊做好了， 我們開發(fā)者只需要處理和維護View Model， 更新數(shù)據(jù)視圖就會自動得到相應(yīng)更新，真正實現(xiàn)事件驅(qū)動編程。
??View層展現(xiàn)的不是Model層的數(shù)據(jù)， 而是ViewModel的數(shù)據(jù)， 由ViewModel負責(zé)與Model層交互， 這就完全解耦了View層和Model層， 這個解耦是至關(guān)重要的， 它是前后端分離方案實施的重要一環(huán)。
Vue(讀音/vju/， 類似于view) 是一套用于構(gòu)建用戶界面的漸進式框架， 發(fā)布于2014年2月。與其它大型框架不同的是， Vue被設(shè)計為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層， 不僅易于上手， 還便于與第三方庫(如：vue-router，vue-resource，vue x) 或既有項目整合。
（1）MVVM模式的實現(xiàn)者
Model：模型層， 在這里表示JavaScript對象
View：視圖層， 在這里表示DOM(HTML操作的元素)
ViewModel：連接視圖和數(shù)據(jù)的中間件， Vue.js就是MVVM中的View Model層的實現(xiàn)者
在MVVM架構(gòu)中， 是不允許數(shù)據(jù)和視圖直接通信的， 只能通過ViewModel來通信， 而View Model就是定義了一個Observer觀察者
ViewModel能夠觀察到數(shù)據(jù)的變化， 并對視圖對應(yīng)的內(nèi)容進行更新
ViewModel能夠監(jiān)聽到視圖的變化， 并能夠通知數(shù)據(jù)發(fā)生改變
至此， 我們就明白了， Vue.js就是一個MV VM的實現(xiàn)者， 他的核心就是實現(xiàn)了DOM監(jiān)聽與數(shù)據(jù)綁定
（2）為什么要使用Vue.js
輕量級， 體積小是一個重要指標(biāo)。Vue.js壓縮后有只有20多kb(Angular壓縮后56kb+，React壓縮后44kb+)
移動優(yōu)先。更適合移動端， 比如移動端的Touch事件
易上手，學(xué)習(xí)曲線平穩(wěn)，文檔齊全
吸取了Angular(模塊化) 和React(虛擬DOＭ) 的長處， 并擁有自己獨特的功能，如：計算屬性
開源，社區(qū)活躍度高
【說明】IDEA可以安裝Vue的插件!
??注意：Vue不支持IE 8及以下版本， 因為Vue使用了IE 8無法模擬的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的瀏覽器。
（1）下載地址
開發(fā)版本
包含完整的警告和調(diào)試模式：https：//yuejs.org/js/vue.js
刪除了警告， 30.96KB min+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的核心是實現(xiàn)了MVVM模式， 她扮演的角色就是View Model層， 那么所謂的第一個應(yīng)用程序就是展示她的數(shù)據(jù)綁定功能，操作流程如下：
??1、創(chuàng)建一個HTML文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>
2、引入Vue.js
<!--1.導(dǎo)入Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>12
3、創(chuàng)建一個Vue實例
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：數(shù)據(jù)*/
data:{
message:"hello,vue!"
}
});</script>說明：
el: '#vue'：綁定元素的ID
data:{message:'Hello Vue!'}：數(shù)據(jù)對象中有一個名為message的屬性，并設(shè)置了初始值 Hello Vue！
4、將數(shù)據(jù)綁定到頁面元素
<!--view層，模板--><p id="app">
{{message}}</p>說明：只需要在綁定的元素中使用雙花括號將Vue創(chuàng)建的名為message屬性包裹起來， 即可實現(xiàn)數(shù)據(jù)綁定功能， 也就實現(xiàn)了View Model層所需的效果， 是不是和EL表達式非常像?
（3）完整的HTML
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><!--view層，模板--><p id="app">
{{message}}</p><!--1.導(dǎo)入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：數(shù)據(jù)*/
data:{
message:"hello,vue!"
}
});</script></body></html>（4）測試
為了能夠更直觀的體驗Vue帶來的數(shù)據(jù)綁定功能， 我們需要在瀏覽器測試一番， 操作流程如下：
??1、在瀏覽器上運行第一個Vue應(yīng)用程序， 進入開發(fā)者工具
??2、在控制臺輸入vm.message=‘HelloWorld’， 然后回車， 你會發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會直接變成HelloWorld
??此時就可以在控制臺直接輸入vm.message來修改值， 中間是可以省略data的， 在這個操作中， 我并沒有主動操作DOM， 就讓頁面的內(nèi)容發(fā)生了變化， 這就是借助了Vue的數(shù)據(jù)綁定功能實現(xiàn)的； MV VM模式中要求View Model層就是使用觀察者模式來實現(xiàn)數(shù)據(jù)的監(jiān)聽與綁定， 以做到數(shù)據(jù)與視圖的快速響應(yīng)。
我們已經(jīng)成功創(chuàng)建了第一個Vue應(yīng)用!看起來這跟渲染一個字符串模板非常類似， 但是Vue在背后做了大量工作。現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)聯(lián)， 所有東西都是響應(yīng)式的。我們在控制臺操作對象屬性，界面可以實時更新!
??我們還可以使用v-bind來綁定元素特性!
??上代碼
<!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層，模板--><p id="app">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！ </span></p><!--1.導(dǎo)入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：數(shù)據(jù)*/
data:{
message: '頁面加載于 ' + new Date().toLocaleString()
}
});</script></body></html>你看到的v-bind等被稱為指令。指令帶有前綴v以表示它們是Vue提供的特殊特性。可能你已經(jīng)猜到了， 它們會在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為在這里，該指令的意思是：“將這個元素節(jié)點的title特性和Vue實例的message屬性保持一致”。
??如果你再次打開瀏覽器的JavaScript控制臺， 輸入app， message=‘新消息’，就會再一次看到這個綁定了title特性的HTML已經(jīng)進行了更新。
什么是條件判斷語句，就不需要我說明了吧，以下兩個屬性!
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層，模板--><p id="app">
<h2 v-if="ok">Yes</h2>
<h2 v-else>No</h2>
</p><!--1.導(dǎo)入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：數(shù)據(jù)*/
data:{
type: true
}
});</script></body></html>測試：
1.在瀏覽器上運行，打開控制臺!
2.在控制臺輸入vm.ok=false然后回車，你會發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會直接變成NO
??注：使用v-*屬性綁定數(shù)據(jù)是不需要雙花括號包裹的
v-else-if
v-if
v-else-if
v-else
注：===三個等號在JS中表示絕對等于(就是數(shù)據(jù)與類型都要相等)上代碼：
<!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層，模板--><p id="app">
<h2 v-if="type==='A'">A</h2>
<h2 v-else-if="type==='B'">B</h2>
<h2 v-else-if="type==='D'">D</h2>
<h2 v-else>C</h2></p><!--1.導(dǎo)入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：數(shù)據(jù)*/
data:{
type: 'A'
}
});</script></body></html>v-for
格式說明
<p id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}} </li></p>123456注：items是數(shù)組，item是數(shù)組元素迭代的別名。我們之后學(xué)習(xí)的Thymeleaf模板引擎的語法和這個十分的相似！
??上代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><!--view層，模板--><p id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}} </li></p><!--1.導(dǎo)入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：數(shù)據(jù)*/
data:{
items:[
{message:'狂神說Java'},
{message:'狂神說前端'},
{message:'狂神說運維'}
]
}
});</script></body></html>測試：在控制臺輸入vm.items.push({message：'狂神說運維'})，嘗試追加一條數(shù)據(jù)，你會發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會增加一條狂神說運維.
v-on監(jiān)聽事件
?emsp;事件有Vue的事件、和前端頁面本身的一些事件!我們這里的click是vue的事件， 可以綁定到Vue中的methods中的方法事件!
??上代碼：
<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p id="app">
<button v-on:click="sayHi">點我</button></p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'Hello World'
},
methods:{
sayHi:function(event){
//'this'在方法里面指向當(dāng)前Vue實例
alert(this.message);
}
}
});</script></body></html>點擊測試
??Vue還有一些基本的使用方式， 大家有需要的可以再跟著官方文檔看看， 因為這些基本的指令幾乎我們都見過了，一通百通!掌握學(xué)習(xí)的方式!
Vue.js是一個MV VM框架， 即數(shù)據(jù)雙向綁定， 即當(dāng)數(shù)據(jù)發(fā)生變化的時候， 視圖也就發(fā)生變化， 當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。這也算是Vue.js的精髓之處了。
??值得注意的是，我們所說的數(shù)據(jù)雙向綁定，一定是對于UI控件來說的非UI控件不會涉及到數(shù)據(jù)雙向綁定。單向數(shù)據(jù)綁定是使用狀態(tài)管理工具的前提。如果我們使用vue x那么數(shù)據(jù)流也是單項的，這時就會和雙向數(shù)據(jù)綁定有沖突。
（1）為什么要實現(xiàn)數(shù)據(jù)的雙向綁定
在Vue.js中，如果使用vuex， 實際上數(shù)據(jù)還是單向的， 之所以說是數(shù)據(jù)雙向綁定，這是用的UI控件來說， 對于我們處理表單， Vue.js的雙向數(shù)據(jù)綁定用起來就特別舒服了。即兩者并不互斥，在全局性數(shù)據(jù)流使用單項，方便跟蹤；局部性數(shù)據(jù)流使用雙向，簡單易操作。
你可以用v-model指令在表單、及元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇， 但v-model本質(zhì)上不過是語法糖。它負責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。
??注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過JavaScript在組件的data選項中聲明初始值!
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p id="app">
輸入的文本：<input type="text" v-model="message" value="hello">{{message}}</p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
}
});</script></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p id="app">
多行文本：<textarea v-model="pan"></textarea> 多行文本是：{{pan}}</p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"Hello hello!"
}
});</script></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p id="app">
單復(fù)選框： <input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label></p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
checked:false
}
});</script></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p id="app">
多復(fù)選框： <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></p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
checkedNames:[]
}
});</script></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p 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></p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
picked:'Two'
}
});</script></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p 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></p><script src="../js/vue.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
pan:"A"
}
});</script></body></html>注意：v-model表達式的初始值未能匹配任何選項，元系將被渲染為“未選中”狀態(tài)。 在iOS中， 這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS不會觸發(fā)change事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。
組件是可復(fù)用的Vue實例， 說白了就是一組可以重復(fù)使用的模板， 跟JSTL的自定義標(biāo)簽、Thymeleal的th:fragment等框架有著異曲同工之妙，通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：
例如，你可能會有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。
注意：在實際開發(fā)中，我們并不會用以下方式開發(fā)組件，而是采用vue-cli創(chuàng)建，vue模板文件的方式開發(fā)，以下方法只是為了讓大家理解什么是組件。
??使用Vue.component()方法注冊組件，格式如下：
<p id="app">
<pan></pan></p><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">
//先注冊組件
Vue.component("pan",{
template:'<li>Hello</li>'
});
//再實例化Vue
var vm = new Vue({
el:"#app",
});</script>說明：
Vue.component()：注冊組件
pan：自定義組件的名字
template：組件的模板
props屬性傳遞參數(shù)像上面那樣用組件沒有任何意義，所以我們是需要傳遞參數(shù)到組件的，此時就需要使用props屬性了！
??注意：默認規(guī)則下props屬性里的值不能為大寫；
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p id="app">
<!--組件：傳遞給組件中的值：props-->
<pan v-for="item in items" v-bind:panh="item"></pan></p><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">
//定義組件
Vue.component("pan",{
props:['panh'],
template:'<li>{{panh}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["java","Linux","前端"]
}
});</script></body></html>說明：
v-for="item in items"：遍歷Vue實例中定義的名為items的數(shù)組，并創(chuàng)建同等數(shù)量的組件
v-bind:panh="item"：將遍歷的item項綁定到組件中props定義名為item屬性上；= 號左邊的panh為props定義的屬性名，右邊的為item in items 中遍歷的item項的值
Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架， 她的主要作用就是實現(xiàn)AJAX異步通信，其功能特點如下：
從瀏覽器中創(chuàng)建XMLHttpRequests
從node.js創(chuàng)建http請求
支持Promise API[JS中鏈?zhǔn)骄幊蘛
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF(跨站請求偽造)
GitHub：https://github.com/axios/axios
??中文文檔：http://www.axios-js.com/
由于Vue.js是一個視圖層框架并且作者(尤雨溪) 嚴格準(zhǔn)守SoC(關(guān)注度分離原則)所以Vue.js并不包含AJAX的通信功能， 為了解決通信問題， 作者單獨開發(fā)了一個名為vue-resource的插件， 不過在進入2.0版本以后停止了對該插件的維護并推薦了Axios框架。少用jQuery， 因為它操作Dom太頻繁!
咱們開發(fā)的接口大部分都是采用JSON格式， 可以先在項目里模擬一段JSON數(shù)據(jù)， 數(shù)據(jù)內(nèi)容如下：創(chuàng)建一個名為data.json的文件并填入上面的內(nèi)容， 放在項目的根目錄下
{
"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><p id="vue">
<p>地名：{{info.name}}</p>
<p>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</p>
<p>鏈接：<a v-binf:href="info.url" target="_blank">{{info.url}}</a> </p></p><!--引入js文件--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript">
var vm = new Vue({
el:"#vue",
//data：屬性：vm
data(){
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){//鉤子函數(shù)
axios .get('data.json')
.then(response=>(this.info=response.data));
}
});</script></body></html>說明：
在這里使用了v-bind將a:href的屬性值與Vue實例中的數(shù)據(jù)進行綁定
使用axios框架的get方法請求AJAX并自動將數(shù)據(jù)封裝進了Vue實例的數(shù)據(jù)對象中
我們在data中的數(shù)據(jù)結(jié)構(gòu)必須和Ajax響應(yīng)回來的數(shù)據(jù)格式匹配！
官方文檔：https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示
??Vue實例有一個完整的生命周期，也就是從開始創(chuàng)建初女臺化數(shù)據(jù)、編譯模板、掛載DOM、渲染一更新一渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。
??在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發(fā)時注冊JS方法，可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應(yīng)方法中的this直接指向的是Vue的實例。
計算屬性的重點突出在屬性兩個字上(屬性是名詞)，首先它是個屬性其次這個屬性有計算的能力(計算是動詞)，這里的計算就是個函數(shù)：簡單點說，它就是一個能夠?qū)⒂嬎憬Y(jié)果緩存起來的屬性(將行為轉(zhuǎn)化成了靜態(tài)的屬性)，僅此而已；可以想象為緩存!
??上代碼
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><!--view層，模板--><p id="app">
<p>currentTime1:{{currentTime1()}}</p>
<p>currentTime2:{{currentTime2}}</p></p><!--1.導(dǎo)入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",
data:{
message:"pan"
},
methods:{
currentTime1:function(){
return Date.now();//返回一個時間戳
}
},
computed:{
currentTime2:function(){//計算屬性：methods，computed方法名不能重名，重名之后，只會調(diào)用methods的方法
this.message;
return Date.now();//返回一個時間戳
}
}
});</script></body></html>注意：methods和computed里的東西不能重名
說明：
methods：定義方法， 調(diào)用方法使用currentTime1()， 需要帶括號
computed：定義計算屬性， 調(diào)用屬性使用currentTime2， 不需要帶括號：this.message是為了能夠讓currentTime2觀察到數(shù)據(jù)變化而變化
如何在方法中的值發(fā)生了變化，則緩存就會刷新!可以在控制臺使用vm.message=”q in jiang"， 改變下數(shù)據(jù)的值，再次測試觀察效果!
結(jié)論：
??調(diào)用方法時，每次都需要講行計算，既然有計算過程則必定產(chǎn)生系統(tǒng)開銷，那如果這個結(jié)果是不經(jīng)常變化的呢?此時就可以考慮將這個結(jié)果緩存起來，采用計算屬性可以很方便的做到這點，計算屬性的主要特性就是為了將不經(jīng)常變化的計算結(jié)果進行緩存，以節(jié)約我們的系統(tǒng)開銷；
在Vue.js中我們使用<slot>元素作為承載分發(fā)內(nèi)容的出口，作者稱其為插槽，可以應(yīng)用在組合組件的場景中；
比如準(zhǔn)備制作一個待辦事項組件(todo) ， 該組件由待辦標(biāo)題(todo-title) 和待辦內(nèi)容(todo-items)組成，但這三個組件又是相互獨立的，該如何操作呢?
??第一步定義一個待辦事項的組件
<p id="app">
<todo></todo></p><!--1.導(dǎo)入Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">
Vue.component('todo',{
template:'<p>\
<p>代辦事項</p>\
<ul>\
<li>學(xué)習(xí)狂神說Java</li>\
</ul>\
</p>'
})</script>第二步 我們需要讓，代辦事項的標(biāo)題和值實現(xiàn)動態(tài)綁定，怎么做呢？我們可以留一個插槽！
??1-將上面的代碼留出一個插槽，即slot
Vue.component('todo',{
template:'<p>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </p>'
});2-定義一個名為todo-title的待辦標(biāo)題組件 和 todo-items的待辦內(nèi)容組件
Vue.component('todo-title',{
props:['title'],
template:'<p>{{title}}</p>'
});
12345//這里的index，就是數(shù)組的下標(biāo)，使用for循環(huán)遍歷的時候，可以循環(huán)出來！
Vue.component("todo-items",{
props:["item","index"],
template:"<li>{{index+1}},{{item}}</li>"
});3-實例化Vue并初始化數(shù)據(jù)
var vm = new Vue({
el:"#vue",
data:{
todoItems:['test1','test2','test3']
}
});4-將這些值，通過插槽插入
<p 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></p>說明：我們的todo-title和todo-items組件分別被分發(fā)到了todo組件的todo-title和todo-items插槽中
??完整代碼如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><!--view層，模板--><p id="vue">
<todo>
<todo-title slot="todo-title" 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></p><!--1.導(dǎo)入Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">
Vue.component('todo',{
template:'<p>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</p>'
});
Vue.component('todo-title',{
props:['title'],
template:'<p>{{title}}</p>'
});
//這里的index，就是數(shù)組的下標(biāo)，使用for循環(huán)遍歷的時候，可以循環(huán)出來！
Vue.component("todo-items",{
props:["item","index"],
template:"<li>{{index+1}},{{item}}</li>"
});
var vm = new Vue({
el:"#vue",
data:{
title:"秦老師系列課程",
todoItems:['test1','test2','test3']
}
});</script></body></html>通以上代碼不難發(fā)現(xiàn)，數(shù)據(jù)項在Vue的實例中， 但刪除操作要在組件中完成， 那么組件如何才能刪除Vue實例中的數(shù)據(jù)呢?此時就涉及到參數(shù)傳遞與事件分發(fā)了， Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題； 使用this.$emit(‘自定義事件名’， 參數(shù)) ， 操作過程如下：
??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（） 方法向/從數(shù)組中添加/刪除項目，然后返回被刪除的項目，其中index
this.todoItems.splice(index,1);
}
}
});2-修改todo-items待辦內(nèi)容組件的代碼，增加一個刪除按鈕，并且綁定事件！
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 自定義事件分發(fā)
this.$emit('remove',index);
}
}
});3-修改todo-items待辦內(nèi)容組件的HTML代碼，增加一個自定義事件，比如叫remove，可以和組件的方法綁定，然后綁定到vue的方法！
<!--增加了v-on:remove="removeTodoItems(index)"自定義事件，該組件會調(diào)用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>
對上一個代碼進行修改，實現(xiàn)刪除功能
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><!--view層，模板--><p 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></p><!--1.導(dǎo)入Vue.js--><script src="../js/vue.js"></script><script type="text/javascript">
Vue.component('todo',{
template:'<p>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</p>'
});
Vue.component('todo-title',{
props:['title'],
template:'<p>{{title}}</p>'
});
//這里的index，就是數(shù)組的下標(biāo)，使用for循環(huán)遍歷的時候，可以循環(huán)出來！
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 自定義事件分發(fā)
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>
核心：數(shù)據(jù)驅(qū)動，組件化
優(yōu)點：借鑒了AngularJS的模塊化開發(fā)和React的虛擬Dom，虛擬Dom就是把Demo操作放到內(nèi)存中執(zhí)行；
常用的屬性：
v-if
v-else-if
v-else
v-for
v-on綁定事件，簡寫@
v-model數(shù)據(jù)雙向綁定
v-bind給組件綁定參數(shù)，簡寫：
組件化：
組合組件slot插槽
組件內(nèi)部綁定事件需要使用到this.$emit("事件名",參數(shù));
計算屬性的特色，緩存計算數(shù)據(jù)
遵循SoC關(guān)注度分離原則，Vue是純粹的視圖框架，并不包含，比如Ajax之類的通信功能，為了解決通信問題，我們需要使用Axios框架做異步通信；
Vue的開發(fā)都是要基于NodeJS，實際開發(fā)采用Vue-cli腳手架開發(fā)，vue-router路由，vuex做狀態(tài)管理；Vue UI，界面我們一般使用ElementUI（餓了么出品），或者ICE（阿里巴巴出品）來快速搭建前端項目~~
官網(wǎng)：
https://element.eleme.cn/#/zh-CN
https://ice.work/
vue-cli官方提供的一個腳手架，用于快速生成一個vue的項目模板；
??預(yù)先定義好的目錄結(jié)構(gòu)及基礎(chǔ)代碼，就好比咱們在創(chuàng)建Maven項目時可以選擇創(chuàng)建一個骨架項目，這個估計項目就是腳手架，我們的開發(fā)更加的快速；
??項目的功能
統(tǒng)一的目錄結(jié)構(gòu)
本地調(diào)試
熱部署
單元測試
集成打包上線
Node.js：http://nodejs.cn/download/
安裝就是無腦的下一步就好，安裝在自己的環(huán)境目錄下
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#測試是否安裝成功#查看可以基于哪些模板創(chuàng)建vue應(yīng)用程序，通常我們選擇webpackvue list
1.創(chuàng)建一個Vue項目，我們隨便建立一個空的文件夾在電腦上，我這里在D盤下新建一個目錄
D:\Project\vue-study;
2.創(chuàng)建一個基于webpack模板的vue應(yīng)用程序
#1、首先需要進入到對應(yīng)的目錄 cd D:\Project\vue-study#2、這里的myvue是頂日名稱，可以根據(jù)自己的需求起名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:單元測試相關(guān)，選擇n不安裝（后期需要再手動添加）
Setupe2etests with Nightwatch：單元測試相關(guān)，選擇n不安裝（后期需要再手動添加）
Should we run npm install for you after the,project has been created:創(chuàng)建完成后直接初始化，選擇n，我們手動執(zhí)行；運行結(jié)果！
（1）初始化并運行
cd myvue npm install npm run dev
執(zhí)行完成后，目錄多了很多依賴
當(dāng)出現(xiàn)問題時，可以查看提示進行處理如下
本質(zhì)上， webpack是一個現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器(module bundler) 。當(dāng)webpack處理應(yīng)用程序時， 它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph) ， 其中包含應(yīng)用程序需要的每個模塊， 然后將所有這些模塊打包成一個或多個bundle.
??Webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具， 它可以將許多松散耦合的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分離，等到實際需要時再異步加載。通過loader轉(zhuǎn)換， 任何形式的資源都可以當(dāng)做模塊， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；
??伴隨著移動互聯(lián)網(wǎng)的大潮， 當(dāng)今越來越多的網(wǎng)站已經(jīng)從網(wǎng)頁模式進化到了WebApp模式。它們運行在現(xiàn)代瀏覽器里， 使用HTML 5、CSS 3、ES 6等新的技術(shù)來開發(fā)豐富的功能， 網(wǎng)頁已經(jīng)不僅僅是完成瀏覽器的基本需求； WebApp通常是一個SPA(單頁面應(yīng)用) ， 每一個視圖通過異步的方式加載，這導(dǎo)致頁面初始化和使用過程中會加載越來越多的JS代碼，這給前端的開發(fā)流程和資源組織帶來了巨大挑戰(zhàn)。
??前端開發(fā)和其他開發(fā)工作的主要區(qū)別，首先是前端基于多語言、多層次的編碼和組織工作，其次前端產(chǎn)品的交付是基于瀏覽器的，這些資源是通過增量加載的方式運行到瀏覽器端，如何在開發(fā)環(huán)境組織好這些碎片化的代碼和資源，并且保證他們在瀏覽器端快速、優(yōu)雅的加載和更新，就需要一個模塊化系統(tǒng)，這個理想中的模塊化系統(tǒng)是前端工程師多年來一直探索的難題。
<script src = "module1.js"></script> <script src = "module2.js"></script> <script src = "module3.js"></script>
這是最原始的JavaScript文件加載方式，如果把每一個文件看做是一個模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在window對象中，不同模塊的調(diào)用都是一個作用域。
??這種原始的加載方式暴露了一些顯而易見的弊端：
全局作用域下容易造成變量沖突
文件只能按照<script>的書寫順序進行加載
開發(fā)人員必須主觀解決模塊和代碼庫的依賴關(guān)系
在大型項目中各種資源難以管理，長期積累的問題導(dǎo)致代碼庫混亂不堪
服務(wù)器端的NodeJS遵循CommonsJS規(guī)范，該規(guī)范核心思想是允許模塊通過require方法來同步加載所需依賴的其它模塊，然后通過exports或module.exports來導(dǎo)出需要暴露的接口。
require("module");require("../module.js");export.doStuff = function(){};module.exports = someValue;1234優(yōu)點：
服務(wù)器端模塊便于重用
NPM中已經(jīng)有超過45萬個可以使用的模塊包
簡單易用
缺點：
同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載，瀏覽器資源是異步加載的
不能非阻塞的并行加載多個模塊
實現(xiàn)：
服務(wù)端的NodeJS
?Browserify，瀏覽器端的CommonsJS實現(xiàn)，可以使用NPM的模塊，但是編譯打包后的文件體積較大
modules-webmake，類似Browserify，但不如Browserify靈活
wreq，Browserify的前身
Asynchronous Module Definition規(guī)范其實主要一個主要接口define(id?,dependencies?,factory);它要在聲明模塊的時候指定所有的依賴dependencies，并且還要當(dāng)做形參傳到factory中，對于依賴的模塊提前執(zhí)行。
define("module",["dep1","dep2"],functian(d1,d2){
return someExportedValue;});require（["module","../file.js"],function(module，file){});1234優(yōu)點
適合在瀏覽器環(huán)境中異步加載模塊
可以并行加載多個模塊
缺點
提高了開發(fā)成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不暢
不符合通用的模塊化思維方式，是一種妥協(xié)的實現(xiàn)
實現(xiàn)
RequireJS
curl
Commons Module Definition規(guī)范和AMD很相似，盡保持簡單，并與CommonsJS和NodeJS的Modules規(guī)范保持了很大的兼容性。
define(function(require,exports,module){
var $=require("jquery");
var Spinning = require("./spinning");
exports.doSomething = ...;
module.exports=...;});優(yōu)點：
依賴就近，延遲執(zhí)行
可以很容易在NodeJS中運行缺點
依賴SPM打包，模塊的加載邏輯偏重
實現(xiàn)
Sea.js
coolie
ES6模塊
EcmaScript 6標(biāo)準(zhǔn)增加了JavaScript語言層面的模塊體系定義。ES 6模塊的設(shè)計思想， 是盡量靜態(tài)化， 使編譯時就能確定模塊的依賴關(guān)系， 以及輸入和輸出的變量。Commons JS和AMD模塊，都只能在運行時確定這些東西。
import "jquery"export function doStuff(){}module "localModule"{}優(yōu)點
容易進行靜態(tài)分析
面向未來的Ecma Script標(biāo)準(zhǔn)
缺點
原生瀏覽器端還沒有實現(xiàn)該標(biāo)準(zhǔn)
全新的命令，新版的Node JS才支持
實現(xiàn)
Babel
大家期望的模塊
??系統(tǒng)可以兼容多種模塊風(fēng)格， 盡量可以利用已有的代碼， 不僅僅只是JavaScript模塊化， 還有CSS、圖片、字體等資源也需要模塊化。
WebPack是一款模塊加載器兼打包工具， 它能把各種資源， 如JS、JSX、ES 6、SASS、LESS、圖片等都作為模塊來處理和使用。
??安裝：
npm install webpack -g npm install webpack-cli -g
測試安裝成功
webpack -v
webpack-cli -v
創(chuàng)建 webpack.config.js配置文件
entry：入口文件， 指定Web Pack用哪個文件作為項目的入口
output：輸出， 指定WebPack把處理完成的文件放置到指定路徑
module：模塊， 用于處理各種類型的文件
plugins：插件， 如：熱更新、代碼重用等
resolve：設(shè)置路徑指向
watch：監(jiān)聽， 用于設(shè)置文件改動后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true}直接運行webpack命令打包
創(chuàng)建項目
創(chuàng)建一個名為modules的目錄，用于放置JS模塊等資源文件
在modules下創(chuàng)建模塊文件，如hello.js，用于編寫JS模塊相關(guān)代碼
//暴露一個方法：sayHi
exports.sayHi = function(){
document.write("<p>Hello Webpack</p>");
}在modules下創(chuàng)建一個名為main.js的入口文件，用于打包時設(shè)置entry屬性
//require 導(dǎo)入一個模塊，就可以調(diào)用這個模塊中的方法了var hello = require("./hello");hello.sayHi();在項目目錄下創(chuàng)建webpack.config.js配置文件，使用webpack命令打包
module.exports = {
entry:"./modules/main.js",
output:{
filename:"./js/bundle.js"
}}在項目目錄下創(chuàng)建HTML頁面，如index.html，導(dǎo)入webpack打包后的JS文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>狂神說Java</title> </head> <body> <script src="dist/js/bundle.js"></script> </body> </html>
在IDEA控制臺中直接執(zhí)行webpack；如果失敗的話，就使用管理員權(quán)限運行即可！
運行HTML看效果
說明
# 參數(shù)--watch 用于監(jiān)聽變化webpack --watch
學(xué)習(xí)的時候，盡量的打開官方的文檔
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：
嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于Vue js過渡系統(tǒng)的視圖過渡效果
細粒度的導(dǎo)航控制
帶有自動激活的CSS class的鏈接
HTML5 歷史模式或hash模式， 在IE 9中自動降級
自定義的滾動行為
基于第一個vue-cli進行測試學(xué)習(xí)； 先查看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);
1、先刪除沒有用的東西
2、components 目錄下存放我們自己編寫的組件
3、定義一個Content.vue 的組件
<template>
<p>
<h2>內(nèi)容頁</h2>
</p></template><script>
export default {
name:"Content"
}</script>Main.vue組件
<template>
<p>
<h2>首頁</h2>
</p></template><script>
export default {
name:"Main"
}</script>4、安裝路由，在src目錄下，新建一個文件夾：router，專門存放路由，配置路由index.js，如下
import Vue from'vue'//導(dǎo)入路由插件import Router from 'vue-router'//導(dǎo)入上面定義的組件import Content from '../components/Content'import Main from '../components/Main'//安裝路由Vue.use(Router) ;//配置路由export default new Router({
routes:[
{
//路由路徑
path:'/content',
//路由名稱
name:'content',
//跳轉(zhuǎn)到組件
component:Content },{
//路由路徑
path:'/main',
//路由名稱
name:'main',
//跳轉(zhuǎn)到組件
component:Main }
]
});5、在main.js中配置路由
import Vue from 'vue'import App from './App'//導(dǎo)入上面創(chuàng)建的路由配置目錄import router from './router'//自動掃描里面的路由配置//來關(guān)閉生產(chǎn)模式下給出的提示Vue.config.productionTip = false;new Vue({
el:"#app",
//配置路由
router,
components:{App},
template:'<App/>'});6、在App.vue中使用路由
<template>
<p id="app">
<!--
router-link：默認會被渲染成一個<a>標(biāo)簽，to屬性為指定鏈接
router-view：用于渲染路由匹配到的組件
-->
<router-link to="/">首頁</router-link>
<router-link to="/content">內(nèi)容</router-link>
<router-view></router-view>
</p></template><script>
export default{
name:'App'
}</script><style></style>我們采用實戰(zhàn)教學(xué)模式并結(jié)合ElementUI組件庫，將所需知識點應(yīng)用到實際中，以最快速度帶領(lǐng)大家掌握Vue的使用；
注意：命令行都要使用管理員模式運行
1、創(chuàng)建一個名為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節(jié)點寫入依賴，-S為該命令的縮寫
npm install -save-dev moduleName:–save-dev的意思是將模塊安裝到項目目錄下，并在package文件的devDependencies節(jié)點寫入依賴，-D為該命令的縮寫
把沒有用的初始化東西刪掉！
??在源碼目錄中創(chuàng)建如下結(jié)構(gòu)：
assets：用于存放資源文件
components：用于存放Vue功能組件
views：用于存放Vue視圖組件
router：用于存放vue-router配置
創(chuàng)建首頁視圖，在views目錄下創(chuàng)建一個名為Main.vue的視圖組件：
<template>
<p>首頁</p></template><script>
export default {
name:"Main"
}</script><style scoped></style>創(chuàng)建登錄頁視圖在views目錄下創(chuàng)建名為Login.vue的視圖組件，其中el-*的元素為ElementUI組件；
<template>
<p>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h4 class="login-title">歡迎登錄</h4>
<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-dialog title="溫馨提示" :visible.sync="dialogVisiable" 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>
</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路由到指定界面，該方式稱為編程式導(dǎo)航
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>創(chuàng)建路由，在router目錄下創(chuàng)建一個名為index.js的vue-router路由配置文件
//導(dǎo)入vueimport Vue from 'vue';import VueRouter from 'vue-router';//導(dǎo)入組件import Main from "../views/Main";import Login from "../views/Login";//使用Vue.use(VueRouter);//導(dǎo)出export default new VueRouter({
routes: [
{
//登錄頁
path: '/main',
component: Main },
//首頁
{
path: '/login',
component: Login },
]})APP.vue
<template>
<p id="app">
<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
如果出現(xiàn)錯誤: 可能是因為sass-loader的版本過高導(dǎo)致的編譯錯誤，當(dāng)前最高版本是8.0.2，需要退回到7.3.1 ；
去package.json文件里面的 "sass-loader"的版本更換成7.3.1，然后重新cnpm install就可以了；
嵌套路由又稱子路由，在實際應(yīng)用中，通常由多層嵌套的組件組合而成。
demo
1、 創(chuàng)建用戶信息組件，在 views/user 目錄下創(chuàng)建一個名為 Profile.vue 的視圖組件；
Profile.vue
<template>
<h2>個人信息</h2></template><script>
export default {
name: "UserProfile"
}</script><style scoped></style>2、在用戶列表組件在 views/user 目錄下創(chuàng)建一個名為 List.vue 的視圖組件；
List.vue
<template>
<h2>用戶列表</h2></template><script>
export default {
name: "UserList"
}</script><style scoped></style>3、 修改首頁視圖，我們修改 Main.vue 視圖組件，此處使用了 ElementUI 布局容器組件，代碼如下：
Main.vue
<template>
<p>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!--插入的地方-->
<router-link to="/user/profile">個人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用戶列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>內(nèi)容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分類管理</el-menu-item>
<el-menu-item index="2-2">內(nèi)容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>個人信息</el-dropdown-item>
<el-dropdown-item>退出登錄</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<!--在這里展示視圖-->
<router-view />
</el-main>
</el-container>
</el-container>
</p></template><script>
export default {
name: "Main"
}</script><style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}</style>4、 配置嵌套路由修改 router 目錄下的 index.js 路由配置文件，使用children放入main中寫入子模塊，代碼如下
index.js
//導(dǎo)入vueimport Vue from 'vue';import VueRouter from 'vue-router';//導(dǎo)入組件import Main from "../views/Main";import Login from "../views/Login";//導(dǎo)入子模塊import UserList from "../views/user/List";import UserProfile from "../views/user/Profile";//使用Vue.use(VueRouter);//導(dǎo)出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、 路由嵌套實戰(zhàn)效果圖
圖 路由嵌套效果圖
這里演示如果請求帶有參數(shù)該怎么傳遞
demo
?用的還是上述例子的代碼 修改一些代碼 這里不放重復(fù)的代碼了
第一種取值方式
1、 修改路由配置, 主要是router下的index.js中的 path 屬性中增加了 :id 這樣的占位符
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile}2、傳遞參數(shù)
?此時我們在Main.vue中的route-link位置處 to 改為了 :to，是為了將這一屬性當(dāng)成對象使用，注意 router-link 中的 name 屬性名稱 一定要和 路由中的 name 屬性名稱 匹配，因為這樣 Vue 才能找到對應(yīng)的路由路徑；
<!--name是組件的名字 params是傳的參數(shù) 如果要傳參數(shù)的話就需要用v:bind:來綁定--><router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>3、在要展示的組件Profile.vue中接收參數(shù) 使用 {{$route.params.id}}來接收
Profile.vue 部分代碼
<template>
<!-- 所有的元素必須在根節(jié)點下-->
<p>
<h2>個人信息</h2>
{{$route.params.id}} </p></template>第二種取值方式 使用props 減少耦合
1、修改路由配置 , 主要在router下的index.js中的路由屬性中增加了 props: true 屬性
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile,
props: true}2、傳遞參數(shù)和之前一樣 在Main.vue中修改route-link地址
<!--name是組件的名字 params是傳的參數(shù) 如果要傳參數(shù)的話就需要用v:bind:來綁定--><router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>3、在Profile.vue接收參數(shù)為目標(biāo)組件增加 props 屬性
Profile.vue
<template>
<p>
個人信息
{{ id }} </p></template><script>
export default {
props: ['id'],
name: "UserProfile"
}</script><style scoped></style>
圖 傳參效果圖
重定向的意思大家都明白，但 Vue 中的重定向是作用在路徑不同但組件相同的情況下，比如：
在router下面index.js的配置
{
path: '/main',
name: 'Main',
component: Main},{
path: '/goHome',
redirect: '/main'}說明：這里定義了兩個路徑，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 路徑，由此可以看出重定向不需要定義組件；
使用的話，只需要在Main.vue設(shè)置對應(yīng)路徑即可；
<el-menu-item index="1-3"> <router-link to="/goHome">回到首頁</router-link></el-menu-item>
路由模式有兩種
hash：路徑帶 # 符號，如 http://localhost/#/login
history：路徑不帶 # 符號，如 http://localhost/login
修改路由配置，代碼如下：
export default new Router({
mode: 'history',
routes: [
]});404 demo
1.創(chuàng)建一個NotFound.vue視圖組件
NotFound.vue
<template>
<p>
<h2>404,你的頁面走丟了</h2>
</p></template><script>
export default {
name: "NotFound"
}</script><style scoped></style>2.修改路由配置index.js
import NotFound from '../views/NotFound'{
path: '*',
component: NotFound}3.效果圖
圖 404效果圖
路由鉤子與異步請求
beforeRouteEnter：在進入路由前執(zhí)行
beforeRouteLeave：在離開路由前執(zhí)行
在Profile.vue中寫
export default {
name: "UserProfile",
beforeRouteEnter: (to, from, next) => {
console.log("準(zhǔn)備進入個人信息頁");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("準(zhǔn)備離開個人信息頁");
next();
}
}參數(shù)說明：
to：路由將要跳轉(zhuǎn)的路徑信息
from：路徑跳轉(zhuǎn)前的路徑信息
next：路由的控制參數(shù)
next() 跳入下一個頁面
next(’/path’) 改變路由的跳轉(zhuǎn)方向，使其跳到另一個路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例
在鉤子函數(shù)中使用異步請求
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、準(zhǔn)備數(shù)據(jù) ： 只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態(tài)文件放入該目錄下。
數(shù)據(jù)和之前用的json數(shù)據(jù)一樣 需要的去上述axios例子里
// 靜態(tài)數(shù)據(jù)存放的位置static/mock/data.json
4.在 beforeRouteEnter 中進行異步請求
Profile.vue
export default {
//第二種取值方式
// props:['id'],
name: "UserProfile",
//鉤子函數(shù) 過濾器
beforeRouteEnter: (to, from, next) => {
//加載數(shù)據(jù)
console.log("進入路由之前")
next(vm => {
//進入路由之前執(zhí)行g(shù)etData方法
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結(jié)合圖
以上是“vue知識點有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼