筆記
腳手架文件結構
├── node_modules
├── public
│ ├── favicon.ico: 頁籤圖標
│ └── index.html: 主頁面
├── src
│ ├── assets: 存放靜態資源
│ │ └── logo.png
│ │── component: 存放組件
│ │ └── HelloWorld.vue
│ │── App.vue: 彙總所有組件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 應用包配置文件
├── README.md: 應用描述文件
├── package-lock.json：包版本控制文件
關於不同版本的Vue
- vue.js與vue.runtime.xxx.js的區別：
- vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
- vue.runtime.xxx.js是運行版的Vue，只包含：核心功能；沒有模板解析器。
- 因爲vue.runtime.xxx.js沒有模板解析器，所以不能使用template這個配置項，需要使用render函數接收到的createElement函數去指定具體內容。
vue.config.js配置文件
- 使用vue inspect > output.js可以查看到Vue腳手架的默認配置。
- 使用vue.config.js可以對腳手架進行個性化定製，詳情見：https://cli.vuejs.org/zh
ref屬性
- 被用來給元素或子組件註冊引用信息（id的替代者）
- 應用在html標籤上獲取的是真實DOM元素，應用在組件標籤上是組件實例對象（vc）
- 使用方式：
- 打標識：
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> - 獲取：
this.$refs.xxx
- 打標識：
props配置項
-
功能：讓組件接收外部傳過來的數據
-
傳遞數據：
<Demo name="xxx"/> -
接收數據：
-
第一種方式（只接收）：
props:['name'] -
第二種方式（限制類型）：
props:{name:String} -
第三種方式（限制類型、限制必要性、指定默認值）：
props:{ name:{ type:String, //類型 required:true, //必要性 default:'老王' //默認值 } }
備註：props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的數據。
-
mixin(混入)
-
功能：可以把多個組件共用的配置提取成一個混入對象
-
使用方式：
第一步定義混合：
{ data(){....}, methods:{....} .... }第二步使用混入：
全局混入：
Vue.mixin(xxx)
局部混入：mixins:['xxx']
插件
-
功能：用於增強Vue
-
本質：包含install方法的一個對象，install的第一個參數是Vue，第二個以後的參數是插件使用者傳遞的數據。
-
定義插件：
對象.install = function (Vue, options) { // 1. 添加全局過濾器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加實例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx } -
使用插件：
Vue.use()
scoped樣式
- 作用：讓樣式在局部生效，防止衝突。
- 寫法：
<style scoped>
總結TodoList案例
-
組件化編碼流程：
(1).拆分靜態組件：組件要按照功能點拆分，命名不要與html元素衝突。
(2).實現動態組件：考慮好數據的存放位置，數據是一個組件在用，還是一些組件在用：
1).一個組件在用：放在組件自身即可。
2). 一些組件在用：放在他們共同的父組件上（狀態提升）。
(3).實現交互：從綁定事件開始。
-
props適用於：
(1).父組件 ==> 子組件 通信
(2).子組件 ==> 父組件 通信（要求父先給子一個函數）
-
使用v-model時要切記：v-model綁定的值不能是props傳過來的值，因爲props是不可以修改的！
-
props傳過來的若是對象類型的值，修改對象中的屬性時Vue不會報錯，但不推薦這樣做。
webStorage
-
存儲內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
-
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地存儲機制。
-
相關API：
-
xxxxxStorage.setItem('key', 'value');
該方法接受一個鍵和值作爲參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。 -
xxxxxStorage.getItem('person'); 該方法接受一個鍵名作爲參數，返回鍵名對應的值。
-
xxxxxStorage.removeItem('key'); 該方法接受一個鍵名作爲參數，並把該鍵名從存儲中刪除。
-
xxxxxStorage.clear() 該方法會清空存儲中的所有數據。
-
-
備註：
- SessionStorage存儲的內容會隨着瀏覽器窗口關閉而消失。
- LocalStorage存儲的內容，需要手動清除纔會消失。
xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那麼getItem的返回值是null。JSON.parse(null)的結果依然是null。
組件的自定義事件
-
一種組件間通信的方式，適用於：子組件 ===> 父組件
-
使用場景：A是父組件，B是子組件，B想給A傳數據，那麼就要在A中給B綁定自定義事件（事件的回調在A中）。
-
綁定自定義事件：
-
第一種方式，在父組件中：
<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/> -
第二種方式，在父組件中：
<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) } -
若想讓自定義事件只能觸發一次，可以使用
once修飾符，或$once方法。
-
-
觸發自定義事件：
this.$emit('atguigu',數據) -
解綁自定義事件
this.$off('atguigu') -
組件上也可以綁定原生DOM事件，需要使用
native修飾符。 -
注意：通過
this.$refs.xxx.$on('atguigu',回調)綁定自定義事件時，回調要麼配置在methods中，要麼用箭頭函數，否則this指向會出問題！
全局事件總線（GlobalEventBus）
-
一種組件間通信的方式，適用於任意組件間通信。
-
安裝全局事件總線：
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安裝全局事件總線，$bus就是當前應用的vm }, ...... }) -
使用事件總線：
-
接收數據：A組件想接收數據，則在A組件中給$bus綁定自定義事件，事件的回調留在A組件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) } -
提供數據：
this.$bus.$emit('xxxx',數據)
-
-
最好在beforeDestroy鉤子中，用$off去解綁當前組件所用到的事件。
消息訂閱與發佈（pubsub）
-
一種組件間通信的方式，適用於任意組件間通信。
-
使用步驟：
-
安裝pubsub：
npm i pubsub-js -
引入:
import pubsub from 'pubsub-js' -
接收數據：A組件想接收數據，則在A組件中訂閱消息，訂閱的回調留在A組件自身。
methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息 } -
提供數據：
pubsub.publish('xxx',數據) -
最好在beforeDestroy鉤子中，用
PubSub.unsubscribe(pid)去取消訂閱。
-
nextTick
- 語法：
this.$nextTick(回調函數) - 作用：在下一次 DOM 更新結束後執行其指定的回調。
- 什麼時候用：當改變數據後，要基於更新後的新DOM進行某些操作時，要在nextTick所指定的回調函數中執行。
Vue封裝的過度與動畫
-
作用：在插入、更新或移除 DOM元素時，在合適的時候給元素添加樣式類名。
-
圖示：
-
寫法：
-
準備好樣式：
- 元素進入的樣式：
- v-enter：進入的起點
- v-enter-active：進入過程中
- v-enter-to：進入的終點
- 元素離開的樣式：
- v-leave：離開的起點
- v-leave-active：離開過程中
- v-leave-to：離開的終點
- 元素進入的樣式：
-
使用
<transition>包裹要過度的元素，並配置name屬性,注意如果配置了appear屬性的話就代表一開始掛載真實dom的時候就開啓動畫的效果：<transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> -
備註：若有多個元素需要過度，則需要使用：
<transition-group>，且每個元素都要指定key值。
-
vue腳手架配置代理
方法一
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
說明：
- 優點：配置簡單，請求資源時直接發給前端（8080）即可。
- 缺點：不能配置多個代理，不能靈活的控制請求是否走代理。
- 工作方式：若按照上述配置代理，當請求了前端不存在的資源時，那麼該請求會轉發給服務器 （優先匹配前端資源）
方法二
編寫vue.config.js配置具體代理規則：
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'開頭的請求路徑
target: 'http://localhost:5000',// 代理目標的基礎路徑
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'開頭的請求路徑
target: 'http://localhost:5001',// 代理目標的基礎路徑
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin設置爲true時，服務器收到的請求頭中的host爲：localhost:5000
changeOrigin設置爲false時，服務器收到的請求頭中的host爲：localhost:8080
changeOrigin默認值爲true
*/
說明：
- 優點：可以配置多個代理，且可以靈活的控制請求是否走代理。
- 缺點：配置略微繁瑣，請求資源時必須加前綴。
插槽
-
作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用於 父組件 ===> 子組件 。
-
分類：默認插槽、具名插槽、作用域插槽
-
使用方式：
-
默認插槽：
父組件中： <Category> <div>html結構1</div> </Category> 子組件中： <template> <div> <!-- 定義插槽 --> <slot>插槽默認內容...</slot> </div> </template> -
具名插槽：
父組件中： <Category> <template slot="center"> <div>html結構1</div> </template> <template v-slot:footer> <div>html結構2</div> </template> </Category> 子組件中： <template> <div> <!-- 定義插槽 --> <slot name="center">插槽默認內容...</slot> <slot name="footer">插槽默認內容...</slot> </div> </template> -
作用域插槽：
-
理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（games數據在Category組件中，但使用數據所遍歷出來的結構由App組件決定）
-
具體編碼：
父組件中： <Category> <template scope="scopeData"> <!-- 生成的是ul列表 --> <ul> <li v-for="g in scopeData.games" :key="g">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <!-- 生成的是h4標題 --> <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> </template> </Category> 子組件中： <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', props:['title'], //數據在子組件自身 data() { return { games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'] } }, } </script>
-
-
Vuex
1.概念
在Vue中實現集中式狀態（數據）管理的一個Vue插件，對vue應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用於任意組件間通信。
2.何時使用？
多個組件需要共享數據時
3.搭建vuex環境
-
創建文件：
src/store/index.js//引入Vue核心庫 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //應用Vuex插件 Vue.use(Vuex) //準備actions對象——響應組件中用戶的動作 const actions = {} //準備mutations對象——修改state中的數據 const mutations = {} //準備state對象——保存具體的數據 const state = {} //創建並暴露store export default new Vuex.Store({ actions, mutations, state }) -
在
main.js中創建vm時傳入store配置項...... //引入store import store from './store' ...... //創建vm new Vue({ el:'#app', render: h => h(App), store })
4.基本使用
-
初始化數據、配置
actions、配置mutations，操作文件store.js//引入Vue核心庫 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //引用Vuex Vue.use(Vuex) const actions = { //響應組件中加的動作 jia(context,value){ // console.log('actions中的jia被調用了',miniStore,value) context.commit('JIA',value) }, } const mutations = { //執行加 JIA(state,value){ // console.log('mutations中的JIA被調用了',state,value) state.sum += value } } //初始化數據 const state = { sum:0 } //創建並暴露store export default new Vuex.Store({ actions, mutations, state, }) -
組件中讀取vuex中的數據：
$store.state.sum -
組件中修改vuex中的數據：
$store.dispatch('action中的方法名',數據)或$store.commit('mutations中的方法名',數據)備註：若沒有網絡請求或其他業務邏輯，組件中也可以越過actions，即不寫
dispatch，直接編寫commit
5.getters的使用
-
概念：當state中的數據需要經過加工後再使用時，可以使用getters加工。
-
在
store.js中追加getters配置...... const getters = { bigSum(state){ return state.sum * 10 } } //創建並暴露store export default new Vuex.Store({ ...... getters }) -
組件中讀取數據：
$store.getters.bigSum
6.四個map方法的使用
-
mapState方法：用於幫助我們映射
state中的數據爲計算屬性computed: { //藉助mapState生成計算屬性：sum、school、subject（對象寫法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //藉助mapState生成計算屬性：sum、school、subject（數組寫法） ...mapState(['sum','school','subject']), }, -
mapGetters方法：用於幫助我們映射
getters中的數據爲計算屬性computed: { //藉助mapGetters生成計算屬性：bigSum（對象寫法） ...mapGetters({bigSum:'bigSum'}), //藉助mapGetters生成計算屬性：bigSum（數組寫法） ...mapGetters(['bigSum']) }, -
mapMutations方法：用於幫助我們生成與
mutations對話的方法，即：包含$store.commit(xxx)的函數methods:{ //靠mapActions生成：increment、decrement（對象形式） ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成：JIA、JIAN（對象形式） ...mapMutations(['JIA','JIAN']), }
備註：mapActions與mapMutations使用時，若需要傳遞參數需要：在模板中綁定事件時傳遞好參數，否則參數是事件對象。
7.模塊化+命名空間
-
目的：讓代碼更好維護，讓多種數據分類更加明確。
-
修改
store.jsconst countAbout = { namespaced:true,//開啓命名空間 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced:true,//開啓命名空間 state:{ ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { countAbout, personAbout } }) -
開啓命名空間後，組件中讀取state數據：
//方式一：自己直接讀取 this.$store.state.personAbout.list //方式二：藉助mapState讀取： ...mapState('countAbout',['sum','school','subject']), -
開啓命名空間後，組件中讀取getters數據：
//方式一：自己直接讀取 this.$store.getters['personAbout/firstPersonName'] //方式二：藉助mapGetters讀取： ...mapGetters('countAbout',['bigSum']) -
開啓命名空間後，組件中調用dispatch
//方式一：自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二：藉助mapActions： ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) -
開啓命名空間後，組件中調用commit
//方式一：自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二：藉助mapMutations： ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
路由
- 理解： 一個路由（route）就是一組映射關係（key - value），多個路由需要路由器（router）進行管理。
- 前端路由：key是路徑，value是組件。
1.基本使用
-
安裝vue-router，命令：
npm i vue-router -
應用插件：
Vue.use(VueRouter) -
編寫router配置項:
//引入VueRouter import VueRouter from 'vue-router' //引入Luyou 組件 import About from '../components/About' import Home from '../components/Home' //創建router實例對象，去管理一組一組的路由規則 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router -
實現切換（active-class可配置高亮樣式）
<router-link active-class="active" to="/about">About</router-link> -
指定展示位置
<router-view></router-view>
2.幾個注意點
- 路由組件通常存放在
pages文件夾，一般組件通常存放在components文件夾。 - 通過切換，“隱藏”了的路由組件，默認是被銷燬掉的，需要的時候再去掛載。
- 每個組件都有自己的
$route屬性，裏面存儲着自己的路由信息。 - 整個應用只有一個router，可以通過組件的
$router屬性獲取到。
3.多級路由（多級路由）
-
配置路由規則，使用children配置項：
routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通過children配置子級路由 { path:'news', //此處一定不要寫：/news component:News }, { path:'message',//此處一定不要寫：/message component:Message } ] } ] -
跳轉（要寫完整路徑）：
<router-link to="/home/news">News</router-link>
4.路由的query參數
-
傳遞參數
<!-- 跳轉並攜帶query參數，to的字符串寫法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link> <!-- 跳轉並攜帶query參數，to的對象寫法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:666, title:'你好' } }" >跳轉</router-link> -
接收參數：
$route.query.id $route.query.title
5.命名路由
-
作用：可以簡化路由的跳轉。
-
如何使用
-
給路由命名：
{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //給路由命名 path:'welcome', component:Hello, } ] } ] } -
簡化跳轉：
<!--簡化前，需要寫完整的路徑 --> <router-link to="/demo/test/welcome">跳轉</router-link> <!--簡化後，直接通過名字跳轉 --> <router-link :to="{name:'hello'}">跳轉</router-link> <!--簡化寫法配合傳遞參數 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳轉</router-link>
-
6.路由的params參數
-
配置路由，聲明接收params參數
{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用佔位符聲明接收params參數 component:Detail } ] } ] } -
傳遞參數
<!-- 跳轉並攜帶params參數，to的字符串寫法 --> <router-link :to="/home/message/detail/666/你好">跳轉</router-link> <!-- 跳轉並攜帶params參數，to的對象寫法 --> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳轉</router-link>特別注意：路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！
-
接收參數：
$route.params.id $route.params.title
7.路由的props配置
作用：讓路由組件更方便的收到參數
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一種寫法：props值爲對象，該對象中所有的key-value的組合最終都會通過props傳給Detail組件
// props:{a:900}
//第二種寫法：props值爲布爾值，布爾值爲true，則把路由收到的所有params參數通過props傳給Detail組件
// props:true
//第三種寫法：props值爲函數，該函數返回的對象中每一組key-value都會通過props傳給Detail組件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
8.<router-link>的replace屬性
- 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫入方式：分別爲
push和replace，push是追加歷史記錄，replace是替換當前記錄。路由跳轉時候默認爲push - 如何開啓
replace模式：<router-link replace .......>News</router-link>
9.編程式路由導航
-
作用：不借助
<router-link>實現路由跳轉，讓路由跳轉更加靈活 -
具體編碼：
//$router的兩個API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward() //前進 this.$router.back() //後退 this.$router.go() //可前進也可後退 參數是number類型(正數爲前進的步數,負數爲後退的部署)
10.緩存路由組件
-
作用：讓不展示的路由組件保持掛載，不被銷燬。
-
具體編碼：
<keep-alive include="News"> <router-view></router-view> </keep-alive>
11.兩個新的生命週期鉤子
- 作用：路由組件所獨有的兩個鉤子，用於捕獲路由組件的激活狀態。
- 具體名字：
activated路由組件被激活時觸發。deactivated路由組件失活時觸發。
12.路由守衛
-
作用：對路由進行權限控制
-
分類：全局守衛、獨享守衛、組件內守衛
-
全局守衛:
//全局前置守衛：初始化時執行、每次路由切換前執行 router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制 if(localStorage.getItem('school') === 'atguigu'){ //權限控制的具體規則 next() //放行 }else{ alert('暫無權限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) //全局後置守衛：初始化時執行、每次路由切換後執行 router.afterEach((to,from)=>{ console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改網頁的title }else{ document.title = 'vue_test' } }) -
獨享守衛:
beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('暫無權限查看') // next({name:'guanyu'}) } }else{ next() } } -
組件內守衛：
//進入守衛：通過路由規則，進入該組件時被調用 beforeRouteEnter (to, from, next) { }, //離開守衛：通過路由規則，離開該組件時被調用 beforeRouteLeave (to, from, next) { }
13.路由器的兩種工作模式
- 對於一個url來說，什麼是hash值？—— #及其後面的內容就是hash值。
- hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務器。
- hash模式：
- 地址中永遠帶着#號，不美觀 。
- 若以後將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記爲不合法。
- 兼容性較好。
- history模式：
- 地址乾淨，美觀 。
- 兼容性和hash模式相比略差。
- 應用部署上線時需要後端人員支持，解決刷新頁面服務端404的問題。