VUE框架知識點整理
一、父組件與子組件通信
1、組件中data屬性
組件對象也有一個data屬性，只是這個data屬性必須是一個函數，而且這個函數返回一個對象，對象內部保存着數據
原因：在於vue讓每個組件對象都返回一個新的對象，因為如果是同一個對象，組件在多次使用會相互影響，寫在函數中為局部變量，調用data中的值時，都會新創一個內存空間，調用者指向這個空間的值這樣組件間就不會相互影響
2、父向子傳遞數據
通過props向子組件傳遞數據
<!-- 父組件 -->
<cpn :cInfo='info'></cpn>
export default{
data:{
info: 10
}
}<!-- 子組件 -->
<div>{{cInfo}}</div>
export default{
props:{
cInfo: {
type: Number,
// type 為Object或數組時為函數 default(){ return [] }
default: 0
}
}
}3、子向父組件通信
通過事件向父組件發送消息，需要自定義事件來完成
在子組件中通過$emit()來觸發事件
在父組件中 通過v-on來監聽子組件事件
<!-- 子組件 -->
export default{
methods: {
click() {
this.$emit('itemClick'[,item])
}
}
}<!-- 父組件 -->
<cpn @itemClick="cpnClick"></cpn>
export default{
methods: {
cpnClick([item]) {
...
}
}
}4、父子組件的訪問方式
父組件訪問子組件：使用$refs
<!-- 子組件 -->
<div>{{currentIndex}}</div>
export default {
data() {
return {
currentIndex: 0
}
}
}<!-- 父組件 -->
<cpn ref="cpn"></cpn>
export default{
//將父組件的 index 值傳遞給子組件的 currentInex
click(index) {
this.$refs.cpn.currentIndex = index
},
}二、路由
1、URL的hash
錨點，本質上是改變window.location的href屬性，我們可以直接賦值location.href來改變hash,但頁面不刷新HTML5的 history模式
history.pushState(data, title, targetURL) -----棧結構
history.replaceState(data, title, targetURL) ------沒有回退
傳給目標路由的信息,可為空
目前所有瀏覽器都不支持,填空字符串即可
目標url，不會檢查url是否存在，且不能跨域。如不傳該項,即給當前url添加data
history.back()==history.go(-1) ------回退一步
history.forward()==history.go(1) -----進一步
2、VUE-router
2.1 vue中默認的是URL的hash，在router的實例中配置mode：‘history’
- 標籤：跳轉
<router-link to="跳轉屬性" tag="元素">，渲染<router-view> - 在函數中跳轉：this.$router.push(’/home’)
2.2 傳遞參數 params和query
- params: 動態路由：$router.params.id == path: ‘/user/:id’ 可獲取路徑中的id值，傳遞後的路徑 ‘/user/123’
函數中使用：this.$router.push(’/user’+this.userId) - query:配置路由時普通配置 ‘/user’, 傳遞方式：query對象中的key，value作為傳遞，路徑：/user?id=123
函數中使用：this.$router.push( {path:’/user’,query: {key:value} })
2.3 $router和$route的區別
- $router 為VueRouter實例，跳轉路由 $router.push(‘home’)
- $route 為當前router對象，可以獲取name path query params （理解為路徑）
2.4 導航守衞
vue-router提供的導航守衞主要用來監聽路由的進入和離開的
vue-router 提供了beforEach 和 afterEach 兩個鈎子函數，它們會在路由的即將進入 和 離開之前觸發
to:即將進入的目標的路由對象
from：當前導航即將離開的路由對象
next: 調用該方法後，才能進入下一個鈎子
router.beforEach((to ,from, next) => {
})
router.afterEach((to, from) => {
})2.5 keep-alive
vue中內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染
- include – 字符串或正則表達式，只有匹配的組件會被緩存
- exclude – 字符串或正則表達式，任何匹配的組件都不會被緩存(name屬性)
router-view也是一個組件，如果直接被包在keep-alive 裏面，所有路徑匹配的視圖組件都會被緩存
<keep-alive>
<router-view/>
</keep-alive>activated()和deactivated() 是keep-alive的兩個函數
三、VUEX
vuex是專門為vue.js應用程序開發的狀態管理模式，它採用了集中式存儲管理 應用的所有組件的狀態，並以相應的規則狀態以一種可預測的方式發生變化
狀態管理： 多個組件共享的變量全部存儲在一個對象裏面，vuex就是為了提供這樣一個在多個組件間共享狀態的插件
概念圖
vuex核心概念
- state : 單一狀態樹，能夠讓我們直接的方式找到某個狀態的階段，之後的維護和調試，方便管理和維護
- mutation：狀態更新，vuex的state狀態更新的唯一方式，提交mutation
參數被稱為是mutation的載荷(Payload)
第一個參數固定 是state， 第二個參數代表commit的全部參數
mutations:{
事件名: (state, index) => {
state.index = index
}
},methods:{
shijian() {
this.$store.commit('事件名',index)
}
}- action : 異步提交
actions:{
事件名: (context) => {
context.commit('事件')
}
},methods:{
shijian() {
this.$store.dispatch('事件名')
}
}- getters: 與computed類似
getters:{
id: state => {
return ...
}
}- module: 可以將store分割成模塊，每個模塊有自己的state,mutations,actions,getters
四、axios網絡請求
axios的功能特點
- 在瀏覽器中發送XMLHttpRequests請求
- 在node.js中發送http請求
- 支持Promise異步編程
- 攔截請求和響應
- 轉換請求和響應數據
axios 請求方式 – axios(config)
axios({url: '',
params: {
id: 1,
page:10
}
}).then(res => {
...
})發送併發請求 – 使用axios.all可以放入多個請求的數組，axios.all([])返回的結果是一個數組，使用axios.spread可就數組分開
axios.all([axios.get('url'),
axios.get('url',{params:{id:1,page:10}})
]).then(axios.spread(function (allresult1, allresult2) {
debugger//打印可以拿到所有的返回值
allresult1== 第一個請求的返回值
allresult2== 第二個請求的返回值
}));全局配置
axios.default.baseURL = 'http:/localhost:8080'
axios.default.timeout = 5000 //超時時間(毫秒)常見的配置選項：
get請求時 傳參為params
post請求時 傳參為data
axios的實例
const instance = axios.create({})封裝
export function request(config){
const instance = axios.create({
baseURL = 'http:/localhost:8080',
timeout = 5000
})
// 2.axios的攔截器
// 2.1.請求攔截的作用
instance.interceptors.request.use(config => {
return config
}, err => {
// console.log(err);
})
// 2.2.響應攔截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err);
})
// 3.發送真正的網絡請求
return instance(config)
}五、目錄
Vue.cli3的目錄結構
- dist – 打包的包
- public – 靜態目錄
- src – 源代碼
- browserslistrc – 瀏覽器相關情況
- .gitignore – git忽略文件
- .editorconfig – 約束
- babel.config.js – ES語法轉換
- vue.config.js – 自定義配置
六、生命週期
常用的幾個鈎子函數
- created() : 請求數據
- mounted()：掛載數據
- destroyed()：組件銷燬(清理定時器等)
七、數組函數
數組函數 - - Vue是響應式的，數據變化時，Vue會自動檢測數組的變化，視圖對應的更新
- push() - - - 數組後追加（可以追加多個），並返回新的長度
- pop() - - - 最後一個刪除，並且返回刪除元素的值(數組為空時，不改變數組，並返回undefined)
- shift() - - - 第一個元素刪除，返回數組的第一個元素
- unshift() - - - 數組前添加（可以追加多個），返回新的長度
- sort() - - - 排序
- reverse() - - - 反轉
- splice() - - -
-刪除：傳遞一個參數(index) 刪除對應及之後的數據，傳遞第二個參數(你要刪除的個數)
-替換：第二個參數，表示我們替換幾個元素，後面參數為用於替換的元素
-插入：第二個參數傳入0，後面參數為插入的元素 - split() - - - 將一個字符串以參數分割 ，返回數組
- join() - - - 將數組轉化為一個字符串，一傳入的字符串參數分割，返回字符串
- …Array - - - 數組裏的每一項拆分下來
- fillter() - - - 參數為回調函數，必須返回一個boolean值，返回為true時，函數會自動將這次回調的n加到新數組中，false時，函數會過濾這次的n
- map() - - - 返回的值時處理後的值
- reduce - - - 對數組中所有的內容進行彙總，後一個參數為開始值
const nums = [10, 20, 111, 222, 4444, 40, 50]
let total = nums.fillter(n = > return n < 100)
.map(n => return n * 2)
.reduce((preValue, n) => {return preValue + n},0)七、對象函數
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//{a:1,b:2,c:3}
Object.assign(target, source1, source2);
console.log(target);//["name", "age", "language"]
//3）、對象的函數屬性簡寫
let person3 = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭頭函數this不能使用，對象.屬性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉");
person3.eat2("蘋果")
person3.eat3("橘子");
//4）、對象拓展運算符
// 1、拷貝對象（深拷貝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合併對象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 }
console.log(p2)以上僅為個人學習筆記總結，請大佬指點(^_^)。。。
