Vue.js 2.0 由淺入深，第三天 day03

標籤：vue.js   vue   vuex   axios   vue-cli   webpack   

## 一、 組件component

### 1. 什麼是組件？

    組件（Component）是 Vue.js 最強大的功能之一。組件可以擴充 HTML 元素，封裝可重用的代碼

    組件是自訂元素（對象）

### 2. 定義組件的方式    

    方式1：先建立組件構造器，然後由組件構造器建立組件

    方式2：直接建立組件

### 3. 組件的分類

    分類：全域群組件、局部組件

### 4. 引用模板

    將組件內容放到模板<template>中並引用

### 5. 動態組件

    <component :is="">組件

        多個組件使用同一個掛載點，然後動態在它們之間切換    

    

    <keep-alive>組件    

## 二、 組件間資料傳遞

    

### 1. 父子組件

    在一個組件內部定義另一個組件，稱為父子組件

    子組件只能在父組件內部使用

    預設情況下，子組件無法訪問父組件中的資料，每個組件執行個體的範圍是獨立的

### 2. 組件間資料傳遞 （通訊）

#### 2.1 子組件訪問父組件的資料

    a)在調用子組件時，綁定想要擷取的父組件中的資料

    b)在子組件內部，使用props選項聲明擷取的資料，即接收來自父組件的資料

    總結：父組件通過props向下傳遞資料給子組件

    註：組件中的資料共有三種形式：data、props、computed

#### 2.2 父組件訪問子組件的資料

    a)在子組件中使用vm.$emit(事件名,資料)觸發一個自訂事件，事件名自訂

    b)父組件在使用子組件的地方監聽子組件觸發的事件，並在父組件中定義方法，用來擷取資料

    總結：子組件通過events給父組件發送訊息，實際上就是子組件把自己的資料發送到父組件

### 3. 單向資料流

    props是單向綁定的，當父組件的屬性變化時，將傳導給子組件，但是不會反過來

    而且不允許子組件直接修改父組件中的資料，報錯

    解決方式：

        方式1：如果子組件想把它作為局部資料來使用，可以將資料存入另一個變數中再操作，不影響父組件中的資料

        方式2：如果子組件想修改資料並且同步更新到父組件，兩個方法：

            a.使用.sync（1.0版本中支援，2.0版本中不支援，2.3版本又開始支援）

                需要顯式地觸發一個更新事件

            b.可以將父組件中的資料封裝成對象，然後在子組件中修改對象的屬性(因為對象是參考型別，指向同一個記憶體空間)，推薦    

### 4. 非父子組件間的通訊

    非父子組件間的通訊，可以通過一個空的Vue執行個體作為中央事件匯流排（事件中心），用它來觸發事件和監聽事件

    var Event=new Vue();

    Event.$emit(事件名,資料);

    Event.$on(事件名,data => {});

## 三、 slot內容分發

    本意：位置、槽

    作用：用來擷取組件中的原內容，類似angular中的transclude指令

## 四、 vue-router路由

### 1. 簡介

    使用Vue.js開發SPA（Single Page Application）單頁面應用

    根據不同url地址，顯示不同的內容，但顯示在同一個頁面中，稱為單頁面應用

  [參考](https://router.vuejs.org/zh-cn)     

    bower info vue-router

    cnpm install vue-router -S

### 2. 基本用法

    a.布局

    b.配置路由

### 3. 路由嵌套和參數傳遞        

    傳參的兩種形式：

        a.查詢字串：login?name=tom&pwd=123

            {{$route.query}}

        b.rest風格url：regist/alice/456

            {{$route.params}}

### 4. 路由執行個體的方法 

    router.push()  添加路由，功能上與<route-link>相同

    router.replace() 替換路由，不產生記錄    

### 5. 路由結合動畫

## 五、 單檔案組件

### 1. .vue檔案

    .vue檔案，稱為單檔案組件，是Vue.js自訂的一種檔案格式，一個.vue檔案就是一個單獨的組件，在檔案內封裝了組件相關的代碼：html、css、js

    .vue檔案由三部分組成：<template>、<style>、<script>

        <template>

            html

        </template>

        <style>

            css

        </style>

        <script>

            js

        </script>

### 2. vue-loader  

    瀏覽器本身並不認為.vue檔案，所以必須對.vue檔案進行載入解析，此時需要vue-loader

    類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等

    需要注意的是vue-loader是基於webpack的     

### 3. webpack

    webpack是一個前端資源模板化載入器和打包工具，它能夠把各種資源都作為模組來使用和處理

    實際上，webpack是通過不同的loader將這些資源載入後打包，然後輸出打包後檔案 

    簡單來說，webpack就是一個模組載入器，所有資源都可以作為模組來載入，最後打包輸出

    [官網](http://webpack.github.io/)     

    webpack版本：v1.x v2.x

    webpack有一個核心設定檔：webpack.config.js，必須放在項目根目錄下

### 4. 樣本，步驟：

    

#### 4.1 建立項目，目錄結構 如下：

webpack-demo

    |-index.html

    |-main.js   入口檔案       

    |-App.vue   vue檔案

    |-package.json  工程檔案

    |-webpack.config.js  webpack設定檔

    |-.babelrc   Babel設定檔

### 4.2 編寫App.vue

### 4.3 安裝相關模板    

    cnpm install vue -S

    cnpm install webpack -D

    cnpm install webpack-dev-server -D

    cnpm install vue-loader -D

    cnpm install vue-html-loader -D

    cnpm install css-loader -D

    cnpm install vue-style-loader -D

    cnpm install file-loader -D

    cnpm install babel-loader -D

    cnpm install babel-core -D

    cnpm install babel-preset-env -D  //根據配置的運行環境自動啟用需要的babel外掛程式

    cnpm install vue-template-compiler -D //先行編譯模板

    合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

### 4.4 編寫main.js    

### 4.5 編寫webpack.config.js

### 4.6 編寫.babelrc    

### 4.7 編寫package.json

### 4.8 運行測試

    npm run dev    

## 六、 vue-cli腳手架 

### 1. 簡介

    vue-cli是一個vue腳手架，可以快速構造項目結構

    vue-cli本身整合了多種項目模板：

        simple  很少簡單

        webpack 包含ESLint代碼規範檢查和unit單元測試等

        webpack-simple 沒有代碼規範檢查和單元測試

        browserify 使用的也比較多

        browserify-simple

### 2. 樣本，步驟：

    

#### 2.1 安裝vue-cli，配置vue命令環境 

    cnpm install vue-cli -g

    vue --version

    vue list

#### 2.2 初始化項目，產生項目模板

    文法：vue init 模板名  項目名

#### 2.3 進入產生的項目目錄，安裝模組包

    cd vue-cli-demo

    cnpm install

#### 2.4 運行

    npm run dev  //啟動測試服務

    npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到伺服器上

### 3. 使用webpack模板

    vue init webpack vue-cli-demo2

    ESLint是用來統一代碼規範和風格的工具，如縮排、空格、符號等，要求比較嚴格

[官網](http://eslint.org)    

    問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制台會報錯：

        GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

    解決方案：

        a)降低Node版本到7.9或以下

        b)修改build/dev-server.js檔案，如下：

            var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler, {

              log: () => {},

              heartbeat:2000 //添加此行

            })

        參考：https://github.com/vuejs-templates/webpack/issues/731    

本文出自 “12392007” 部落格，請務必保留此出處http://12402007.blog.51cto.com/12392007/1951079

Vue.js 2.0 由淺入深，第三天 day03