Vue 2 0初學後個人總結及分享

2021-07-28 08:33:08 字數 2240 閱讀 2709

摘要:最近在上海找工作,發現vue前景還不錯,於是就打算先學習一下(之前了解過,但是一直沒提到日程上)這篇隨筆當是為了自己學習之後,做乙個小的階段性總結。希望本文的內容對於剛開始接觸vue的朋友們有點幫助(曾經的我)。如有誤導之處,希望大家幫忙指出。

正文:

一、vue 2.0

吐槽:目前市面上我所接觸過的前端框架有 angular  react  vue 當然還有一些其他的,只是我都沒怎麼用過,不好多說。

angular

我接觸的第乙個前端框架,對資料有良好的處理,但是學起來入手還行,深入的話成本大了一些。當時習慣使用jquery

的我換成了這個新鮮的玩意確實還是用了一些時間,專案成型後,覺得用著還行。但是後來的angular2.0 讓我徹底的放棄了

angular(個人想法),後來看到了移動端的熱潮,但是angular用在移動端的話,顯得有些重了。這個時候react出現了。

react & react native

號稱僅次於原生的js前端框架閃耀問世,由於有了些之前angular的基礎,學習這個要輕鬆一些,不得不說「盛名之下無

虛士」,檢視的元件化和響應式無論是開發還是使用者體驗都是極好的。

vuevue的出現,效能方面官網給出了很明確的資料,在這裡。 而放在第一位的做比較的就是react,可見其對react的

重視程度,在有前兩個框架的基礎上,本就容易掌握的vue,耗費的成本小的很多。更優的效能,更低的學習成本。

----------------來點正經的-----------------

官網的文件很好,這裡只是記錄一下當初自己學習的一些疑惑。

1)關於元件化,一張**釋足以。

2)什麼是「鉤子」 ?

文件裡多次提到「鉤子」,「鉤子」 簡單理解就是「到什麼時候,做什麼事」,比如生命週期鉤子,如下圖:

其中:mounted 就是頁面渲染完了之後,我們可以幹點什麼壞事。一看**就立刻明白了。

我們通過 mounted (頁面渲染完成後,即「到什麼時候」) 這個「鉤子」,當頁面渲染完了之後,發起了乙個請求(即「做什麼事」),

然後就會有一些列**的事情。看到這裡,相信都能明白什麼是「鉤子」啦!明白了什麼是「鉤子」,對之後的學習很有必要。

3)資料的傳遞(這很重要)

父元件:        

子元件:就是 import cnslide from './slide' 中的這個 slide 檔案

1. 父元件-->子元件

這種傳值的方式很容易理解。

首先:在父元件中,通過 v-bind (縮寫為 「:」)命令,繫結乙個屬性(即 prop,語義化比較容易理解),並傳入一定的值(也可以是物件)

關於如何傳入,上面的**已經給出了。

然後:在子元件中通過 props 來接收,**如下:

2. 子元件-->父元件

這個稍微有點難度了

主要用到兩個方法即可:vm.$on 和 vm.$emit 上**:

//

vm.$on("監控的方法名,字串", callback) 用在父元件

//這裡的 v-on 就相當於是$on, child-say = 監控的方法名,

//listentomyboy = callback

do you like me? }

methods:

}

//

vm.$emit("父元件監控的方法名",要傳給父元件的引數)

//這裡的 talk 只是為了出發 emit()

i like you

methods:

}

未完待續...

參照資料

官網:

vuex 2.x:   ( vue 核心外掛程式 )

vue-router 2.x:  vue 核心外掛程式 )

Vue 2 0初學後個人總結及分享

摘要 最近在上海找工作,發現vue前景還不錯,於是就打算先學習一下 之前了解過,但是一直沒提到日程上 這篇隨筆當是為了自己學習之後,做乙個小的階段性總結。希望本文的內容對於剛開始接觸vue的朋友們有點幫助 曾經的我 如有誤導之處,希望大家幫忙指出。正文 一 vue 2.0 吐槽 目前市面上我所接觸過...

Vue 2 0初學後個人總結及分享

摘要 最近在上海找工作,發現vue前景還不錯,於是就打算先學習一下 之前了解過,但是一直沒提到日程上 這篇隨筆當是為了自己學習之後,做乙個小的階段性總結。希望本文的內容對於剛開始接觸vue的朋友們有點幫助 曾經的我 如有誤導之處,希望大家幫忙指出。正文 一 vue 2.0 吐槽 目前市面上我所接觸過...

VUE2 0學習總結

摘要 年後公司專案開始上vue2.0,自己對學習進行了總結,希望對大家有幫助!vue2.0學習 vue融合了react和angular的優點,並且解決了react和angualr的痛點 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模...