Vue學習筆記與常用操作
阿新 • • 發佈：2022-05-17
腳手架檔案結構
在原始碼目錄中建立如下結構：
- App.vue：是所有元件的父元件
- main.js: 是整個專案的入口
- assets：用於存放靜態資原始檔
- components：用於存放Vue功能元件
- views：用於存放Vue檢視元件
- router：用於存放vue-router配置
關於不同版本的Vue:
1.vue.js與vue.runtime.xxx.js的區別: (1).vue.js是完整版的Vue，包含:核心功能+模板解析器。 (2).vue.runtime.xxx.js是執行版的Vue，只包含:核心功能;沒有模板解析器。 2.因為vue.runtime.xxxjs沒有模板解析器，所以不能使用template配置項，需要使用 render函式接收到的createElement函式去指定具體內容。
ref屬性
1.被用來給元素或子元件註冊引用資訊(id的替代者)
2.應用在htm1標籤上獲取的是真實DOM元素，應用在元件標籤上是元件例項物件(vc)
3.使用方式:
打標識:<h1 ref="xxx">.....</h1> 或<School ref="xxx"></School>
獲取:this.$refs.xxx
配置項props
功能:讓元件接收外部傳過來的資料
(1)傳遞資料: <Demo name="xxx"/> (2).接收資料: 第一種方式(只接收): props:['name'] 第二種方式(限制類型): props:{ name:Number } 第三種方式(限制類型、限制必要性、指定預設值): props:{ name:{ type:String，//型別 required:true，//必要性 default:老王//預設值 } } 備註:props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，
外掛
功能:用於增強Vue 本質:包含instal1方法的一 個物件，instal1的第一個參 數是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樣式
1.作用：讓樣式在區域性生效，防止衝突
2.寫法：<style scoped>
總結TodoList案例
參考程式碼
1.元件化編碼流程:
(1).拆分靜態元件:元件要按照功能點拆分，命名不要與html元素衝突。
(2).實現動態元件:考慮好資料的存放位置,資料是一個元件在用, 還是一 些元件在用:
1).一個元件在用:放在元件自身即可。
2).一些元件在用: 放在他們共同的父元件.上(狀態提升)。
(3).實現互動:從繫結事件開始。
2. props適用於:
(1).父元件==>子元件通訊
(2).子元件==>父元件通訊(要求父先給子-一個函式)
3.使用v-modelI時要切記: v-model繫結的值不能是props傳過來的值，因為props是不可以修改的!
4. props傳過來的若是物件型別的值，修改物件中的屬性時Vue不會報錯，但不推薦這樣做。
webStorage（本地儲存和會話技術）
1.儲存內容大小一般支援5MB左右(不同瀏覽器可能還不一樣)
2.瀏覽器端通過WindowsessionStorage和WindowlocalStorage屬性來實現本地儲存機制。
3.相關API:
1.xxxxxStorage.setItem('key','value');
該方法接受一個鍵和值作為引數，會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應的值。
2.xxxxxStorage.getItem('person');
該方法接受一個鍵名作為引數，返回鍵名對應的值。
3.xxxxxStorage.removeItem('key');
該方法接受一個鍵名作為引數，並把該鍵名從儲存中刪除。
4.*xxxxStorage.clear()
該方法會清空儲存中的所有資料。
4.備註:
1.SessionStorage儲存的內容會隨著瀏覽器視窗關閉而消失。
2.LocalStoraae儲存的內容，需要手動清除才會消失。
3.xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那麼getltem的返回值是null
4.JSON.parse(null)的結果依然是null
元件的自定義事件
##元件的自定義事件
1.一種元件間通訊的方式，適用於:子元件==>父元件
2.使用場景:A是父元件，B是子元件，B想給A傳資料，那麼就要在A中給B繫結自定義事件(事件的回撥在A中)。
3.繫結自定義事件:
1.第一種方式，在父元件中:<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>
2.第二種方式，在父元件中:
<Demo ref="demo"/>
.....
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
3.若想讓自定義事件只能觸發一次，可以使用once修飾符，或$once方法。
4.觸發自定義事件:this.$emit('atguigu,資料)
5.解綁自定義事件this.$off('atguigu')
6.元件上也可以繫結原生DOM事件，需要使用native修飾符。
7.注意:通過this.$refs.xxx.$on(atguigu，回撥)繫結自定義事件時，回撥要麼配置在methods中，要麼用箭頭函式，否則this指向會出問題!
全域性事件匯流排(GlobalEventBus)
##全域性事件匯流排(GlobalEventBus)
1.一種元件間通訊的方式，適用於任意元件間通訊。
2.安裝全域性事件匯流排:
new Vue({
beforeCreate(){
Vue.prototype.$bus=this//安裝全域性事件匯流排，$bus就是當前應用的vm}，
})
3.使用事件匯流排:
1.接收資料:A元件想接收資料，則在A元件中給$bus繫結自定義事件，事件的回撥留在A元件自身。
methods(){
demo(data){......}}
mounted(){
this.$bus.$on('xxxx',this.demo)
2.提供資料:this.$bus.$emit(xxxx,資料)
4.最好在beforeDestroy鉤子中，用$off去解綁當前元件所用到的事件
訊息訂閱與釋出(pubsub)
npm i pubsub-js
##訊息訂閱與釋出(pubsub)
1.一種元件間通訊的方式，適用於任意元件間通訊。
2.使用步驟:
1.安裝pubsub:npm i pubsub-js
2.引入: import pubsub from 'pubsub-js'
3.接收資料:A元件想接收資料，則在A元件中訂閱訊息，訂閱的回撥留在A元件自身。
methods(){
demo(data){......}}
....
mounted(){
this.pid=pubsub.subscribe(xxxthisdemo)//訂閱訊息 I
4.提供資料:pubsub.publish('xxx,資料)
5.最好在beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱
現在我學習過的，元件間的通訊
父傳>子 1. props ，
子>傳父 ：1.自定義元件，2.props ，前提是父元件給子元件一個回撥函式
兄弟元件互傳 1.全域性事件匯流排 2.用第三方庫的，訊息釋出與訂閱
過渡動畫(外掛：Animate.css在vue中的使用)
vue中Animate.css的安裝和使用
安裝：
npm install animate.css --save
//或者
yarn add animate.css
引入
在main.js全域性引入
import animate from 'animate.css' // npm install animate.css --save安裝，在引入
Vue.use(animate)
選擇你要的樣式
開啟官網Animate.css
具體使用
1>基本的使用就是在過度元素上使用對應的name屬性
<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
2>使用不同的載入載出動畫
第一種：使用custom-classes-transition,需要在不同的載入,載出動畫上加-enter和-leave字尾
<transition
name="custom-classes-transition"
enter-active-class="bounceLeft-enter"
leave-active-class="bounceRight-leave"
>
<p v-if="show">hello</p>
</transition>
第二種：使用in/out類名在動畫名後面加上In或者Out
<transition
name="bounce"
enter-active-class="bounceInLeft"
leave-active-class="bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
案例：
<template>
<transition
appear
name="animate__animated animate__bounce"
enter-active-class="animate__backInLeft"
leave-active-class="animate__backOutDown"
>
<div >
<button @click="isShow = !isShow">顯示/隱藏</button>
<h1 v-show="isShow" >你好啊!</h1>
</div>
</transition>
</template>
過渡動畫總結
寫法:
1.準備好樣式:
·元素進入的樣式:
1v-enter:進入的起點
2.v-enter-active:進入過程中
3.v-enter-to:進入的終點
.元素離開的樣式:
1v-leave:離開的起點
2v-leave-active離開過程中
3.v-leave-to:離開的終點
2.使用<transition>包裹要過度的元素，並配置name屬性:
<transition name="hello">
<h1v-show="isShow">你好啊!</h1>
</transition>
3.備註:若有多個元素需要過度，則需要使用:<transition-group>，且每個元素都要指定key值。
vue腳手架配置代理
方法一:
在vueconfigjs中新增如下配置:
devServer:{
proxy:"http://localhost:5000
說明:
1.優點:配置簡單，請求資源時直接發給前端(8080)即可。
2.缺點:不能配置多個代理，不能靈活的控制請求是否走代理。
3.工作方式:若按照上述配置代理，當請求了前端不存在的資源時，那麼該請求會轉發給伺服器(優先匹配前端資源)
方法二
編寫vueconfigjs配置具體代理規則:
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*/
說明:
1.優點:可以配置多個代理，且可以靈活的控制請求是否走代理。
2.缺點:配置略微繁瑣，請求資源時必須加字首。
slot 插槽
\1. 預設插槽
\2. 命名插槽
\3. 作用域插槽
vuex 是什麼
- 概念：專門在 Vue 中實現集中式狀態（資料）管理的一個 Vue 外掛，對 vue 應
用中多個元件的共享狀態進行集中式的管理（讀/寫），也是一種元件間通訊的方
式，且適用於任意元件間通訊。
安裝Vuex
npm i vuex //vuex4
npm i vuex@3 //vuex3
=====================================
vuex2中、要用vuex3版本
Vuex3中、要用vuex4版本
2022年2月後，預設自動安裝vuex4版本
配置：
//該檔案用於建立Vuex中最為核心的store
//引入vue
import Vue from 'vue'
//引入Vuex
import vuex from 'vuex'
Vue.use(vuex);
//準備action-用於響應元件中的動作
const action={}
//準備mutations-用於操作資料（state）
const mutations={}
//準備state-用於儲存資料
const state={}
//建立並暴露store
export default new vuex.Store({
action,
mutations,
state
})
引入：
............
//引入store
import store from './store'
.............
//建立vue的例項物件----（vm）
new Vue({
el:'#app',
render:h=>h(App),
store
})
使用：
//該檔案用於建立Vuex中最為核心的store
//引入vue
import Vue from 'vue'
//引入Vuex
import vuex from 'vuex'
Vue.use(vuex);
//準備action-用於響應元件中的動作
const actions= {
//響應元件中加的動作
jia(context,value){
console.log('action被呼叫了')
context.commit('JIA',value)
},
}
//準備mutations-用於操作資料（state）
const mutations={
//執行加
JIA(state,value){
console.log('mutations中的JIA被呼叫了')
state.sum += value
},
}
//準備state-用於儲存資料
const state={
sum:0, //當前和
}
//建立並暴露store
export default new vuex.Store({
actions,
mutations,
state
})
元件中讀取vuex中的資料：$store.state.sum
元件中修改vuex中的資料：$store.dispatch（'action中的方法名'，資料）或 $store.commit('mutations中的方法名，資料')
路由
vue-router 的理解
在2022年2月，預設版本都是，vue-router4，只能在vue3中使用
npm i vue-router //預設
npm i vue-router@3 //降級
vue 的一個外掛庫，專門用來實現 SPA 應用
對 SPA 應用的理解
-
單頁 Web 應用（single page web application，SPA）。
-
整個應用只有一個完整的頁面。
-
點選頁面中的導航連結不會重新整理頁面，只會做頁面的區域性更新。
-
資料需要通過 ajax 請求獲取。
路由的理解
1. 什麼是路由?
1. 一個路由就是一組對映關係（key - value）
2. key 為路徑, value 可能是 function 或 component
2. 路由分類
- 後端路由：
1) 理解：value 是 function, 用於處理客戶端提交的請求。
2) 工作過程：伺服器接收到一個請求時, 根據請求路徑找到匹配的函式
來處理請求, 返回響應資料。
- 前端路由：
1) 理解：value 是 component，用於展示頁面內容。
2) 工作過程：當瀏覽器的路徑改變時, 對應的元件就會顯示。
總結: 編寫使用路由的 2 步
- 定義路由元件 ,暴露並註冊路由
//該檔案，專門用於建立整個應用的路由器
import VueRouter from "vue-router";
//引入元件
import MyAbout from "@/components/MyAbout"
import MyHome from "@/components/MyHome";
//建立並暴露一個路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:MyAbout
},
{
path:'/home',
component:MyHome
},
]
})
- 使用路由
<!--原始html中我們使用的是a標籤實現頁面的跳轉-->
<!--
<a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a>
-->
=======================================================================
<!--Vue藉助router-link標籤實現頁面的跳轉-->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
....
<!--指定元件的呈現位置-->
<router-view></router-view>
....
active-class：實現切換（可以配置高亮樣式）
router-view：指定展示位置
總結：注意事項
- 一般元件通常放在components檔案中，路由元件放在pages檔案中
- 通過切換，隱藏的路由元件和一般元件不一樣，使用完後，就被vue銷燬，如果再使用，就重新掛載
- 每個元件都有自己的$route屬性，裡面儲存著自己的路由資訊
- 整個應用只有一個router（路由器），可以通過元件的$router獲取到。
多級路由（巢狀路由）
1.路由配置規則，使用chlidren配置項
routes:[
{
path:'/about',
component:MyAbout
},
{
path:'/home',
component:MyHome,
children:[ //通過chliaren配置子路由
{
path:'homeMessage', //此處一定不要帶 '/'
component:HomeMessage,
},
{
path:'homeNews', //此處一定不要帶 '/'
component:HomeNews,
}
],
},
]
2.跳轉路徑（要寫完整路徑）：
<router-link to="/home/homeMessage">Message</router-link>
路由的query引數
1.傳遞引數
<!--路由跳轉，攜帶query引數,to的字串寫法-->
<router-link :to="`/home/homeMessage/homeMessageDetail?id=${m.id}&tit=${m.tit}`">{{m.tit}}</router-link>
<!--路由跳轉，攜帶query引數,to的物件寫法-->
<router-link
:to="{
path:'/home/homeMessage/homeMessageDetail',
query:{id:m.id,tit:m.tit
}
}">{{m.tit}}</router-link>
2.接收引數
$route.query.id
$route.query.tit
name屬性簡化路由
我們可以通過在routes中，寫name屬性，去簡化路由
routes:[
{
name：'xxxx', //命名
path:'/about',
component:MyAbout
},
{
name：'xxxx',
path:'/home',
component:MyHome,
children:[ //通過chliaren配置子路由
{
name：'xxxx',
path:'homeMessage', //此處一定不要帶 '/'
component:HomeMessage,
},
{
name：'xxxx',
path:'homeNews', //此處一定不要帶 '/'
component:HomeNews,
}
],
},
]
2.簡化跳轉
<!--原本的寫法-->
<router-link :to="`/home/homeMessage/homeMessageDetail?id=${m.id}&tit=${m.tit}`">{{m.tit}}</router-link>
<!--路由跳轉，攜帶query引數,to的物件寫法-->
<router-link
:to="{
name:'xxxx', <!--這裡寫命名-->
query:{id:m.id,tit:m.tit
}
}">{{m.tit}}</router-link>
路由的params引數
1.params
routes:[
{
path:'/about',
component:MyAbout
},
{
path:'/home',
component:MyHome,
children:[
{
path:'homeMessage',
component:HomeMessage,
children:[
{
name:'tang',
path:'homeMessageDetail/:id/:tit', //佔位符宣告接收params引數
component:HomeMessageDetail,
},
]
},
2.傳遞引數
<!--路由跳轉，攜帶query引數,to的物件寫法-->
<router-link
:to="{
name:'tang',
params:{id:m.id,tit:m.tit}
}">{{m.tit}}</router-link>
特別注意：路由器攜帶params引數時，若使用to的物件寫法，則不能使用path配置項，必須使用name配置！
3.接收引數
$route.params.id
$route.params.tit
程式設計式路由導航
1.作用：不依賴於
2.具體編碼
//$router的2個API
this.$router.push({
name:'tang',
params:{id:m.id,tit:m.tit}
})
},
this.$router.replace({
name:'tang',
params:{id:m.id,tit:m.tit}
})
}
Vue UI:元件庫
7.1移動端常用UI元件庫
- Vant https://youzan.github.io/vant
- Cube Ul https://didi.github.io/cube-ui<
- Mint Ul http://mint-ui.github.io/#!/zh-cn
7.2PC端常用Ul元件庫
- Element Ul https://element.eleme.cn
- IView Ul https://www.iviewui.com
來源：3309064415