Vue初學者可能不知道的坑

2022-09-13 18:33:09 字數 4185 閱讀 5084

mounted(),1000) ;

}

//箭頭函式訪問this例項因為箭頭函式本身沒有繫結this

settimeout(() => , 500) ;

//使用變數訪問this例項let self=this;

},1000);

settimeout (function () , 1000) ;

setinterval路由跳轉繼續執行並沒有銷毀

created() , 100000);

}beforedestroy( )

2.vue路由攔截瀏覽器後退實現草稿儲存類似需求

//在路由元件中:mounted(){},

beforeroutele**e (to, from, next) else

}

3.自定義元件新增click等事件不生效
type="circle"

:percentage=「0" @click="stopprogress">

elprogress>

export default }}

script>

type="circle"

:percentage="0" @click.native="stopprogress">

el-progress>

template>

export

default }}

4.手動操控自定義元件

type="circle"

:percentage="o"

ref="progress">

el-progress>

template>

this.$refs.progress //元件物件例項, 可以手動呼叫元件的內建方法和屬性

this.$refs.progress.$el //元件 物件的最外層dom元素

5.深度作用選擇器

在樣式中設定完scoped在瀏覽器解析為如下圖這樣,a是個div,a div裡面包含乙個元件裡面解析完了div的樣式名字為b,想在父元件影響到子元件的預設樣式。解決方法:

.a >>> .b 

//有些像sass之類的預處理器無法正確解析》。這種情況下你可以使用/deep/操作符取而代之- - - -這是乙個》的別名,同樣可以正常工作。 .a /deep/ .b

6.vue陣列/物件更新檢視不更新
data() 

}; },

// 陣列更新檢視不更新

this.arr[0] = 'obkoro1';

this.arr.length = 1;

console.log(arr);// ['obkoro1'];

// 資料更新,物件檢視不更新

this.obj.c = 'obkoro1';

delete

this.obj.a; //刪除物件的屬性

console.log(obj); //

7.vue filters過濾器的使用

}div>

//展示正確時間

'v-bind'中 –>

v-bind:id='rawid | formatid'>

div>

//demo:乙個日期過濾器返回yyyy- mm-ddhh:mm:ss的樣式

//引入乙個提前寫好日期格式化的js import dayjs from 『dayjs』;

export

default

},filters:

}}

8.vue深度watch與watch立即觸發**

watch: ,

deep: true

// 監測這個物件中每乙個屬性的變化

},step: ,

immediate: true

// 預設觸發一次

}}

mounted(),1000) ;

}

//箭頭函式訪問this例項因為箭頭函式本身沒有繫結this

settimeout(() => , 500) ;

//使用變數訪問this例項let self=this;

},1000);

settimeout (function () , 1000) ;

setinterval路由跳轉繼續執行並沒有銷毀

created() , 100000);

}beforedestroy( )

2.vue路由攔截瀏覽器後退實現草稿儲存類似需求

//在路由元件中:mounted(){},

beforeroutele**e (to, from, next) else

}

3.自定義元件新增click等事件不生效
type="circle"

:percentage=「0" @click="stopprogress">

elprogress>

export default }}

script>

type="circle"

:percentage="0" @click.native="stopprogress">

el-progress>

template>

export

default }}

4.手動操控自定義元件

type="circle"

:percentage="o"

ref="progress">

el-progress>

template>

this.$refs.progress //元件物件例項, 可以手動呼叫元件的內建方法和屬性

this.$refs.progress.$el //元件 物件的最外層dom元素

5.深度作用選擇器

在樣式中設定完scoped在瀏覽器解析為如下圖這樣,a是個div,a div裡面包含乙個元件裡面解析完了div的樣式名字為b,想在父元件影響到子元件的預設樣式。解決方法:

.a >>> .b 

//有些像sass之類的預處理器無法正確解析》。這種情況下你可以使用/deep/操作符取而代之- - - -這是乙個》的別名,同樣可以正常工作。 .a /deep/ .b

6.vue陣列/物件更新檢視不更新
data() 

}; },

// 陣列更新檢視不更新

this.arr[0] = 'obkoro1';

this.arr.length = 1;

console.log(arr);// ['obkoro1'];

// 資料更新,物件檢視不更新

this.obj.c = 'obkoro1';

delete

this.obj.a; //刪除物件的屬性

console.log(obj); //

7.vue filters過濾器的使用

}div>

//展示正確時間

'v-bind'中 –>

v-bind:id='rawid | formatid'>

div>

//demo:乙個日期過濾器返回yyyy- mm-ddhh:mm:ss的樣式

//引入乙個提前寫好日期格式化的js import dayjs from 『dayjs』;

export

default

},filters:

}}

8.vue深度watch與watch立即觸發**

watch: ,

deep: true

// 監測這個物件中每乙個屬性的變化

},step: ,

immediate: true

// 預設觸發一次

}}

你可能不知道的東西

元素可以分為塊級元素,行內元素以及行內塊級元素。行內元素的margin或者padding只有margin left和margin right以及padding left和padding right有效果,margin top margin bottom padding top padding bot...

你可能不知道的const

眾所周知,使用 const 宣告的變數必須同時初始化為某個值。一經宣告,在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...

你可能不知道的python logging機制

先來看幾個例子,先想一下執行結果,答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...