溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue知識點有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue知識點有哪些”這篇文章吧。
Soc原則：關注點分離原則
Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。
HTML + CSS + JS : 視圖 ： 給用戶看，刷新后臺給的數據
網絡通信 ： axios
頁面跳轉 ： vue-router
狀態管理：vuex
Vue-UI : ICE , Element UI
HTML（結構）：超文本標記語言（Hyper Text Markup Language），決定網頁的結構和內容
CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
JavaScript（行為）：是一種弱類型腳本語言，其源碼不需經過編譯，而是由瀏覽器解釋運行，用于控制網頁的行為
太簡單，略
CSS層疊樣式表是一門標記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：
語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護；
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為【CSS預處理器】的工具,提供CSS缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大的提高了前端在樣式上的開發效率。
什么是CSS預處理器
CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只需要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的編程語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS文件，以供項目使用”。
常用的CSS預處理器有哪些
SASS：基于Ruby ，通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高于LESS。
LESS：基于NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低于SASS，但在實際開發中足夠了，所以如果我們后臺人員如果需要的話，建議使用LESS。
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 通信功能；
Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：餓了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一個用于前端開發的開源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
Babel：JS編譯工具，主要用于瀏覽器不支持的ES新特性，比如用于編譯TypeScript
WebPack：模塊打包器，主要作用就是打包、壓縮、合并及按序加載
注：以上知識點已將WebApp開發所需技能全部梳理完畢
混合開發（Hybrid App）
主要目的是實現一套代碼三端統一（PC、Android：.apk、iOS：.ipa）并能夠調用到設備底層硬件（如：傳感器、GPS、攝像頭等），打包方式主要有以下兩種：
云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）
微信小程序
詳見微信官網，這里就是介紹一個方便微信小程序UI開發的框架：WeUI
前端人員為了方便開發也需要掌握一定的后端技術但我們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開發小程序的前端框架， 目前支持微信小程序、百度智能小程序，頭條小程序和支付寶小程序。框架基于Vue.js， 修改了的運行時框架runtime和代碼編譯器compiler實現， 使其可運行在小程序環境中， 從而為小程序開發引入了Vue.js開發體驗。
·官網地址
·Git hub
備注：完備的Vue開發體驗， 井且支持多平臺的小程序開發， 推薦使用
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫， 由微信官方設計團隊為微信內網頁和微信小程序量身設計， 令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。
官網地址
Github
為什么需要前后分離
為了降低開發的復雜度， 以后端為出發點， 比如：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， 因為時代在變、技術在變、什么都在變(引用扎克伯格的一句話：唯一不變的是變化本身)；當我們去給大學做實訓時，有些同學會認為我們沒有講什么干貨，其實不然，只能說是你認知里的干貨對于市場來說早就過時了而已
時間回到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層的綁定等，都不是容易的事情。
此處的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需要后端配合， 前端無法完全掌控。
前端為主的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!
綜上所述，模式也好，技術也罷，沒有好壞優劣之分，只有適合不適合；前后分離的開發思想主要是基于Soc(關注度分離原則)，上面種種模式，都是讓前后端的職責更清晰，分工更合理高效。
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
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大好處
低耦合：視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可復用：你可以把一些視圖邏輯放在一個ViewModel里面，讓很多View重用這段視圖邏輯。
獨立開發：開發人員可以專注于業務邏輯和數據的開發（ViewMode），設計人員可以專注于頁面設計。
可測試：界面素來是比較難以測試的，而現在測試可以針對ViewModel來寫。
（1）View
View是視圖層， 也就是用戶界面。前端主要由HTH L和csS來構建， 為了更方便地展現vi eu to del或者Hodel層的數據， 已經產生了各種各樣的前后端模板語言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構建用戶界面的內置模板語言。
（2）Model
Model是指數據模型， 泛指后端進行的各種業務邏輯處理和數據操控， 主要圍繞數據庫系統展開。這里的難點主要在于需要和前端約定統一的接口規則
（3）ViewModel
ViewModel是由前端開發人員組織生成和維護的視圖數據層。在這一層， 前端開發者對從后端獲取的Model數據進行轉換處理， 做二次封裝， 以生成符合View層使用預期的視圖數據模型。
??需要注意的是View Model所封裝出來的數據模型包括視圖的狀態和行為兩部分， 而Model層的數據模型是只包含狀態的
比如頁面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態(展示)
頁面加載進來時發生什么，點擊這一塊發生什么，這一塊滾動時發生什么這些都屬于視圖行為(交互)
視圖狀態和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由于實現了雙向綁定， View Model的內容會實時展現在View層， 這是激動人心的， 因為前端開發者再也不必低效又麻煩地通過操縱DOM去更新視圖。
??MVVM框架已經把最臟最累的一塊做好了， 我們開發者只需要處理和維護View Model， 更新數據視圖就會自動得到相應更新，真正實現事件驅動編程。
??View層展現的不是Model層的數據， 而是ViewModel的數據， 由ViewModel負責與Model層交互， 這就完全解耦了View層和Model層， 這個解耦是至關重要的， 它是前后端分離方案實施的重要一環。
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Ｍ) 的長處， 并擁有自己獨特的功能，如：計算屬性
開源，社區活躍度高
【說明】IDEA可以安裝Vue的插件!
??注意：Vue不支持IE 8及以下版本， 因為Vue使用了IE 8無法模擬的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的瀏覽器。
（1）下載地址
開發版本
包含完整的警告和調試模式：https：//yuejs.org/js/vue.js
刪除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.js
CDN
<script src=“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文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>
2、引入Vue.js
<!--1.導入Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>12
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層，模板--><p id="app">
{{message}}</p>說明：只需要在綁定的元素中使用雙花括號將Vue創建的名為message屬性包裹起來， 即可實現數據綁定功能， 也就實現了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.導入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層就是使用觀察者模式來實現數據的監聽與綁定， 以做到數據與視圖的快速響應。
我們已經成功創建了第一個Vue應用!看起來這跟渲染一個字符串模板非常類似， 但是Vue在背后做了大量工作。現在數據和DOM已經被建立了關聯， 所有東西都是響應式的。我們在控制臺操作對象屬性，界面可以實時更新!
??我們還可以使用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">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！ </span></p><!--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: '頁面加載于 ' + new Date().toLocaleString()
}
});</script></body></html>你看到的v-bind等被稱為指令。指令帶有前綴v以表示它們是Vue提供的特殊特性。可能你已經猜到了， 它們會在渲染的DOM上應用特殊的響應式行為在這里，該指令的意思是：“將這個元素節點的title特性和Vue實例的message屬性保持一致”。
??如果你再次打開瀏覽器的JavaScript控制臺， 輸入app， message=‘新消息’，就會再一次看到這個綁定了title特性的HTML已經進行了更新。
什么是條件判斷語句，就不需要我說明了吧，以下兩個屬性!
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.導入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中表示絕對等于(就是數據與類型都要相等)上代碼：
<!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.導入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: 'A'
}
});</script></body></html>v-for
格式說明
<p id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}} </li></p>123456注：items是數組，item是數組元素迭代的別名。我們之后學習的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.導入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:{
items:[
{message:'狂神說Java'},
{message:'狂神說前端'},
{message:'狂神說運維'}
]
}
});</script></body></html>測試：在控制臺輸入vm.items.push({message：'狂神說運維'})，嘗試追加一條數據，你會發現瀏覽器中顯示的內容會增加一條狂神說運維.
v-on監聽事件
?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'在方法里面指向當前Vue實例
alert(this.message);
}
}
});</script></body></html>點擊測試
??Vue還有一些基本的使用方式， 大家有需要的可以再跟著官方文檔看看， 因為這些基本的指令幾乎我們都見過了，一通百通!掌握學習的方式!
Vue.js是一個MV VM框架， 即數據雙向綁定， 即當數據發生變化的時候， 視圖也就發生變化， 當視圖發生變化的時候，數據也會跟著同步變化。這也算是Vue.js的精髓之處了。
??值得注意的是，我們所說的數據雙向綁定，一定是對于UI控件來說的非UI控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用vue x那么數據流也是單項的，這時就會和雙向數據綁定有沖突。
（1）為什么要實現數據的雙向綁定
在Vue.js中，如果使用vuex， 實際上數據還是單向的， 之所以說是數據雙向綁定，這是用的UI控件來說， 對于我們處理表單， Vue.js的雙向數據綁定用起來就特別舒服了。即兩者并不互斥，在全局性數據流使用單項，方便跟蹤；局部性數據流使用雙向，簡單易操作。
你可以用v-model指令在表單、及元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇， 但v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。
??注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數據作為數據來源。你應該通過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">
單復選框： <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">
多復選框： <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表達式的初始值未能匹配任何選項，元系將被渲染為“未選中”狀態。 在iOS中， 這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS不會觸發change事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。
組件是可復用的Vue實例， 說白了就是一組可以重復使用的模板， 跟JSTL的自定義標簽、Thymeleal的th:fragment等框架有著異曲同工之妙，通常一個應用會以一棵嵌套的組件樹的形式來組織：
例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件。
注意：在實際開發中，我們并不會用以下方式開發組件，而是采用vue-cli創建，vue模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。
??使用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屬性傳遞參數像上面那樣用組件沒有任何意義，所以我們是需要傳遞參數到組件的，此時就需要使用props屬性了！
??注意：默認規則下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的數組，并創建同等數量的組件
v-bind:panh="item"：將遍歷的item項綁定到組件中props定義名為item屬性上；= 號左邊的panh為props定義的屬性名，右邊的為item in items 中遍歷的item項的值
Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架， 她的主要作用就是實現AJAX異步通信，其功能特點如下：
從瀏覽器中創建XMLHttpRequests
從node.js創建http請求
支持Promise API[JS中鏈式編程]
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換JSON數據
客戶端支持防御XSRF(跨站請求偽造)
GitHub：https://github.com/axios/axios
??中文文檔：http://www.axios-js.com/
由于Vue.js是一個視圖層框架并且作者(尤雨溪) 嚴格準守SoC(關注度分離原則)所以Vue.js并不包含AJAX的通信功能， 為了解決通信問題， 作者單獨開發了一個名為vue-resource的插件， 不過在進入2.0版本以后停止了對該插件的維護并推薦了Axios框架。少用jQuery， 因為它操作Dom太頻繁!
咱們開發的接口大部分都是采用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><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(){//鉤子函數
axios .get('data.json')
.then(response=>(this.info=response.data));
}
});</script></body></html>說明：
在這里使用了v-bind將a:href的屬性值與Vue實例中的數據進行綁定
使用axios框架的get方法請求AJAX并自動將數據封裝進了Vue實例的數據對象中
我們在data中的數據結構必須和Ajax響應回來的數據格式匹配！
官方文檔：https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示
??Vue實例有一個完整的生命周期，也就是從開始創建初女臺化數據、編譯模板、掛載DOM、渲染一更新一渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
??在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊JS方法，可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。
計算屬性的重點突出在屬性兩個字上(屬性是名詞)，首先它是個屬性其次這個屬性有計算的能力(計算是動詞)，這里的計算就是個函數：簡單點說，它就是一個能夠將計算結果緩存起來的屬性(將行為轉化成了靜態的屬性)，僅此而已；可以想象為緩存!
??上代碼
<!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.導入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方法名不能重名，重名之后，只會調用methods的方法
this.message;
return Date.now();//返回一個時間戳
}
}
});</script></body></html>注意：methods和computed里的東西不能重名
說明：
methods：定義方法， 調用方法使用currentTime1()， 需要帶括號
computed：定義計算屬性， 調用屬性使用currentTime2， 不需要帶括號：this.message是為了能夠讓currentTime2觀察到數據變化而變化
如何在方法中的值發生了變化，則緩存就會刷新!可以在控制臺使用vm.message=”q in jiang"， 改變下數據的值，再次測試觀察效果!
結論：
??調用方法時，每次都需要講行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果緩存起來，采用計算屬性可以很方便的做到這點，計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷；
在Vue.js中我們使用<slot>元素作為承載分發內容的出口，作者稱其為插槽，可以應用在組合組件的場景中；
比如準備制作一個待辦事項組件(todo) ， 該組件由待辦標題(todo-title) 和待辦內容(todo-items)組成，但這三個組件又是相互獨立的，該如何操作呢?
??第一步定義一個待辦事項的組件
<p id="app">
<todo></todo></p><!--1.導入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>學習狂神說Java</li>\
</ul>\
</p>'
})</script>第二步 我們需要讓，代辦事項的標題和值實現動態綁定，怎么做呢？我們可以留一個插槽！
??1-將上面的代碼留出一個插槽，即slot
Vue.component('todo',{
template:'<p>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </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:"<li>{{index+1}},{{item}}</li>"
});3-實例化Vue并初始化數據
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組件分別被分發到了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.導入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，就是數組的下標，使用for循環遍歷的時候，可以循環出來！
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>通以上代碼不難發現，數據項在Vue的實例中， 但刪除操作要在組件中完成， 那么組件如何才能刪除Vue實例中的數據呢?此時就涉及到參數傳遞與事件分發了， Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題； 使用this.$emit(‘自定義事件名’， 參數) ， 操作過程如下：
??1-在vue的實例中增加了methods對象并定義了一個名為removeTodoltems的方法
var vm = new Vue({
el:"#vue",
data:{
title_text:"秦老師系列課程",
todoItems:['test1','test2','test3']
},
methods:{
removeItems:function(index){
console.log("刪除了"+this.todoItems[index]+"OK");
//splice（） 方法向/從數組中添加/刪除項目，然后返回被刪除的項目，其中index
this.todoItems.splice(index,1);
}
}
});2-修改todo-items待辦內容組件的代碼，增加一個刪除按鈕，并且綁定事件！
Vue.component("todo-items",{
props:["item_p","index_p"],
template:"<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層，模板--><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.導入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，就是數組的下標，使用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>
核心：數據驅動，組件化
優點：借鑒了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官方提供的一個腳手架，用于快速生成一個vue的項目模板；
??預先定義好的目錄結構及基礎代碼，就好比咱們在創建Maven項目時可以選擇創建一個骨架項目，這個估計項目就是腳手架，我們的開發更加的快速；
??項目的功能
統一的目錄結構
本地調試
熱部署
單元測試
集成打包上線
Node.js：http://nodejs.cn/download/
安裝就是無腦的下一步就好，安裝在自己的環境目錄下
Git：https://git-scm.com/doenloads
鏡像：https://npm.taobao.org/mirrors/git-for-windows/
確認nodejs安裝成功：
cmd下輸入node -v，查看是否能夠正確打印出版本號即可！
cmd下輸入npm -v，查看是否能夠正確打印出版本號即可！
這個npm，就是一個軟件包管理工具，就和linux下的apt軟件安裝差不多！
??安裝Node.js淘寶鏡像加速器（cnpm）
??這樣的話，下載會快很多~
# -g 就是全局安裝 npm install cnpm -g # 或使用如下語句解決npm速度慢的問題 npm install --registry=https://registry.npm.taobao.org
安裝的過程可能有點慢~，耐心等待！雖然安裝了cnpm，但是盡量少用！
??安裝的位置：C:\Users\administrator\AppData\Roaming\npm
??安裝vue-cli
cnpm instal1 vue-cli-g#測試是否安裝成功#查看可以基于哪些模板創建vue應用程序，通常我們選擇webpackvue list
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是一個現代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 src = "module1.js"></script> <script src = "module2.js"></script> <script src = "module3.js"></script>
這是最原始的JavaScript文件加載方式，如果把每一個文件看做是一個模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在window對象中，不同模塊的調用都是一個作用域。
??這種原始的加載方式暴露了一些顯而易見的弊端：
全局作用域下容易造成變量沖突
文件只能按照<script>的書寫順序進行加載
開發人員必須主觀解決模塊和代碼庫的依賴關系
在大型項目中各種資源難以管理，長期積累的問題導致代碼庫混亂不堪
服務器端的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的前身
Asynchronous Module Definition規范其實主要一個主要接口define(id?,dependencies?,factory);它要在聲明模塊的時候指定所有的依賴dependencies，并且還要當做形參傳到factory中，對于依賴的模塊提前執行。
define("module",["dep1","dep2"],functian(d1,d2){
return someExportedValue;});require（["module","../file.js"],function(module，file){});1234優點
適合在瀏覽器環境中異步加載模塊
可以并行加載多個模塊
缺點
提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不暢
不符合通用的模塊化思維方式，是一種妥協的實現
實現
RequireJS
curl
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是一款模塊加載器兼打包工具， 它能把各種資源， 如JS、JSX、ES 6、SASS、LESS、圖片等都作為模塊來處理和使用。
??安裝：
npm install webpack -g npm install webpack-cli -g
測試安裝成功
webpack -v
webpack-cli -v
創建 webpack.config.js配置文件
entry：入口文件， 指定Web Pack用哪個文件作為項目的入口
output：輸出， 指定WebPack把處理完成的文件放置到指定路徑
module：模塊， 用于處理各種類型的文件
plugins：插件， 如：熱更新、代碼重用等
resolve：設置路徑指向
watch：監聽， 用于設置文件改動后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true}直接運行webpack命令打包
創建項目
創建一個名為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文件
<!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控制臺中直接執行webpack；如果失敗的話，就使用管理員權限運行即可！
運行HTML看效果
說明
# 參數--watch 用于監聽變化webpack --watch
學習的時候，盡量的打開官方的文檔
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來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。
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>內容頁</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'//導入路由插件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/>'});6、在App.vue中使用路由
<template>
<p id="app">
<!--
router-link：默認會被渲染成一個<a>標簽，to屬性為指定鏈接
router-view：用于渲染路由匹配到的組件
-->
<router-link to="/">首頁</router-link>
<router-link to="/content">內容</router-link>
<router-view></router-view>
</p></template><script>
export default{
name:'App'
}</script><style></style>我們采用實戰教學模式并結合ElementUI組件庫，將所需知識點應用到實際中，以最快速度帶領大家掌握Vue的使用；
注意：命令行都要使用管理員模式運行
1、創建一個名為hello-vue的工程vue init webpack hello-vue
2、安裝依賴， 我們需要安裝vue-router、element-ui、sass-loader和node-sass四個插件
#進入工程目錄cd hello-vue#安裝vue-routern npm install vue-router --save-dev#安裝element-uinpm i element-ui -S#安裝依賴npm install# 安裝SASS加載器cnpm install sass-loader node-sass --save-dev#啟功測試npm run dev
3、Npm命令解釋：
npm install moduleName：安裝模塊到項目目錄下
npm install -g moduleName：-g的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置要看npm config prefix的位置
npm install -save moduleName：–save的意思是將模塊安裝到項目目錄下， 并在package文件的dependencies節點寫入依賴，-S為該命令的縮寫
npm install -save-dev moduleName:–save-dev的意思是將模塊安裝到項目目錄下，并在package文件的devDependencies節點寫入依賴，-D為該命令的縮寫
把沒有用的初始化東西刪掉！
??在源碼目錄中創建如下結構：
assets：用于存放資源文件
components：用于存放Vue功能組件
views：用于存放Vue視圖組件
router：用于存放vue-router配置
創建首頁視圖，在views目錄下創建一個名為Main.vue的視圖組件：
<template>
<p>首頁</p></template><script>
export default {
name:"Main"
}</script><style scoped></style>創建登錄頁視圖在views目錄下創建名為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路由到指定界面，該方式稱為編程式導航
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路由配置文件
//導入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 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
如果出現錯誤: 可能是因為sass-loader的版本過高導致的編譯錯誤，當前最高版本是8.0.2，需要退回到7.3.1 ；
去package.json文件里面的 "sass-loader"的版本更換成7.3.1，然后重新cnpm install就可以了；
嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的組件組合而成。
demo
1、 創建用戶信息組件，在 views/user 目錄下創建一個名為 Profile.vue 的視圖組件；
Profile.vue
<template>
<h2>個人信息</h2></template><script>
export default {
name: "UserProfile"
}</script><style scoped></style>2、在用戶列表組件在 views/user 目錄下創建一個名為 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>內容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分類管理</el-menu-item>
<el-menu-item index="2-2">內容列表</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
//導入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、 路由嵌套實戰效果圖
圖 路由嵌套效果圖
這里演示如果請求帶有參數該怎么傳遞
demo
?用的還是上述例子的代碼 修改一些代碼 這里不放重復的代碼了
第一種取值方式
1、 修改路由配置, 主要是router下的index.js中的 path 屬性中增加了 :id 這樣的占位符
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile}2、傳遞參數
?此時我們在Main.vue中的route-link位置處 to 改為了 :to，是為了將這一屬性當成對象使用，注意 router-link 中的 name 屬性名稱 一定要和 路由中的 name 屬性名稱 匹配，因為這樣 Vue 才能找到對應的路由路徑；
<!--name是組件的名字 params是傳的參數 如果要傳參數的話就需要用v:bind:來綁定--><router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>3、在要展示的組件Profile.vue中接收參數 使用 {{$route.params.id}}來接收
Profile.vue 部分代碼
<template>
<!-- 所有的元素必須在根節點下-->
<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、傳遞參數和之前一樣 在Main.vue中修改route-link地址
<!--name是組件的名字 params是傳的參數 如果要傳參數的話就需要用v:bind:來綁定--><router-link :to="{name:'UserProfile',params:{id:1}}">個人信息</router-link>3、在Profile.vue接收參數為目標組件增加 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設置對應路徑即可；
<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.創建一個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：在進入路由前執行
beforeRouteLeave：在離開路由前執行
在Profile.vue中寫
export default {
name: "UserProfile",
beforeRouteEnter: (to, from, next) => {
console.log("準備進入個人信息頁");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("準備離開個人信息頁");
next();
}
}參數說明：
to：路由將要跳轉的路徑信息
from：路徑跳轉前的路徑信息
next：路由的控制參數
next() 跳入下一個頁面
next(’/path’) 改變路由的跳轉方向，使其跳到另一個路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例
在鉤子函數中使用異步請求
1、安裝 Axios
cnpm install --save vue-axios
2、main.js引用 Axios
import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)
3、準備數據 ： 只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態文件放入該目錄下。
數據和之前用的json數據一樣 需要的去上述axios例子里
// 靜態數據存放的位置static/mock/data.json
4.在 beforeRouteEnter 中進行異步請求
Profile.vue
export default {
//第二種取值方式
// props:['id'],
name: "UserProfile",
//鉤子函數 過濾器
beforeRouteEnter: (to, from, next) => {
//加載數據
console.log("進入路由之前")
next(vm => {
//進入路由之前執行getData方法
vm.getData()
});
},
beforeRouteLeave: (to, from, next) => {
console.log("離開路由之前")
next();
},
//axios
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/mock/data.json'
}).then(function (response) {
console.log(response)
})
}
}
}5.路由鉤子和axios結合圖
以上是“vue知識點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
