視頻資源來(lái)自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文章僅為個(gè)人觀看視頻后的學(xué)習(xí)心得筆記埃元，用于個(gè)人查看和記錄保存勾给。文中定有疏漏錯(cuò)誤之處饰及，懇請(qǐng)指正右蕊。
==箭頭函數(shù)==：一種定義函數(shù)的方式
//1.定義函數(shù)的方式：function
const aaa = function () {
}
//2.對(duì)象字面量中定義函數(shù)
const obj = {
bbb: function () {
},
bbb() {
}
}
//3.ES6中的箭頭函數(shù)
//const ccc = (參數(shù)列表)=> {
//}
const ccc = () => {
}
-
參數(shù)問題
//放入兩個(gè)參數(shù) const sum = (num1,num2) => { return num1+num2 } //放入一個(gè)參數(shù),小括號(hào)省略 const power = num => { return num * num }
//代碼塊中有多行代碼 const test = () => { console.log('Hello') console.log('World') } //代碼塊中只有一行代碼，有沒有返回值都行 const nul = (num1,num2) => { return num1 +num2 } const nul = (num1,num2) => num1 +num2
箭頭函數(shù)的this
箭頭函數(shù)的this是如何查找的脯丝？
向外層作用域中一層層查找this商膊，直到有this的定義
Vuex認(rèn)識(shí)路由
前端渲染，后端渲染
后端路由階段
1.后端渲染
jsp：java server page
2.后端路由
后端處理URL和頁(yè)面直接的映射關(guān)系
前后端分離階段
后端只負(fù)責(zé)提供數(shù)據(jù)巾钉，不負(fù)責(zé)任何階段的內(nèi)容
前端渲染：瀏覽器中顯示的網(wǎng)頁(yè)中的大部分內(nèi)容翘狱，都是由前端寫的js代碼在瀏覽器中執(zhí)行，最終渲染出來(lái)的網(wǎng)頁(yè)
移動(dòng)端和網(wǎng)頁(yè)端的后端不需要進(jìn)行任何處理砰苍，使用同一套api
SPA頁(yè)面
<font color=#909534>SPA：?jiǎn)雾?yè)面富應(yīng)用</font>
整個(gè)網(wǎng)頁(yè)只有一個(gè)html頁(yè)面
每次交互都不用請(qǐng)求新的url潦匈。改變url阱高，頁(yè)面不進(jìn)行整體的刷新
SPA最主要的特點(diǎn)就是在前后端分離的基礎(chǔ)上加了一層前端路由
前端路由的規(guī)則
href ->hyper reference
控制臺(tái)location.hash = 'bdd'，可以改變url而不刷新茬缩。
history.pushState(data,title,?url)
history.pushState({},'','home'),可以改變url而不刷新赤惊。
↑不斷push 入棧。history.back()=history.go(-1)出棧返回
go里面的數(shù)字表示指針移動(dòng)多少個(gè)值
history.forward()=history.go(1)
history.replaceState({},'','home')凰锡，替換未舟，不能返回
vue-router基礎(chǔ)
下載：npm install vue-router --save
import router from './router'
如果是個(gè)目錄（文件夾）會(huì)自動(dòng)找該文件夾里的index文件
1.創(chuàng)建路由組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
//1.通過Vue.use(插件)，安裝插件
Vue.use(VueRouter)
//2.創(chuàng)建vueRouter對(duì)象
const routes =[
{
//協(xié)議頭：//host/
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
//沒有路徑時(shí),重定向到home（默認(rèn)打開首頁(yè)）
{
path: '',
redirect: '/home'
}
]
const router = new VueRouter({
//配置路由器和組件直接的映射關(guān)系
routes,
//默認(rèn)情況使用hash改變url掂为，也可改成history
//mode: 'history'
// linkActiveClass: 'active'
})
//3.將router對(duì)象傳入到Vue實(shí)例
export default router
配置組件和路徑的映射關(guān)系
import Home from '../components/Home'
import About from '../components/About'
const routes =[
{
//協(xié)議頭：//host/
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
//沒有路徑時(shí),重定向到home（默認(rèn)打開首頁(yè)）
{
path: '',
redirect: '/home'
}
]
3.使用路由
<router-link to="/home">首頁(yè)</router-link>
<router-link to="/about">關(guān)于</router-link>
<router-view></router-view>
<router-link to="/about">關(guān)于</router-link>——入口的顯示
to：指定跳轉(zhuǎn)的路徑
tag：默認(rèn)渲染成一個(gè)<a>標(biāo)簽裕膀，="button"時(shí)渲染成buttton
replace：默認(rèn)是可以返回的，加上這個(gè)標(biāo)簽（后面不用跟等于）勇哗，以后就不能返回了
active-class：選擇誰(shuí)昼扛，誰(shuí)的樣式就改變?yōu)橹纁lass
也可以在router里統(tǒng)一修改：linkActiveClass: 'active'
<router-view>——組件的顯示,占位
使用button代替link，用代碼實(shí)現(xiàn)跳轉(zhuǎn)
<button @click="homeClick">首頁(yè)</button>
<button @click="aboutClick">關(guān)于</button>
<router-view></router-view>
export default {
name: 'App',
data(){
return{
$router: ''
}
},
methods: {
homeClick(){
//通過代碼的方式修改路由vue-router
//this.$router.push('/home')
this.$router.replace('/home')
console.log('homeClick')
},
aboutClick(){
//通過代碼的方式修改路由vue-router
this.$router.push('/about')
console.log('aboutClick')
}
}
}
route：(不是router)當(dāng)前誰(shuí)處于活躍就是誰(shuí)
動(dòng)態(tài)路由：
組件User：(兩種寫法)
<h2>{{$route.params.userId}}</h2>
<h2>{{userId}}</h2>
computed: {
userId(){
return this.$route.params.userId
}
}
父組件App
<router-link v-bind:to='"/user/"+userId' active-class="active">用戶</router-link>
data(){
return{
userId:'zhangsan'
}
路由文件index
{
path: '/user/:userId',
component: User
}
路由懶加載
一個(gè)路由打包一個(gè)js文件欲诺，用到哪個(gè)加載哪個(gè)
方法一：結(jié)合Vue的異步組件和Webpack的代碼分析
方法二：AMD寫法
==方法三==：在ES6中, 我們可以有更加簡(jiǎn)單的寫法來(lái)組織Vue異步組件和Webpack的代碼分割.
const Home = () =>import('../components/Home')
const About = () =>import('../components/About')
const User = () =>import('../components/User')
路由嵌套
子路由：用children
path: '/home',
component: Home,
children: [
{
path: '',
//不加斜杠就默認(rèn)從上一個(gè)路徑后面接下去
redirect:'news'
},
{
path: 'news',
component:HomeNews
},
{
path: 'message',
component:HomeMessage
}]
傳遞參數(shù)
<font color=#909534>Profile -> 檔案</font>
加了冒號(hào)：即v-bind抄谐，就把to=""里面的東西當(dāng)成語(yǔ)法解析，否則還是字符串扰法。
to="字符串"等價(jià)于:to="'字符串'"
URL: 協(xié)議://主機(jī):端口/路徑?查詢
scheme://localhost(:port)/path?query#fragment
傳遞參數(shù)的方式
params的類型:
配置路由格式: /router/:id
傳遞的方式: 在path后面跟上對(duì)應(yīng)的值
傳遞后形成的路徑: /router/123, /router/abc
query的類型:
配置路由格式: /router, 也就是普通配置
傳遞的方式: 對(duì)象中使用query的key作為傳遞方式
傳遞后形成的路徑: /router?id=123, /router?id=abc
<router-link :to="{path:'/profile',query:{name:'YY',age:18,height:1.88}}" >檔案</router-link>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
所有組件都繼承著Vue的原型蛹含。父類中的方法，子類繼承了
導(dǎo)航守衛(wèi)
跳轉(zhuǎn)函數(shù)實(shí)現(xiàn)在指定組件頁(yè)顯示指定title
routes配置都加上
<font color=#909534>meta——元數(shù)據(jù)（塞颁；描述數(shù)據(jù)的數(shù)據(jù)）</font>
meta:{
title:'檔案'
},
//前置守衛(wèi)
router.beforeEach((to,from,next) =>{
//從from跳轉(zhuǎn)到to
document.title =to.matched[0].meta.title
//下一步浦箱，默認(rèn)原本就有，重寫的話也得加上
next()
})
matched[0]——如果一個(gè)父組件有多個(gè)子組件祠锣，title的元素不會(huì)在父組件里憎茂，會(huì)在子組件里，所以找第一個(gè)子組件（一般）的title元素
//后置守衛(wèi)锤岸，不需要主動(dòng)調(diào)用next函數(shù)
router.afterEach((to,from) =>{
console.log('-----')
})
先調(diào)用前置守衛(wèi)。后調(diào)用后置守衛(wèi)
全局守衛(wèi)
-
路由獨(dú)享守衛(wèi)
beforeEnter: (to,from,next) =>{} 組件內(nèi)的守衛(wèi)
keep-alive遇見vue-router
標(biāo)簽在切換時(shí)板乙，被反復(fù)創(chuàng)建和銷毀（用[生命周期函數(shù)](# 生命周期函數(shù))來(lái)驗(yàn)證）是偷。可以用keep-alive使其保持活性
<keep-alive exclude="Profile,User">
<router-view></router-view>
</keep-alive>
keep-alive的狀態(tài)下才能使用 activated/deactived和beforeRouteLeave這兩個(gè)函數(shù)
首頁(yè)中使用path屬性記錄離開時(shí)的路徑募逞，在beforeRouteLeave中記錄
//這兩個(gè)函數(shù)蛋铆，只有該組件被保持了狀態(tài)，使用了keep-alive時(shí)放接，才是有效的
activated() {
this.$router.push(this.path);
},
beforeRouteLeave(to,form,next){
console.log(this.$route.path);
this.path = this.$route.path;
next()
}
keep-alive屬性：
- include - 字符串或正則表達(dá)刺啦，只有匹配的組件會(huì)被緩存
- exclude - 字符串或正則表達(dá)式（不要隨便加空格），任何匹配的組件都不會(huì)被緩存
TabBar練習(xí)
在組件里的<style>里引用樣式
<style>
@import "./assets/css/base.css";
</style>
如果在js里就不用加@了纠脾。因?yàn)樵趕tyle里玛瘸，就要加@蜕青。但是子組件。糊渊。右核。。
樣式：
.tab-bar{
display: flex;
}
.tab-bar-item{
flex: 1;
text-align: center;
}
class="tab-bar"放在大div里渺绒，class="tab-bar-item"放在選項(xiàng)div贺喝。
flex布局（display）
position: fixed;布局位置，left和right都等于0是為了讓tab-bar完全蓋住頁(yè)面
box-shadow：水平方向x 垂直方向y 模糊度 陰影的距離 顏色
<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210711144532777.png" alt="image-20210711144532777" style="zoom: 50%;" />
其中顏色：rgba(紅,綠,藍(lán),透明度)宗兼。透明度用小數(shù)躏鱼，0不用鞋，直接寫.8
flex: 1表示項(xiàng)目等分
text-align: center;在自己的領(lǐng)域居中
一般來(lái)說(shuō)殷绍，tab-bar高度為49px染苛。
webpack.base配置
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'views': resolve('src/views'),
}
使用時(shí)
src="~assets/img/tabbar/home.svg"
import TabBar from '@/components/tabbar/TabBar'
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語(yǔ)法
組件化開發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項(xiàng)目實(shí)戰(zhàn)
