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