Vue框架详解（适合Java学习者）
文章目錄
- 一、前言
- 二、Vue概述
- 三、MVVM架構(gòu)
- 1.什么是MVVM
- 2.MVVM的好處
- 3.MVVM圖解
- 四、第一個(gè)Vue程序
- 五、Vue七大屬性
- 六、常用指令
- 1.綁定屬性（v-bind）
- 2.判斷（v-if）
- 3.循環(huán)（v-for）
- 4.綁定事件（v-on）
- 七、數(shù)據(jù)雙向綁定
- 八、Vue組件
- 九、Vue生命周期
- 1.Vue生命周期理解
- 2.Vue生命周期圖解
- 九、Axios異步通信
- 十、Vue計(jì)算屬性
- 十一、插槽slot
- 十二、自定義事件內(nèi)容分發(fā)
- 十三、vue-cli腳手架
- 1.什么是vue-cli
- 2.使用vue-cli的環(huán)境前提
- 3.創(chuàng)建一個(gè)vue-cli程序
- 十四、Webpack打包器
- 1.什么是webpack
- 2.安裝webpack
- 3.使用webpack
- 十五、vue-router路由
- 十六、vue + elementUI整合小案例
- 十七、路由嵌套
- 十八、參數(shù)傳遞
- 方式一：取值
- 方式二：使用props減少耦合
- 十九、重定向
- 二十、路由模式與處理404
- 1.路由模式
- 2.處理404
- 二十一、路由鉤子與異步請求
- 1.路由鉤子函數(shù)
- 2.在鉤子函數(shù)中使用異步通信
一、前言
該技術(shù)博客是關(guān)于狂神說Vue教程的詳細(xì)總結(jié)，希望能給大家?guī)韼椭?#xff01;
二、Vue概述
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，該框架可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅簡單而且便于與第三方庫(如: vue-router: 跳轉(zhuǎn)，vue-resource: 通信，vuex:管理)或項(xiàng)目整合
Vue是漸進(jìn)式JavaScript框架，所謂漸進(jìn)式就是逐步實(shí)現(xiàn)新特性的意思，如實(shí)現(xiàn)模塊化開發(fā)、路由、狀態(tài)管理等新特性。其特點(diǎn)是綜合了Angular（模塊化） 和 React（虛擬DOM） 的優(yōu)點(diǎn)，并有自己的特色功能：計(jì)算屬性
三、MVVM架構(gòu)
1.什么是MVVM
MVVM（Model-View-ViewModel） 源自于經(jīng)典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel層，負(fù)責(zé)轉(zhuǎn)換Model中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用，其作用如下:
- 該層向上與視圖層進(jìn)行雙向數(shù)據(jù)綁定
- 向下與Model層通過接口請求進(jìn)行數(shù)據(jù)交互
ViewModel能夠觀察到數(shù)據(jù)變化，并對視圖對應(yīng)的內(nèi)容進(jìn)行更新
ViewModel能夠監(jiān)聽到視圖變化，并能夠通知數(shù)據(jù)發(fā)生變化
2.MVVM的好處
MVVM模式和MVC模式一樣，主要目的是分離視圖(View)和模型(Model),有幾大好處：
- 低耦合：視圖(View)可以獨(dú)立于Model變化和修改,一個(gè)ViewModel可以綁定到不同的View上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。
- 可復(fù)用：你可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多View重用這段視圖邏輯。
- 獨(dú)立開發(fā)：開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel),設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)。
- 可測試：界面素來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來寫。
3.MVVM圖解
- Model : 模型層，在這里表示JavaScript對象
- View : 視圖層,在這里表示DOM (HTML操作的元素)
- ViewModel : 連接視圖和數(shù)據(jù)的中間件，Vue.js就是MVVM中的ViewModel層的實(shí)現(xiàn)者在MVVM架構(gòu)中，是不允許數(shù)據(jù)和視圖直接通信的，只能通過ViewModel來通信，而ViewModel就是定義了一個(gè)Observer觀察者
- ViewModel來通信，而ViewModel就是定義了一個(gè)Observer觀察者
- ViewModel 能夠觀察到數(shù)據(jù)的變化，并對視圖對應(yīng)的內(nèi)容進(jìn)行更新
- ViewModel 能夠監(jiān)聽到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生改變
至此我們就明白了，Vue就是一個(gè)MVVM的實(shí)現(xiàn)者，它的核心就是實(shí)現(xiàn)了DOM監(jiān)聽與數(shù)據(jù)綁定
四、第一個(gè)Vue程序
我們在硬盤中創(chuàng)建一個(gè)文件夾，叫做vue-first，我們使用IDEA通過Open的方式打開vue-first這個(gè)空文件夾：
我們在創(chuàng)建的項(xiàng)目中，創(chuàng)建一個(gè)index.html文件，就可以開始我們第一個(gè)Vue程序的編寫了！
但是在編寫代碼之前，我們需要打開setting找到Plugins，安裝好Vue的插件：
第一個(gè)Vue程序代碼展示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body><!--View層 模板--> <div id="app">{{message}} </div><script>var vm = new Vue({el : '#app',/*Model層 數(shù)據(jù)*/data : {message : "Hello Vue"}}); </script></body> </html>五、Vue七大屬性
六、常用指令
我們接下來來講解指令，指令的前綴有v-，它們會在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為。
1.綁定屬性（v-bind）
我們還可以使用v-bind來綁定元素特性
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body><!--View層 模板--> <div id="app"><span v-bind:title="message">將鼠標(biāo)懸浮在此段文字上</span> </div><script>var vm = new Vue({el : '#app',/*Model層 數(shù)據(jù)*/data : {message : "Hello Vue"}}); </script></body> </html>2.判斷（v-if）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1> </div><script>var app = new Vue({el: '#app',data: {ok: true}}) </script> </body> </html>3.循環(huán)（v-for）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><li v-for="item in items">{{item.message}}</li> </div><script>var app = new Vue({el: '#app',data: {items: [{message: '我要學(xué)Java'},{message: '我要學(xué)前端'},{message: '我要學(xué)MySQL'}]}}) </script> </body> </html>4.綁定事件（v-on）
可以用v-on指令監(jiān)聽DOM事件，并在觸發(fā)時(shí)運(yùn)行一些JavaScript代碼
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><button v-on:click="sayHi">click me!</button> </div><script>var app = new Vue({el: '#app',data: {message: "我愛敲代碼"},//方法必須定義在Vue的methods對象中，通過v-on綁定methods: { sayHi: function () {alert(this.message)}}}) </script> </body> </html>總結(jié)：我們想要數(shù)據(jù)放在data屬性中，想要方法放在methods屬性中。想要綁定屬性用v-bind，想要綁定事件用v-on，想要綁定數(shù)據(jù)用{{ }}
七、數(shù)據(jù)雙向綁定
雙向綁定是vue的精髓，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖就發(fā)生變化。當(dāng)視圖發(fā)生變化時(shí)，數(shù)據(jù)也跟著發(fā)生變化！
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><input type="text" v-model="message"><br>{{message}} </div><script>var app = new Vue({el: '#app',data: {message: "我寫啥，你抄啥"}}) </script> </body> </html>八、Vue組件
組件是可復(fù)用的Vue實(shí)例，說白了就是一組可以重復(fù)使用的模板，跟JSTL的自定義標(biāo)簽、Thymeleaf的th:fragment 等框架有著異曲同工之妙。通常一個(gè)應(yīng)用會以一棵嵌套的組件樹的形式來組織：
如果我們需要傳遞參數(shù)到組件，此時(shí)就可以使用props屬性
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><xu v-for="item in items" v-bind:bin="item"></xu> </div><script>//Vue.component()方法注冊一個(gè)組件Vue.component("xu",{//傳遞參數(shù)用props接收props: ['bin'],//組件模板，可以使用props中的參數(shù)template: '<li>{{bin}}</li>'})var app = new Vue({el: '#app',data: {items: ["java","Linux","前端"]}}) </script> </body> </html>九、Vue生命周期
1.Vue生命周期理解
Vue實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。
在Vue的整個(gè)生命周期中，它提供了一系列的事件，可以讓我們在事件觸發(fā)時(shí)注冊JS方法,可以讓我們用自己注冊的JS方法控制整個(gè)大局，在這些事件響應(yīng)方法中的this直接指向的是Vue的實(shí)例。
2.Vue生命周期圖解
九、Axios異步通信
由于Vue.js是一個(gè)視圖層框架且作者(尤雨溪) 嚴(yán)格準(zhǔn)守SoC (關(guān)注度分離原則)，所以Vue.js并不包含AJAX的通信功能，為了解決通信問題，作者單獨(dú)開發(fā)了一個(gè)名為vue-resource的插件，不過在進(jìn)入2.0 版本以后停止了對該插件的維護(hù)并推薦了Axios 框架。少用jQuery，因?yàn)樗僮鱀om太頻繁!
先在IDEA中創(chuàng)建一個(gè)data.json文件，模擬Json數(shù)據(jù)：
{"name": "xu","age": "20","sex": "男","url": "https://www.baidu.com","address": {"street": "步行街","city": "大連","country": "中國"},"links": [{"name": "bilibili","url": "https://www.bilibili.com"},{"name": "baidu","url": "https://www.baidu.com"},{"name": "xu video","url": "https://www.4399.com"}] }異步通信代碼展示：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><!--導(dǎo)入axios--><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> </head> <body> <div id="vue"><div>{{info.name}}</div><div>{{info.address.street}}</div><a v-bind:href="info.url">點(diǎn)我進(jìn)入百度</a> </div><script>var vm = new Vue({el: '#vue',//data:vm的屬性data: {}//data():vm方法data(){return{//請求返回參數(shù)的格式，得和data.json對應(yīng)info: {name: null,address: {street: null,city: null,country: null},url: null}}},//鉤子函數(shù)，鏈?zhǔn)骄幊?#xff0c;ES6新特性mounted(){axios.get('../data.json').then(response=>(this.info = response.data))}}) </script> </body> </html>十、Vue計(jì)算屬性
計(jì)算屬性的重點(diǎn)突出在屬性兩個(gè)字上，首先它是個(gè)屬性，其次這個(gè)屬性有計(jì)算的能力，這里的計(jì)算就是個(gè)函數(shù)。
簡單點(diǎn)說，它就是一個(gè)能夠?qū)⒂?jì)算結(jié)果緩存起來的屬性(將行為轉(zhuǎn)化成了靜態(tài)的屬性)，可以想象為緩存
說明：
- methods：定義方法，調(diào)用方法需要帶括號
- computed：定義計(jì)算屬性，因?yàn)槭菍傩运哉{(diào)用不需要帶括號
結(jié)論：調(diào)用方法時(shí)，每次都需要進(jìn)行計(jì)算，既然有計(jì)算過程則必定產(chǎn)生系統(tǒng)開銷，那如果這個(gè)結(jié)果是不經(jīng)常變化的呢?此時(shí)就可以考慮將這個(gè)結(jié)果緩存起來，采用計(jì)算屬性可以很方便的做到這一點(diǎn)，計(jì)算屬性的主要特性就是為了將不經(jīng)常變化的計(jì)算結(jié)果進(jìn)行緩存，以節(jié)約我們的系統(tǒng)開銷
十一、插槽slot
在Vue.js中我們使用 元素作為承載分發(fā)內(nèi)容的出口，作者稱其為插槽，可以應(yīng)用在組合組件的場景中;
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--導(dǎo)入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items></todo> </div><script>//slot 插槽 這個(gè)組件要定義在前面不然出不來數(shù)據(jù)Vue.component("todo", {template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\<div>'});Vue.component("todo-title",{props: ['title'],template: '<div>{{title}}</div>'});Vue.component("todo-items",{props: ['item'],template: '<li>{{item}}</li>'})var app = new Vue({el: '#app',data: {title: "學(xué)習(xí)內(nèi)容",todoItems: ['學(xué)習(xí)Java','學(xué)習(xí)前端','學(xué)習(xí)運(yùn)維']}}) </script> </body> </html>十二、自定義事件內(nèi)容分發(fā)
通過以上代碼不難發(fā)現(xiàn)，數(shù)據(jù)項(xiàng)在Vue的實(shí)例中，但刪除操作要在組件中完成，那么組件如何才能刪除Vue實(shí)例中的數(shù)據(jù)呢?此時(shí)就涉及到參數(shù)傳遞與事件分發(fā)了，Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個(gè)問題;使用this.$emit(‘自定義事件名’,參數(shù))
十三、vue-cli腳手架
1.什么是vue-cli
vue-cli 官方提供的一個(gè)腳手架,用于快速生成一個(gè) vue 的項(xiàng)目模板;
預(yù)先定義好的目錄結(jié)構(gòu)及基礎(chǔ)代碼，就好比咱們在創(chuàng)建 Maven 項(xiàng)目時(shí)可以選擇創(chuàng)建一個(gè)骨架項(xiàng)目，這個(gè)骨架項(xiàng)目就是腳手架,我們的開發(fā)更加的快速;
主要目的：
- 統(tǒng)一目錄結(jié)構(gòu)
- 本地調(diào)試
- 熱部署
- 單元測試
- 集成打包上線
2.使用vue-cli的環(huán)境前提
我們使用vue-cli之前，需要安裝node.js！
安裝網(wǎng)址：http://nodejs.cn/download/
安裝成功后：
- cmd中輸入node -v，查看是否能正確打印版本號
- cmd中輸入npm -v，查看是否能正確打印版本號
安裝完node.js之后，就自帶npm，這個(gè)npm就是一個(gè)軟件包管理工具（類似Maven）！
為了讓我們node.js運(yùn)行更快，我們需要安裝node.js的淘寶鏡像加速器（cnpm）
# -g 就是全局安裝 npm install cnpm -g # 或使用如下語句解決 npm 速度慢的問題 npm install --registry=https://registry.npm.taobao.org安裝完淘寶鏡像加速器之后，安裝vue-cli
#在命令臺輸入 cnpm install vue-cli -g #查看是否安裝成功 vue list3.創(chuàng)建一個(gè)vue-cli程序
創(chuàng)建一個(gè)文件夾，作為vue-cli程序的文件夾：D:\IdeaProjects\vue
創(chuàng)建一個(gè)基于webpack模板的vue應(yīng)用程序：
# 這里的myvue是項(xiàng)目名稱 vue init webpack myvue項(xiàng)目下載完成后，cmd中的選項(xiàng)一路選No
然后我們需要在命令行中輸入下列三個(gè)命令：
//進(jìn)入myvue項(xiàng)目中 cd myvue//安裝該項(xiàng)目的所有依賴環(huán)境 npm install//啟動了當(dāng)前項(xiàng)目 npm run dev這樣我們就創(chuàng)建完了第一個(gè)vue-cli項(xiàng)目
十四、Webpack打包器
1.什么是webpack
webpack是一個(gè)現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng)webpack處理應(yīng)用程序時(shí)，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)bundle.
Webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具，它可以將許多松散耦合的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分離，等到實(shí)際需要時(shí)再異步加載。
2.安裝webpack
webpack是一個(gè)模塊加載器兼打包工具，它能把各種資源都作為模塊來處理和使用，使用該工具的目的：把ES6規(guī)范的代碼打包編譯成ES5規(guī)范的代碼，使所有瀏覽器都能運(yùn)行！
安裝命令：
npm install webpack -g npm install webpack-cl -g測試成功安裝：
webpack -v webpack-cli -v這樣我們就安裝完成了！
3.使用webpack
創(chuàng)建一個(gè)文件夾：D:\IdeaProjects\vue\webpack-study
使用idea打開該文件夾！
在idea中創(chuàng)建一個(gè)modules目錄，里面創(chuàng)建一個(gè)hello.js文件：
//暴露一個(gè)方法 exports.sayHi = function () {document.write("<h1>徐某學(xué)ES6</h1>") }創(chuàng)建main.js 當(dāng)作是js主入口 , main.js 請求hello.js 調(diào)用sayHi()方法：
var hello = require("./hello") hello.sayHi();在主目錄創(chuàng)建webpack.config.js , webpack.config.js 這個(gè)相當(dāng)于webpack的配置文件：
module.exports = {//enrty請求main.js的文件entry: './modules/main.js',//output是輸出的位置和名字output: {filename: "./js/bundle.js"} };在idea命令臺輸入webpack命令（idea要設(shè)置管理員啟動）
完成上述操作之后會在主目錄生成一個(gè)dist文件 生成的js文件夾路徑為 /dist/js/bundle.js
接下來，在主目錄創(chuàng)建index.html 導(dǎo)入bundle.js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><!--前端的模塊化開發(fā)--> <script src="dist/js/bundle.js"></script></body> </html>十五、vue-router路由
Vue Router是Vue.js官方的路由管理器（視圖跳轉(zhuǎn)）。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌
vue-router 是一個(gè)插件包，所以我們還是需要用 npm/cnpm 來進(jìn)行安裝的。打開命令行工具，進(jìn)入你的項(xiàng)目目錄，輸入下面命令：
npm install vue-router --save-dev在components目錄下存放我們編寫的組件，定義Content.vue和Main.vue兩個(gè)組件：
<template><h1>內(nèi)容頁</h1> </template><script>export default {name: "Content"} </script><style scoped></style>========================================================================<template><h1>首頁</h1> </template><script>export default {name: "Main"} </script><style scoped></style>創(chuàng)建一個(gè)router目錄，專門存放路由，文件名為index.js：
import Vue from 'vue' //導(dǎo)入路由插件 import VueRouter from 'vue-router' //導(dǎo)入兩個(gè)定義的組件 import Content from '../components/Content' import Main from '../components/Main'//安裝路由 Vue.use(VueRouter)//配置導(dǎo)出路由 export default new VueRouter({routes: [{//路由路徑path: '/content',//跳轉(zhuǎn)的組件component: Content},{//路由路徑path: '/main',//跳轉(zhuǎn)的組件component: Main}] });在main.js中配置路由：
import Vue from 'vue' import App from './App' import router from './router' //自動掃描里面的路由配置new Vue({el: '#app',//配置路由router,components: { App },template: '<App/>' })在App.vue中使用路由：
<template><div id="app"><h1>Vue-Router</h1><router-link to="/main">首頁</router-link><router-link to="/content">內(nèi)容頁</router-link><!--展示template模板--><router-view></router-view></div> </template><script>export default {name: 'App' } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>啟動測試一下 ： npm run dev
其實(shí)，main.js配置完了就基本不需要變動了，我們只需要添加組件，在index.js中配置組件路徑，最后在App.vue中添加router-link，基本就足夠了！
三者關(guān)系：index.html 調(diào)用 main.js 調(diào)用 App.vue
十六、vue + elementUI整合小案例
在Idea項(xiàng)目目錄中創(chuàng)建一個(gè)hello-vue項(xiàng)目，在該目錄下可以使用命令行（命令行要使用管理員模式！）：
//創(chuàng)建一個(gè)基于webpack模板的vue應(yīng)用程序 vue init webpack hello-vue安裝依賴，我們需要安裝vue-router，element-ui，sass-loader和node-sass四個(gè)插件：
//進(jìn)入目錄 cd hello-vue//安裝vue-router npm install vue-router --save-dev//安裝element ui npm i element-ui -S//安裝依賴 npm install //安裝 SASS 加載器 cnpm install sass-loader node-sass --save-dev//啟動測試 npm run devnpm命令解釋：
安裝模塊到項(xiàng)目目錄下 npm install moduleName-g 的意思是將模塊安裝到全局，具體安裝到磁盤的哪個(gè)位置，要看 npm config prefix的位置 npm install -g moduleName–save的意思是將模塊安裝到項(xiàng)目目錄下，并在package文件的dependencies節(jié)點(diǎn)寫入依賴，-S為該命令的縮寫 npm install moduleName -save–save-dev的意思是將模塊安裝到項(xiàng)目目錄下，并在package文件的devDependencies節(jié)點(diǎn)寫入依賴，-D為該命令的縮寫 npm install moduleName -save-dev接下來，我們打開IDEA將我們創(chuàng)建的項(xiàng)目open一下！
創(chuàng)建一個(gè)views目錄，編寫兩個(gè)組件：Login.vue和Main.vue
<template><h1>首頁</h1> </template><script>export default {name: "Main"} </script><style scoped></style>========================================================================<template xmlns:v-on=""><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"><h3 class="login-title">歡迎登錄</h3><el-form-item label="賬號" prop="username"><el-input type="text" placeholder="請輸入賬號" v-model="form.username"/></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" placeholder="請輸入密碼" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button></el-form-item></el-form><el-dialogtitle="溫馨提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>請輸入賬號和密碼</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">確 定</el-button></span></el-dialog></div> </template><script>export default {name: "Login",data() {return {form: {username: '',password: ''},// 表單驗(yàn)證，需要在 el-form-item 元素中增加 prop 屬性rules: {username: [{required: true, message: '賬號不可為空', trigger: 'blur'}],password: [{required: true, message: '密碼不可為空', trigger: 'blur'}]},// 對話框顯示和隱藏dialogVisible: false}},methods: {onSubmit(formName) {// 為表單綁定驗(yàn)證功能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)建一個(gè)router目錄，編寫index.js文件：
import Vue from 'vue' import Router from 'vue-router'//添加路由 import Main from '../views/Main' import Login from '../views/Login'Vue.use(Router);export default new Router({routes: [{path: '/main',component: Main},{path: '/login',component: Login}] })在main.js中編寫：
import Vue from 'vue' import App from './App'import router from './router'//導(dǎo)入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'Vue.use(router); Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({el: '#app',router,render: h => h(App) //ElementUI })最后App.vue中代碼如下：
<template><div id="app"><router-link to="/login">登錄頁</router-link><router-view></router-view></div> </template><script>export default {name: 'App' } </script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;} </style>效果如下：
十七、路由嵌套
? 嵌套路由又稱子路由，在實(shí)際應(yīng)用中，通常由多層嵌套的組件組合而成。
在 views/user 目錄下創(chuàng)建一個(gè)名為 Profile.vue 的視圖組件：
<template><h1>個(gè)人信息</h1> </template><script>export default {name: "UserProfile"} </script><style scoped></style>在用戶列表組件在 views/user 目錄下創(chuàng)建一個(gè)名為 List.vue 的視圖組件：
<template><h1>用戶列表</h1> </template><script>export default {name: "UserList"} </script><style scoped></style>修改首頁視圖，我們修改 Main.vue 視圖組件，此處使用了 ElementUI 布局容器組件，代碼如下：
<template><div><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">個(gè)人信息</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-submenu index="3"><template slot="title"><i class="el-icon-caret-right"></i>系統(tǒng)管理</template><el-menu-item-group><el-menu-item index="3-1">用戶設(shè)置</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>個(gè)人信息</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></div> </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>配置嵌套路由修改 router 目錄下的 index.js 路由配置文件，使用children放入main中寫入子模塊，代碼如下:
import Vue from 'vue' import Router 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(Router);export default new Router({routes: [{path: '/main',component: Main,//嵌套路由children: [{path: '/user/profile',component: UserProfile},{path: '/user/list',component: UserList}]},{path: '/login',component: Login}] })效果展示如下：
十八、參數(shù)傳遞
接下來，還是使用上述代碼進(jìn)行測試！
方式一：取值
方式二：使用props減少耦合
效果如下：
十九、重定向
在router下面index.js的配置：
{path: '/goHome',redirect: '/main' }這里定義了兩個(gè)路徑，一個(gè)是 /main ，一個(gè)是 /goHome，其中 /goHome 重定向到了 /main 路徑，由此可以看出重定向不需要定義組件；
使用的話，只需要在Main.vue設(shè)置對應(yīng)路徑即可；
二十、路由模式與處理404
1.路由模式
路由模式有兩種：
- hash：路徑帶 # 符號，如 http://localhost/#/login
- history：路徑不帶 # 符號，如 http://localhost/login
修改路由配置，index.js代碼如下：
2.處理404
創(chuàng)建于給NotFound.vue的視圖組件：
<template><div><h1>404,你的頁面走丟了</h1></div> </template><script>export default {name: "NotFound"} </script><style scoped></style>修改路由配置，代碼如下：
import NotFound from '../views/NotFound'export default new Router({mode: 'history',routes: [{path: '*',component: NotFound}] })當(dāng)我們輸入的地址不正確，會出現(xiàn)以下效果：
二十一、路由鉤子與異步請求
1.路由鉤子函數(shù)
beforeRouteEnter：在進(jìn)入路由前執(zhí)行
beforeRouteLeave：在離開路由前執(zhí)行
在Profile.vue中寫:
<template><!--所有的元素，不能直接在根節(jié)點(diǎn)下--><div><h1>個(gè)人信息</h1>{{id}}</div> </template><script>export default {props: ['id'],name: "UserProfile",beforeRouteEnter:(to,from,next)=>{console.log("進(jìn)入路由之前")next();},beforeRouteLeave:(to,from,next)=>{console.log("進(jìn)入路由之后")next();}} </script><style scoped></style>參數(shù)說明：
- to：路由將要跳轉(zhuǎn)的路徑信息
- from：路徑跳轉(zhuǎn)前的路徑信息
- next：路由的控制參數(shù)
- next() 跳入下一個(gè)頁面
- next(’/path’) 改變路由的跳轉(zhuǎn)方向，使其跳到另一個(gè)路由
- next(false) 返回原來的頁面
- next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實(shí)例
2.在鉤子函數(shù)中使用異步通信
效果如下：
總結(jié)
以上是生活随笔為你收集整理的Vue框架详解（适合Java学习者）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机桌面水平移动的小软件,一键整理电脑
- 下一篇： Vue框架总结（一、Vue基础知识）