1. 程式人生 > >【Vue學習筆記】問題及解決方法記錄

【Vue學習筆記】問題及解決方法記錄

chart 管理 父頁面 路徑 面繪制 event for 直接 art

1、父組件傳遞 props 到子組件過程中,報錯或者沒有值。 參考鏈接:http://www.jb51.net/article/117447.htm
2、vue工程項目中style設置background-image路徑問題: 使用
<li v-for="img in imgs" :key="img.id" class="" :style="‘background-image:url(‘+  img +‘)‘"></li>
imgs:[
      require(‘./../assets/banner_top2.png‘),
      require(
‘./../assets/banner_top3.png‘), require(‘./../assets/banner_top4.png‘) ]


3、刷新頁面,vuex中全局變量state不能保存原有的數據,需要在給vuex中state賦值的同時,通過localStorage存儲來代替。
4、router-link中如果綁定了跳轉路徑:to,就不能添加click事件,不會執行。 - 解決辦法:不用router-link直接使用a標簽+@click事件,並在點擊事件中添加this.$router.push來進行路由的跳轉
5、子頁面需要綁定後臺數據到視圖,獲取數據函數傳入參數需要從父級頁面得到時。 - 解決方法:在父頁面獲取到數據後,保存在vuex中,在子頁面的computed中獲取得到數據即可。(頁面刷新問題可看4)
6、父組件傳遞props異步數據到子組件,先獲取數據,再加載子組件,用v-if綁定子組件,初始設置為false,然後再mounted鉤子函數最後將值改為true,加載子組件。或者使用watch監聽子組件加載。
7、子組件中用Echarts畫圖,圖表數據從後臺獲取:
- 用上述方法,即使在父頁面提前獲取數據,仍然報錯;仍然無法保證頁面繪制圖表時,數據已經獲取到; - 解決措施:在mounted鉤子函數中獲取數據,然後將圖表繪制步驟放置到$http.get()方法的回調函數中,在正確獲取到數據後再進行圖表繪制,在computed中返回對應參數;
8、在@click事件中有個默認參數but($event,this),可以獲取當前點擊元素進行修改。
event.target.style.backgroundColor = ‘red‘.


9、頁面刷新,vuex保存的數據消失的問題,除了將上級傳入數據放到localStorage,或者用props傳遞參數。
10、 一般項目中,一個相對獨立的模塊如果引入vue用的話, - 如果是單獨的一個router-cli建立的工程,除了用url引入。 - 如果是直接在項目中嵌入,就在模塊入口用新建vue實例,CDN方法引入vue。
11、 一個vue項目,vuex進行模塊化管理,即除了根 store 以外,還通過 module 將各組件的 store 分開管理。或者每一個組件建立新的vuex文件存儲。 12、頁面刷新,若模板更新過多,出現很強烈的過度效果,可能是使用v-if的原因,可以用v-show代替。

【Vue學習筆記】問題及解決方法記錄