vue使用問題彙總記錄

2022-04-20 10:11:10 字數 1321 閱讀 2974

1.vue的樣式汙染

比如在home.vue檔案下面定義乙個樣式,

<

style

>

.title

style

>

那麼在login.vue檔案下面有標籤使用這個class=「title」,也會有這個樣式;

避免樣式汙染的方法:

寫成

多加了個scoped, 這樣,style標籤中的樣式的作用域就只是在此vue檔案了,就不會出現樣式汙染的情況了

2.js全域性事件

比如在某個頁面vue下面定義了window.onresize,這是監聽瀏覽器視窗大小發生變化觸發的函式;當你在另乙個vue頁面下改變視窗大小也會觸發

window.onresize = () =>
因為:window.onresize是全域性事件,在其他頁面改變介面時也會執行,若僅僅是該頁面需要,那麼需要在頁面銷毀時清除事件

方法如下:

destroyed()
3.部署專案到伺服器上面,路由使用history模式導致問題

路由模式hash就沒事,但為history時你會發現

此時只有首頁能訪問,通過首頁點進去其他路由也是可以的,但是如果在其他路由重新整理瀏覽器就有錯誤了,file not found;找不到檔案;

因為原來跳轉時其實不是通過請求伺服器的,而是通過js操作history的api改變位址完成的。

當你重新整理了之後瀏覽器就耿直的去請求伺服器了,然而伺服器沒有這個檔案,於是就404了。

但是我伺服器用的是nginx,所以直接修改nginx重定向就行了

4、vue使用.native修飾符

如果你想在某個元件的根元素上繫結事件,直接使用 @click=''function' 是不生效的,我們可以新增.native修飾符 @click.native=''function''

比如想在引入的子元件上面新增監聽點選事件,直接用@click是不生效的,還要加.native修飾符才能觸發, @是v-on的縮寫;

5、使用element-ui樣式

比如想在元件重寫element-ui標籤的樣式,直接像下面這樣修改是不生效的,如果去掉scoped是可以,但是去掉scoped,其他地方用到的這個元件樣式都會被影響

解決方法使用 >>>字元,詳情原因可檢視

Vue問題彙總

通過watch解決 vue中資料的非同步載入 1.通過watch computed 2.在元件生命週期中的created階段接收資料,後面操作可正常拿到資料 3.使用async await,注意await後面要接promise物件才生效,示例 async get region statistic t...

vue 問題彙總 摘錄

問題1 vue動態判斷input readonly屬性唯讀 isreadonly true 問題2 component template should contain exactly one root element.if you are using v if on multiple element...

Vue使用中遇到問題彙總(二)

1 vue cli使用npm run dev報錯cannot get config index.js裡有兩個環境 乙個是build,乙個dev。在config index.js裡面修改,build dev裡面不需要修改,dev 我本來在window上面開發的,後面移到linux上面,剛開始報錯,我就...