快速了解vue(3)

2021-10-03 20:43:46 字數 1029 閱讀 9681

上次我們說到了.vue檔案,那麼這是個什麼檔案呢?啥也不是,就是個vue元件。我們都說要元件化,模組化什麼的,這.vue檔案就是個元件,開啟看看就知道了,它這裡有兩個,主要的標籤,乙個是,乙個是。這些我們肯定看得懂,標籤裡是寫html的,頁面就是由這許許多多的元件拼出來的,就像拼圖似的,想要修改頁面,只需要負責修改相應的元件就行了,不用像以前一樣,亂七八糟的找起來都費勁。

還有乙個這裡面就是寫js的,這元件裡就不是new vue了,而是規定用export default,就當它是一種規定,每乙個元件都是這樣用,js**就在這大括號裡面寫就行。

當然還要補充一下,html有專門的template標籤,js**有專門的script標籤,那css**沒有標籤嗎,這個當然有,是標籤,所有的樣式就是寫在這個標籤裡,等我們開啟別的vue檔案就能看到。

我們目前呢就把它當做是乙個容器好了,全域性變數的容器,假如現在有很多個元件,每個元件共享同乙個資料,這個元件把共享資料改變之後,另乙個元件就得立馬改變,跟這個共享資料是同步的。可以說,每個元件用的就是這同乙個共享資料。而這個store就是充當這樣的共享容器。

現在呢,我們開啟這個store檔案裡邊的index.js檔案,呀,這裡面涉及的東西有點多,我建議大家找教程仔細的學習一下,我這裡就大概說一下,import就不說了,store的寫法是有規範的,裡面就是存了一些物件,然後規定了在**獲取物件,在**修改物件,簡單就這麼說吧,真要說起來,裡面的東西有點多,我這篇部落格還寫不完。目前就先這麼理解。

這東西叫路由,簡單來說就是控制頁面跳轉的,不同的路徑,跳轉到不同的頁面,或者說不同的路徑就載入不同的元件。我們可以開啟router資料夾裡面的js檔案。廢話我就不贅述了,我們可以清楚的看到,哪個路徑需要載入哪個元件,這應該很簡單就能理解,想要更詳細的解釋,官方文件走一波。

不更了,畢設後端頁面寫完了,中期檢查也結束了。本來還想著做出來一系列的部落格,但是,我後端還沒搞明白呢。所以不更了,前端我沒有系統的學過,就是快速了解,拿來能用就行,至於其中的原理什麼的,我暫時不想管它。本來這篇部落格很早就在寫,但是一直沒有發布,當存稿存了好久。一直這麼存著也不是個事,我就寫個結尾發布吧。等我進軍全棧的時候再來重新更新。

vue3學習筆記

vue3 1.context.emit update xx props.xx 可 v model xx更新xx的值 個人記憶,雙向繫結 需要雙向改變的值 代替 vue2 sync 2.元件上繫結的事件預設是繫結第一層,可使用inheritattrs false 取消預設,在需要繼承的屬性的標籤使用v...

Vue3更新重點

vue 2.x使用object.defineproperty,參考文件 vue 3使用proxy,物件 參考文件 object.defineproperty的缺陷 1 效能 通過遍歷物件的屬性進行監聽,但是屬性值也是物件就需要深度遍歷。2 無法監聽陣列 陣列的主要操作場景是遍歷,如果每乙個元素都掛載...

vue3學習總結

v model 2.x語法 title.sync oldvalue childcomponent this emit update title newvalue 3.x語法v model title oldvalue childcomponent 所有v model不到引數,一定要改變道具和事件名稱...