來一場Vue的學習之旅

Vue中的組件

1. Vue.component用於註冊全局組件
2. 傳遞父組件的數據到子模版

上面這兩句話很常見......嗯，下面就從vue組件開始一場vue的學習之旅吧。

組件的聲明與註冊

建立Vue組件很簡單，只須要聲明一個組件對象字面量，而後安裝到vue實例上（局部安裝或者全局安裝）。
將組件聲明爲對象字面量的形式，必有屬性是template，還要渲染數據data吧，或者還須要父組件傳遞數據的接口props，而後一個比較完備的組件就聲明好了。

// 組件聲明（爲對象）
    var myComponent = {
        template: '<div>this is a component</div>',
        data: function() {
            return {
                message: 'this is within the component'
            }
        },
        props: ['name']
    }
    // 簡要分析一下：組件是對象，內部屬性使用data定義，可接受父組件傳過來的值，使用props聲明。
    
    // 全局註冊
    // 須要在Vue實例化以前進行
    // 聲明完再安裝
    Vue.component('hello', myComponent);
    // 局部註冊
    new Vue({
        el: '#app',
        components: {
            'hello': myComponent
        }
    })

組件的prop可設置驗證，即規定prop的類型，只有知足類型說明的才能正常接受數據。這個時候，props使用對象進行聲明，而再也不使用數組的形式。改寫上面的例子：

var myComponent = {
   template: '<div>this is a component</div>',
    data: function() {
        return {
            message: 'this is within the component'
        }
    },
    props: {
        name: String
    }
}

感慨：我以爲我抓不住點，朦朦朧朧地，總感受還差一點什麼。子組件和父組件，應該就是子類和父類的區別。子類在建立的時候，須要傳入一組參數實現specialization。

總結：

• 建立子組件，至關於建立子類，須要傳入參數對象（該參數對象就是組件聲明，這裏記做parameters）

• 父組件向子組件能夠直接傳入字符串，或者經過屬性傳入，以下所示：

  • <hello name="luuuuu"></hello>   // 'luuuuu' 是字符串
    <hello :name="toChild"></hello> // toChild 是變量

Vue單組件文件

import Second from './second.vue'

export default {
  data () {
    return {
      msg: "Second Component",
      toChild: "xiaoluu"
    };
  },
  components: {
    Second
  }
}

• 每個組件，export default出來的是組件的配置對象，也就是上面提到的parameters
• webpack中使用vue-loader加載.vue組件文件

import 和 export 語法說明

vue組件中用到了es6的語法，包括import和export，模塊的引入和輸出須要它們聲明。
模塊是局部的，有做用域限制。一般，由模塊向外暴露function, object 還有 primitive values等，繼而被其餘模塊引入調用。
模塊中，使用export暴露，使用import引入。
export default 表示只暴露出一個接口，能夠是初始值，能夠是函數，能夠是類，能夠是對象，等等等。vue components單組件模塊中暴露的是一個對象（組件聲明的參數對象，用來描述component的對象字面量）。

// export
// export有兩種方式：定義後當即調用；先定義後調用（模塊名稱須要使用 { } 包裹）
export { myFunction }
export { myObject }
export default {}
export const myObject = {}
export function () {}

// import
import defaultModule from './base'
import {boo, foo} from './base'
import {boo as haa} from './base'

import, export和require, module.exports, exports的區別

相信，這兩組語法不少人都遇到過，並且也會被其所困擾，功能是同樣的，可是比較奇怪的是，有時候就是不能替換使用，爲何呀？
import 和 export 是es6模塊語法，而 require 和 module.exports, exports 是Commonjs的模塊規範。
若是想了解更多關於這二者的區別和使用方法，能夠參考這篇文章：module.exports,exports,export和export default,import與require區別與聯繫。簡要提點(絕大部分摘自上述博文)：

• 在module.exports中，module指當前模塊，其爲對象，有屬性exports，模塊輸出，都是掛載到module.exports上輸出的；使用require加載模塊，其實是加載該模塊的module.exports屬性。
• 其實exports變量是指向module.exports，加載模塊實際是加載該模塊的module.exports。
• 因而咱們能夠直接在 exports 對象上添加方法，表示對外輸出的接口，如同在module.exports上添加同樣。注意，不能直接將exports變量指向一個值，由於這樣等於切斷了exports與module.exports的聯繫。(相似於function的prototype屬性)

另外，你可能還會疑惑何時用import，何時用require，由於看起來功能都是同樣的。應該是這樣的：前端組件和模塊中，使用import和export語法，其他狀況（node開發）使用commonjs語法。（vue組件中使用import語法，可是webpack等其餘配置中使用的是commonjs語法）

Vue腳手架配置文件說明

咔咔地就到了vue腳手架這裏~ 對腳手架裏面的配置文件仍是須要了解一下的~
參考這裏的配置說明博客：vue2.0腳手架的webpack 配置文件分析
如下內容是個人讀後感：

• 項目生產環境和開發環境的配置思路，和我以前作的項目有所不一樣。它並無用到外部的set NODE_ENV = development 指令，仍是將開發環境和生產環境的入口分開，開發環境引入開發環境的配置，生產環境則引入生產環境的配置。
• 開發環境下，使用了一些中間件，本地啓動一個服務器，經過熱啓動配置等，實現快速開發。
• webpack被咱們掛載到了express服務上。
• webpack插件之html-webpack-plugin：html-webpack-plugin用法全解。這個插件會在webpack目標文件夾下產生一個html文件（根據你提供的模版，插入全部生成的內容，以及外部資源連接等）。這就有點像我每次gulp構建dist目錄時，總要把index.html複製一份到dist文件夾下，保持dist和src目錄的分離（注意，不是index.html的徹底複製哦，若是須要徹底複製，可使用copy-webpack-plugin插件）。
• webpack重要的三個概念是：打包（核心概念），資源加載器loader（將非js資源轉換成js，便於打包），插件（一些好玩的附件）。
• 生產環境下的webpack的配置，須要涉及到前端的靜態資源自動化處理，好比js，css的壓縮（webpack.optimize.UglifyJsPlugin， optimize-css-assets-webpack-plugin），靜態資源版本控制（我猜的~~），服務器gzip壓縮（compression-webpack-plugin）等。

Vue坑——剛纔一不當心遇到的

• webpack和vue components結合使用，圖片的引入和路徑問題。

  • 圖片的地址是相對於服務器的根目錄，因此要在開發的時候啓動服務器，不然會報錯

#HTML
    <img :src="'./' + imgUrls.demo01" alt="demo"> // 本地可正常打開
    <img :src="imgUrls.demo01" alt="demo"> // 配置服務器後正常打開
#JS
    import demo01 from './1.jpg'
    export default {
      data () {
        return {
          imgUrls:{
            demo01
          }
        };
      }
    }

• 經過vue-cli初始化vue項目時，安裝依賴包時出了問題，提示有權限問題，可是我明明使用了管理員權限。後來我改用git bash shell就沒有再報錯。windows下，cmd和git bash來回切換的節奏。
• vue中使用自定義事件必定要當心啊，$on註冊監聽器後，組件銷燬時須要使用$off移除事件監聽器，否則就會產生意外bug。