給檔案設定路徑別名,方便在元件內引入檔案,不必寫太長的路徑名稱。
全域性引入scss檔案,不必在單個元件內再次引入,可以直接使用。例如:全域性變數、px2rem函式等檔案
為了解決專案進入時候白屏bugconst path = require('path');
function resolve(dir)
module.exports = ,}},
chainwebpack: config =>
}
html 屬性名稱對大小寫不敏感,因此瀏覽器會將所有大寫字元解釋為小寫字元。也就是說。當你在你 dom 模板中書寫 prop 時,你應當將駝峰式(camelcase)轉寫為等價的(連字元分割的)串聯式(kebab-case):const router = new vuerouter(
]});
vue.component('blog-post', )
還可以通過 v-bind 給 props 分配動態值,就像這樣:
再次申明,如果是在使用字串模板的場景,則沒有這些限制。
在生命週期mounted中進行監聽滾動:// 進入路由
beforerouteenter(to, from, next) );
},
mounted () ,
在方法中定義監聽滾動執行的方法:
scrolltotop() ,
記得在離開當前路由解綁scroll
事件
beforeroutele**e(to, form, next)
如果非同步請求的資料出現報錯,可以通過
v-if
判斷一下,注意不能使用v-show
,v-show的機制是載入後,根據條件判斷是否顯示,當然渲染元件的時候也可以這樣做
引數或查詢的改變並不會觸發進入/離開的導航守衛,但是可以通過觀察 $route 物件來應對這些變化,或使用 beforerouteupdate 的元件內守衛。
有時候父元件觸發的實際需要修改子元件內的data資料,這時候請給子元件繫結ref
屬性,在父元件觸發時間內修改子元件的變數
第一種:直接在子元件中通過0" />
// 收起選單
this.$refs.head.show = false;
this.$parent.event
來呼叫父元件的方法
這種方式可以無限級別的向上找父級,例如:this.$parent.$parent.$parent.$parent.event
,子元件也不需要props
屬性接收父元件的方法,但是多層級的時候容易搞亂層級,.$parent
太多了
父元件
子元件
第二種:父元件把方法傳入子元件中,在子元件裡直接呼叫這個方法點選
父元件內呼叫子元件的時候需要顯示的傳入方法(注意:這裡是用的:
傳入方法),子元件還需要通過props
接收父元件傳來的方法,否則也不可以呼叫,另外就是多層級的時候需要一層一層的往下傳,這時候就比較繁瑣
父元件
子元件
第三種:子元件裡用點選
$emit
向父元件觸發乙個事件名(注意:這裡是用的@
傳入方法),父元件監聽這個事件名就行了,子元件不需要通過props
接收父元件傳來的方法,否則也不可以呼叫,這種最好向上傳遞一層父級,否則也需要層層傳遞
父元件
子元件
第四種:使用點選
$emit
和$on
配合傳遞事件
如果僅僅是父子一層,傳遞事件就使用第三種就可以了,如果多層傳遞或者是兄弟元件,還可以使用$emit
和$on
配合,其原理就是new 乙個vue例項,然後在父子元件引入這個例項,這樣在子元件觸發的事件就會在父元件監聽到了,這就是網上說的eventbus。
新建乙個bus.js
在父子元件分別引入這個import vue from 'vue';
export default new vue();
bus.js
import eventbus from 'bus';
在子元件觸發事件
在父元件監聽事件export default }};
當然如果你覺得建乙個export default
};
bus.js
檔案多餘的話,可以在main.js
裡把bus
加到原型上
加到原型上的好處就是全域性都可以使用了//vue原型鏈掛載匯流排
vue.prototype.eventbus = new vue();
全域性引入元件this.eventbus.$emit('fathermethod');
this.eventbus.$on('fathermethod');
引入 toast 元件後,會自動在 vue 的 prototype 上掛載 $toast 方法,便於在元件內呼叫。import vue from 'vue';
import from 'vant';
vue.use(toast);
當然也可以在元件內引入export default ,
};
import from 'vant';
元件內使用
只要緊記繫結和解綁的事件是同乙個就行了,如果不是乙個,就單寫成乙個函式export default ,
};
在export default ,
methods: ,300),
// 繫結滾動載入資料事件
addscrolldata(),300);
// 繫結滾動載入資料事件
window.addeventlistener('scroll', this.getscrolldata);}},
//離開路由和元件銷毀選擇適合專案寫一種解綁即可
// 離開路由之前
beforeroutele**e(to, from, next),
//元件銷毀之前
beforedestroy () ,
};
http.js
使用store
在元件內使用import store from '@/store';
import from "@/store/mutationtypes.js";
......
...store.commit(show_loading);
this.$store.commit(show_loading);
vue2 x學習筆記(一)
使用vue開發專案已經過了一段時間了,對其中的很多東西還是一知半解,於是想要系統學習一下。主要內容是參照官方中文 然後加上一些自己的理解與批註。什麼是vue.js vue 讀音 vju 類似於view 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue被設計為可以自底向上逐層應用。...
vue3建立vue2 x專案
因為一些原因更新了node,再次安裝vue時,莫名的就vue3了。好吧,但是以前的專案還是vue2的,所以順便嘗試了下vue3建立vue2專案。首先是建立,以前是使用vue init建立,現在是vue create,然後在建立時,可以選擇2還是3 如果選擇3還有一些其它選項 比如是否安裝vue ro...
Vue2 x 快速入門例項專案
本專案是在使用vue cli生成的腳手架程式基礎上,綜合運用vue的各項特性開發的乙個快速入門例項專案。install vue cli npm install g vue cli init project vue init webpack my project entry into the file...