vue2.0初學後我的總結分享

前端小白入門學習Vue.js，若有不對之處，歡迎指出。若有建議，更是感激涕零，在此謝過！

選擇學習vue.js框架的緣由

• 性能顯著：MVVM開發模式對於傳統MVC性能強不少，隨處可見，所以單頁面框架學習必不可少

• 相對友好：配置型框架，相比而言Vue不是最好，但對經驗不甚豐富的開發者相對友好，暫先選擇Vue過渡

• 自我反思：web前端發展的狂暴速度帶來的汪洋大海不由讓剛入行的小白（我），瑟瑟發抖。能夠說只會一些jQuery和原生js，最終會被遺棄而苟且於底層外包公司搬磚討飯。

再說點戰鬥力感人的

通過近一個月的業餘踩坑學習，vue.js算是邁開了第一步有了初步掌握，也作了個小項目。從vue create project項目構建到npm run build打包上線本地服務器，最終pc和移動端都算是跨過去了。但是用HBuilder打包app，本地自建json文檔，不知爲什麼axios請求不到js形成缺乏數據的問題，嗝屁- -

---

之前總聽羣友說什麼vue全家桶，反正我是聽都聽不懂！

嘿嘿，學習了vue以後，如今不同了。

雖不是科班出身，但也有一顆堅持的心，跪着也要走玩這條路。 由於喬丹代言耐克說： Just do IT！

我認爲的Vue全家桶

我的認爲不少官方解釋聽起來很抽象，第一次聽的時候都很難理解，因此經常簡化理解

1. vue-cli：做用搭建項目的腳手架
2. vue：相應API基礎知識
3. vue-router：路由，鏈接於各個頁面
4. vuex：官方解釋vuex是vue提供的vue狀態管理工具，詞彙很高大上，對於小白的我剛開始確實理解有些吃力。個人理解就是解決父子頁面和父子組件之間的參數傳遞相似於cookie的進化版（說通俗點就是處理數據的）
5. axios：做用是請求獲取後端接口數據，像是ajax的兄弟

固然我以爲全家桶還能夠加點料，我所知的element-ui和vant

淺談一些我常聽知識點

• 生命週期鉤子

  剛開始很難理解，一臉懵b，啥是鉤子？？

  文檔裏常常說起鉤子，後來理解成，生命週期鉤子就像是利用生命週期，何時幹什麼事。 好比請求數據就能夠在mounted階段。

  附上一張圖

• 組件化

  組件( Component)：就像孩童愛玩的樂高積木，每個組件能夠當作一個積木塊。可是可能組件更厲害的是這個積木塊能夠重複用無數次，只要你須要！而每一個組件都要分別開發，或者是從別人造好的輪子裏"借鑑"。

  組件的三個核心概念：

  ​ 這裏再亮出一張收藏的圖

名稱	對應內容
數據綁定	v-bind 縮寫爲： 前面加了：後面引號的就是表達式了
條件判斷	v-if v-else
事件綁定	v-on 縮寫爲@
事件修飾符5個	.stop阻止冒泡，.prevent阻止默認行爲，.capture相反冒泡，.self觸發本身範圍內事件，.once只觸發一次
遍歷數組和對象	v-for="irem of list"
計算屬性，偵聽屬性	計算屬性能幹的偵聽屬性也能幹，反之不行，能用計算屬性的必定要用計算屬性
雙向綁定	v-model 只能用於表單類標籤

• 過濾器filter

<div id="app">
        <p>{{msg | filterMsg('瘋狂')}}</p>
 </div>
 <script src="vue.js"></script>
 <script> Vue.filter('filterMsg', function (msg,arg) { return msg.replace(/單純 /g,'帥氣'+ arg) }) var vm = new Vue({ el: '#app', data: { msg: '曾經，我也是一個單純的少年，單純的不能再單純。我傻傻的問，誰是世界上最單純的人' }, }) </script>
複製代碼

• axios

  學的還不深，只得拿出一個比較簡單的代碼塊,上文中鉤子函數說放在mounted

mounted () {
    axios.get('http://localhost:5000/api/user', {
        params: {
            id: this.id,
            name: this.name,
            email: this.email,
        }
    }).then(response => {
        this.users = response.data
    }).catch(error => {
        console.log(error)
    })
 }
複製代碼

• vuex

  vuex是什麼？ 官方解釋：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式

  new Vue({
    // state 驅動應用的數據源；
    data () {
      return {
        count: 0
      }
    },
    // view 以聲明方式將 state 映射到視圖；
    template: ` <div>{{ count }}</div> `,
    // actions 響應在 view 上的用戶輸入致使的狀態變化。
    methods: {
      increment () {
        this.count++
      }
    }
  })
  複製代碼

附上官方單項數據流理念的簡單示意

多個組件或者多個頁面數據共享容易破壞，因此要下面的vuex集中式管理數據

vuex中，有默認的五種基本的對象：

• state：存儲狀態（變量）

• getters：對數據獲取以前的再次編譯，能夠理解爲state的計算屬性。咱們在組件中使用 $sotre.getters.fun()

• mutations：修改狀態，而且是同步的。在組件中使用$store.commit('',params)。這個和咱們組件中的自定義事件相似。

• actions：異步操做。在組件中使用是$store.dispath('')

• modules：store的子模塊，爲了開發大型項目，方便狀態管理而使用的。

  vuex暫時還沒弄太清，之後再把總結細緻寫出來

---

最後：

小白短淺總結，但願發出來不捱打哦！

學的越多發現本身懂得又越少，這是這段時間的感悟。

經過這一階段的vue探索，初步掌握了vue， ES6也稍有所學。 css預處理器stylus，axios。可是vue的道路纔剛開始。長路漫漫，惟前端做伴！

ps：stylus是我用的全部css預處理器中體驗最爽的！

爲了避免吃最少的經濟而又挨最毒的打，加油吧，騷年！