要注意的細(xì)節(jié)
- this.$nextTick是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM
// 如監(jiān)聽(tīng)某個(gè)數(shù)據(jù)變化，在數(shù)據(jù)變化后并且DOM也更新完，才執(zhí)行回調(diào)里面的內(nèi)容
watch() {
// 監(jiān)聽(tīng)播放狀態(tài)
playing(val) {
const audio = this.$refs.audio
this.$nextTick(() => {
val ? audio.play() : audio.pause()
})
},
}
- props 傳遞數(shù)組時(shí)設(shè)置default
props: {
switches: {
type: Array,
default: () => []
}
},
- 如果組件里用使用計(jì)時(shí)器
// 在組件銷(xiāo)毀時(shí)(即切換組件或關(guān)閉頁(yè)面)，
// 調(diào)用destroyed方法清除計(jì)時(shí)器
destroyed(){
clearTimeout(this.timer)
}
- app.vue里給router-view外加keep-alive標(biāo)簽
// 好處 DOM會(huì)緩存在內(nèi)容中
// 切換導(dǎo)航時(shí)不會(huì)重復(fù)獲取數(shù)據(jù)
<keep-alive>
<router-view></router-view>
</keep-alive>
- 在 Vue 2.0 中，為自定義組件綁定原生事件必須使用 .native 修飾符：
<my-component @click.native="handleClick">Click Me</my-component>
- filters 數(shù)據(jù)處理器，作用:在不改變的data 的情況下 輸出前段需要的格式數(shù)據(jù)。
{{ message | filterFun }}
new Vue({
// ...
filters: {
// 進(jìn)行格式轉(zhuǎn)換并返回
filterFun: function (value) {
return value;
}
}
})
//filter中可有傳多個(gè)參數(shù)，默認(rèn)第一個(gè)為message的值，自定義參數(shù)從第二個(gè)開(kāi)始
filters: {
filterFun: function (value, sta1, sta2) {
return value;
}
}
.editorconfig 文件放在項(xiàng)目文件根目錄里(是代碼格式文件)
事件綁定 :
在 Vue 2.0 中，為自定義組件綁定原生事件必須使用 .native 修飾符：
<my-component @click.native="handleClick">Click Me</my-component>vue本地資源放到項(xiàng)目的
/static目錄下 ,才能引用(如圖片、js、css)引入組件 注意前面+
./否則打包后可能讀取不到
import navTitle from './title.vue'
components:{
navTitle
}
調(diào)用
<nav-title></nav-title>
在vuejs2.0中，任何試圖在組件內(nèi)修改通過(guò)props傳入的父組件數(shù)據(jù)都被認(rèn)為是anti-pattern的，報(bào)以下錯(cuò)誤：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders-
計(jì)算屬性 是屬性 可以直接放入html里
組件可以在data里定義常量 并用表達(dá)式賦值(不可以用函數(shù)賦值)
如:獲取窗口寬度:
win_W: window.innerWidth || document.body.clientWidth
根組件綁定窗口改變事件
window.onresize = function(){
_this_.win_W = window.innerWidth || document.body.clientWidth;
}
窗口改變時(shí)，其他子組件也能得到
- 子組件利用事件傳值，只能傳給上一級(jí)組件，如果需要傳給根組件，需要繼續(xù)定義、觸發(fā)事件
3級(jí)組件 ; @click="trgSidebar"
2級(jí)組件: @trgSidebar="trgSidebar"
methods: {
trgSidebar: () {
this.$emit('trgSidebar');
}
}
- Vue 綁定class style 之類(lèi) 需要+ {}
<li :class="{ active: index ===0 }"></li>
