一阁吝、props特性
傳入對象形式進(jìn)行props校驗,
required:true 必須要有值
props不可以直接修改漠其,用attrs 實例屬性,可以獲取到組件的非props特性的集合
可以設(shè)置 inheritAttrs 選項的值為 false 冯键。來禁用非props特性的繼承惹盼。
二、下面兩種情況修改數(shù)組時惫确,不會引起頁面的更新:
1. 直接通過數(shù)組的下標(biāo)去修改數(shù)組項目手报。
2. 直接通過數(shù)組的length去修改數(shù)組的長度時蚯舱。
解決方法
針對第一種情況:
1. 全局方法 Vue.set(target, index, newValue)
2. 實例方法 vm.$set(target, index, newValue)
針對第二種情況:
1. 使用數(shù)組 splice
三、v-model
在組件上
<lv-input type="text" v-model="msg" /> //雙向數(shù)據(jù)綁定
展開
<lv-input type="text" :value="msg" @input="msg = $event" />
四掩蛤、.native
在組件上使用的事件默認(rèn)都是自定義事件枉昏。
加.native修飾符變成原生事件,@focus.native="fn2"
五揍鸟、依賴注入
誰提供數(shù)據(jù)兄裂,就給誰配置 provide 選項
provide () {
return {
color: this.color
}
}
誰要用這份數(shù)據(jù),就給誰配置 inject 選項
inject: ['color']
六阳藻、keep-alive
- include 通過設(shè)置這個屬性晰奖,來控制需要緩存的組件
- exclude 通過設(shè)置這個屬性,來控制不需要緩存的組件
- max 通過設(shè)置這個屬性腥泥,來控制最多緩存幾個組件
七匾南、動態(tài)路由
八、導(dǎo)航守衛(wèi)
- 全局守衛(wèi)
- 全局前置 beforeEach
- 全局后置 afterEach
- 全局解析 beforeResolve
- 路由獨享守衛(wèi)
- 進(jìn)入之前 beforeEnter
- 組件級別的守衛(wèi)
- 進(jìn)入之前 beforeRouteEnter
- 更新之前 beforeRouteUpdate
- 離開之前 beforeRouteLeave
九蛔外、中央事件管理器(事件總線)
其實就是一個發(fā)布訂閱模式蛆楞。是通過一個空的vue實例對象,然后調(diào)用這個對象的emit去做發(fā)布
let bus = new Vue() //創(chuàng)建空對象
created () {
bus.$on('abc', (name) => { //創(chuàng)建時訂閱一個點擊事件臊岸,
this.name = name
})
}
methods: {
fn1 () {
bus.$emit('abc', '張三') //點擊時觸發(fā)發(fā)布事件
}
}
十、store
state: 狀態(tài)
getters: 對 state 的派生尊流,可以理解為 store 的計算屬性
- 存放針對store的state數(shù)據(jù)或者其他getter數(shù)據(jù)做的計算屬性
- state 自動接收到的當(dāng)前store的state對象
- getters 自動接收到的當(dāng)前state的getters對象
- 必須有返回值
- 它也不能直接修改
mutations: 修改 state 的唯一操作就是提交 mutation。
- 它也不能直接修改
- 唯一能修改倉庫state數(shù)據(jù)的地方
- state 是自動接收到的當(dāng)前的state對象
- payload 是提交這個 mutation 時寞埠,傳遞過來的參數(shù)
actions: 類似于 mutations , 用來處理異步每强。
- payload 是提交這個 mutation 時寞埠,傳遞過來的參數(shù)
- 存放異步的動作膨桥,它也不能直接去修改state的。而是在里面調(diào)用了mutation
- context 是自動接收到的當(dāng)前的 store 實例對象(上下文)它里面有 state迎献、getters、commit腻贰、dispatch 等吁恍。
- payload 是派發(fā)這個 action 時,傳遞過來的參數(shù)
modules: 對倉庫 分割成 模塊
- payload 是派發(fā)這個 action 時,傳遞過來的參數(shù)
mapState(): sate的輔助函數(shù)
mapGetters(): getters的輔助函數(shù)
mapMutations(): mutations的輔助函數(shù)
mapActions(): actions的輔助函數(shù)
十一播演、vue 的組件庫
- elementui PC端
- mintui mobile端
- vant mobile端 有贊
- vux mobile端
- ant-design-vue PC端
十二冀瓦、正向代理
代碼的目標(biāo)網(wǎng)站只有一個的時候:(vue.config.js)的配置文件
module.exports = {
devServer: {
proxy: 'https://m.maoyan.com' // 需要代理的目標(biāo)網(wǎng)站的地址,只寫域名就好写烤。
},
prot: '9090' //修改端口號
}
十二翼闽、全局組件
data: function() {
return {
//返回的數(shù)據(jù)是不同的數(shù)據(jù)
msg: '',
}
}
十三、 template
1. template 是 vue 中內(nèi)置的組件
2. 如果要同時對多個相鄰元素做條件渲染時洲炊,可以將 v-if 寫在 template 上感局。
3. template 元素不會渲染到頁面上尼啡,也就不會去影響頁面的布局,
故加不了v-show屬性
十四询微、v-if與v-show的區(qū)別
1. v-if 才是真正的條件渲染崖瞭,v-show 只是簡單的控制元素的樣式
2. v-if 有更高的切換開銷。v-show 有更高的初始渲染開銷撑毛。
3. 頻繁切換使用 v-show 书聚。否則 v-if
4. v-if 有配套的 v-else v-else-if 。而 v-show 沒有
5. v-if 可以配合 template 使用代态,而 v-show 不可以寺惫。