摘要:最近在上海找工作,發現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 模...