vue學習心得

前言

使用vue框架有一段時間了，這裏總結一下心得，主要為新人提供學習vue一些經驗方法和項目中一些解決思路。

文中謹代表個人觀點，如有錯誤，歡迎指正。

環境搭建

假設你已經通讀vue官方文檔（文檔都沒讀一遍（至少），那不建議動手擼碼），在大致了解vue是什麽東西，有什麽用，核心概念之後我們就可以開始著手學習vue。首先搭建環境。

學習vue，我的建議是通過官手腳手架起步。

>>>Installation

$ npm install -g vue-cli

>>Usage

$ vue init <template-name> <project-name>

>>>>Example:

$ vue init webpack my-project

根據需要安裝插件yes or no,一直回車，腳手架就生成了。接下來剖析腳手架結構。

腳手架結構剖析

再開始寫項目之前，我們需要弄清什麽地方寫什麽代碼。

build文件夾

webpack配置文件。此處配置webpack規則。整個項目是通過webpack支持的。比如你要使用less，你需要在webapck規則裏使用less。

src 文件夾

擼碼的地方～基本你所有的代碼都在這一塊完成。

assets文件夾

存放web中引用的圖片 媒體資源。

components文件夾

主要存放可復用組件，你可以在任意頁面中復用這些組件。

router文件夾

index.js 路由配置文件。在此處配置各個頁面的跳轉引用關系。

APP.vue

這裏看一看做頁面的根部。我們可以在這個頁面進行一些css reset 操作。

main.js

根邏輯，頁面加載首先會加載這份js文件。

static文件夾

主要存放外部引用資源。比如xxx.min.js

index.html

vue是spa應用，所以只有一個入口，也就是index文件，這裏我們進行一些不可更改資源（比如某某庫）的引用，和html頁面meta 、title之類的設定。

vue核心概念

vue的核心概念是‘數據驅動’，假如我們需要切換view層，我們應該修改的是數據。下面我會分享一些我自己在學習vue中收獲的一些實例，大家自行感受。

實例展示的是方法論，概念性一樣的東西，不要被例子局限，要將思維擴散出去。知識點學習還是看官方文檔為主。

vue如何處理dom顯示，樣式切換，動態樣式

watch 和 computed的 簡析

vue提供了2個動態監測data的函數，一個是watch，一個是computed。

watch： 主要監測已經存在的data，處理data變化後的鉤子

computed： 處理一個已存在的data，返回一個data

vuex 是一個比較好的例子，可以用來學習監測，什麽時候用什麽方法去處理這些變化。

v-for 列表渲染機制

v-for 是我認為vue中一個非常非常強大的指令，所有規律性動態數據的展示，都可以用for指令來完成。
v-for是非常強大，可以追蹤循環體內任意一個值的變化，針對變化來單獨渲染。

v－for 建議仔細閱讀官方文檔，而不是通讀。在項目中，我們應該養成習慣。對於可變化的，規律性數據都采用for指令渲染。 我之所以又把for指令寫了一遍，是因為我在開始寫vue時，根本就沒有活用for指令的簡便和強大，還是古老的ul li 循環，繁雜的事件綁定委托。估計人類本性對一個東西還不太了解的時候會習慣性的用自己熟悉的方式去操作的原因。

vue中引入組件以及父子組件的數據交互

關於組件，任意vue文件你都可以看做一個組件。 在項目中我們一般使用的應該都是單文件組件，單文件組件與頁面結構無異，是具有完整功能的一個模塊。比如一個評論框，你就可以剝離成一個組件，在任意頁面文件中引入這個組件。

vue過濾器

在有一些業務場景需要對數據進行一些轉換，比如後端圖片地址的前綴匹配，這個時候filters就派上大用場了。看個例子感受一下。

vue路由

路由對於spa應用的重要性不言而喻，整個應用的頁面關系都是通過路由定義的。我們先來看看一個路由文件大致是什麽樣子

vue 使用history模式，我們就可以去使用history的API，需要在路由配置中啟用。默認hash模式，history模式也是一般應用的常用模式。

//切換當前地址，同 history.replaceState
 this.$router.replace({name: 'list'})  
//向history推入一級，同history.push
 this.$router.push({name: 'list'})  
//添加參數
 this.$router.push({name: 'list', query: {setting: 'setting'}})

//監測路由變化
watch:{
      '$route': function () {
       //處理事件
      }
    },


》》》》可以在頁面任意處打印this.$route查看路由對象

vue的路由配置相對來說，是比較簡單的，閱讀一遍router文檔，就可以快速上手。

路由是非常重要的一塊，在動手開始寫你的vue項目之前，你非常有必要通讀一遍路由文檔。而不是碰到問題再去解決。嵌套路由，動態路由會對你的開發起到非常有用的幫助。官方路由

可監測的全局變量——vuex

項目開發中，往往我們會有一些全局變量，但是正常全局變量，vue是不能監測的，這個時候vuex就派上用場了。 vuex官方文檔

npm install vuex --save

／／安裝好vuex後，我們先新建一個store文件夾，存放vuex相關文件，如下圖所示
>>>>> index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modulesApp from './modules/app'  //引入一個app模塊
Vue.use(Vuex)

let store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    app: modulesApp
  }
})

export default store

———————————————— 分割線——————————————————

>>>>>app.js    //這裏是個我的示例結構，可以查閱文檔選擇自己喜歡的書寫方式

let state = {
  height: document.documentElement.scrollHeight + 'px',
  total: 1,
  list: [],

};

let getters = {};

let mutations = {
  height: state => state.height = document.documentElement.scrollHeight + 'px',
  totalChange (state, total) {
    state.total = total
  },
  listChange (state, list) {
    state.list = list
  },


};

let actions = {};

export default {
  state,
  getters,
  mutations,
  actions
}

如何開始寫第一個demo項目

看完以上內容，想必大家對vue都有了進一步的了解。在通讀官方文檔後，我們對vue都有一個大致的了解，這樣其實對於新手而言還是沒有方向去寫一個demo出來的，我們往往想寫個漂亮的demo，但這樣就必須花大量時間去寫html和css，這點博主深有體會，看了2遍文檔後還是不知道怎麽去入手寫個demo練手。這裏博主有個建議就是：

專註於vue本身，而不是花過多的時間去寫html，css。

以上我們已經搭建了一個vue開發環境，接下來就是找一款心儀的UI組件庫，博主這裏推薦iview，個人感覺非常漂亮。然後就是構思你的demo要寫什麽，好了，拖組件搭UI，開始寫真正寫項目代碼把，把更多時間花在vue學習之上。

後記

寫到這裏也就告一段落了。通過項目去學習vue，在這個過程碰到問題解決問題，就是一個效率的學習方法。
以後回過頭來看，“自己以前這個demo寫的這麽垃圾？” 就說明你又進步了。入門第一步，框架用的好，用的熟練，當表面已經無法滿足我們的時候，OK ，深入框架的時機到了。可以開始研究vue是怎麽實現數據綁定，怎麽實現數據響應式這些更深層的技術原理了。

博主打算對vue-cli進行二次開發，封裝一些有用的命令。敬請期待！前段路坎坷，共勉～
如果覺得本文對你有所幫助，就star一下吧～大傳送之術！ 我的博客Github

文章來源：