Vue系列（三）：組件及數據傳遞、路由、單文件組件、vue-cli腳手架

<h3><a href="https://segmentfault.com/a/1190000012967337"><strong>上一篇：</strong>Vue系列（二）：發送Ajax、JSONP請求、Vue生命週期及實例屬性和方法、自定義指令與過渡</a></h3> <h2>1、 組件component</h2> <h3>1. 什麼是組件？</h3>

組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼
組件是自定義元素（對象）

<h3>2. 定義組件的方式</h3>

方式1：先建立組件構造器，而後由組件構造器建立組件
方式2：直接建立組件

<div id="itany">
        <hello></hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 方式1：先建立組件構造器，而後由組件構造器建立組件
         */
        //1.使用Vue.extend()建立一個組件構造器
        var MyComponent=Vue.extend({
            template:'<h3>Hello World</h3>'
        });
        //2.使用Vue.component(標籤名,組件構造器)，根據組件構造器來建立組件
        Vue.component('hello',MyComponent);
        
        /**
         * 方式2：直接建立組件(推薦)
         */
        // Vue.component('world',{
        Vue.component('my-world',{
            template:'<h1>你好，世界</h1>'
        });
        var vm=new Vue({ //這裏的vm也是一個組件，稱爲根組件Root
            el:'#itany',
            data:{
                msg:'網博'
            }
        });    
    </script>

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/01.html" rel="nofollow noreferrer">定義組件</a></p> <h3>3. 組件的分類</h3>

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

<div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 全局組件，能夠在全部vue實例中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data:function(){ //在組件中存儲數據時，必須以函數形式，函數返回一個對象
                return {
                    name:'alice'
                }
            }
        });
        /**
         * 局部組件，只能在當前vue實例中使用
         */
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom'
            },
            components:{ //局部組件
                'my-world':{
                    template:'<h3>{{age}}</h3>',
                    data(){
                        return {
                            age:25
                        }
                    }
                }
            }
        });    
    </script>

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/02.html" rel="nofollow noreferrer">組件的分類</a></p> <h3>4. 引用模板</h3>

將組件內容放到模板<template>中並引用,必須有且只有一個根元素

<div id="itany">
        <my-hello></my-hello>
        <my-hello></my-hello>
    </div>

    <template id="wbs">
        <!-- <template>必須有且只有一個根元素 -->
        <div>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </div>
    </template>

    <script>
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{
                    name:'wbs17022',  //指定組件的名稱，默認爲標籤名，能夠不設置
                    template:'#wbs',
                    data(){
                        return {
                            msg:'歡迎來到南京網博',
                            arr:['tom','jack','mike']
                        }
                    }
                }
                
            }
        });    
    </script>

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/03.html" rel="nofollow noreferrer">引用模板</a></p> <h3>5. 動態組件</h3>

<component :is="">組件
    多個組件使用同一個掛載點，而後動態的在它們之間切換    

<keep-alive>組件

<div id="itany">
        <button @click="flag='my-hello'">顯示hello組件</button>
        <button @click="flag='my-world'">顯示world組件</button>


        <div>
            <!-- 使用keep-alive組件緩存非活動組件，能夠保留狀態，避免從新渲染，默認每次都會銷燬非活動組件並從新建立 -->
            <keep-alive>
                <component :is="flag"></component>    
            </keep-alive>
        </div>
    </div>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:'my-hello'
            },
            components:{
                'my-hello':{
                    template:'<h3>我是hello組件：{{x}}</h3>',
                    data(){
                        return {
                            x:Math.random()
                        }
                    }
                },
                'my-world':{
                    template:'<h3>我是world組件：{{y}}</h3>',
                    data(){
                        return {
                            y:Math.random()
                        }
                    }
                }
            }
        });    
    </script>

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/04.html" rel="nofollow noreferrer">動態組件</a></p> <h2>2、 組件間數據傳遞</h2> <h3>1. 父子組件</h3> <p>在一個組件內部定義另外一個組件，稱爲父子組件 <br><strong>子組件只能在父組件內部使用</strong><br><strong>默認狀況下，子組件沒法訪問父組件中的數據，每一個組件實例的做用域是獨立的</strong></p> <h3>2. 組件間數據傳遞 （通訊）</h3> <h4>2.1 子組件訪問父組件的數據</h4>

a)在調用子組件時，綁定想要獲取的父組件中的數據
b)在子組件內部，使用props選項聲明獲取的數據，即接收來自父組件的數據
總結：父組件經過props向下傳遞數據給子組件

<p><strong>注：組件中的數據共有三種形式：</strong><code>data</code>、<code>props</code>、<code>computed</code></p> <h4>2.2 父組件訪問子組件的數據</h4>

a)在子組件中使用vm.$emit(事件名,數據)觸發一個自定義事件，事件名自定義
b)父組件在使用子組件的地方監聽子組件觸發的事件，並在父組件中定義方法，用來獲取數據
總結：子組件經過events給父組件發送消息，實際上就是子組件把本身的數據發送到父組件

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/05.html" rel="nofollow noreferrer">父子組件及組件間數據傳遞</a></p> <h3>3. 單向數據流</h3>

props是單向綁定的，當父組件的屬性變化時，將傳導給子組件，可是不會反過來
並且不容許子組件直接修改父組件中的數據，報錯
解決方式：
    方式1：若是子組件想把它做爲局部數據來使用，能夠將數據存入另外一個變量中再操做，不影響父組件中的數據
    方式2：若是子組件想修改數據而且同步更新到父組件，兩個方法：
        a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又開始支持）
            須要顯式地觸發一個更新事件
        b.能夠將父組件中的數據包裝成對象，而後在子組件中修改對象的屬性(由於對象是引用類型，指向同一個內存空間)，推薦

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/06.html" rel="nofollow noreferrer">單向數據流</a></p> <h3>4. 非父子組件間的通訊</h3>

非父子組件間的通訊，能夠經過一個空的Vue實例做爲中央事件總線（事件中心），用它來觸發事件和監聽事件

var Event=new Vue();
Event.$emit(事件名,數據);
Event.$on(事件名,data => {});

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/07.html" rel="nofollow noreferrer">非父子組件間的通訊</a></p> <h2>3、 slot內容分發</h2>

本意：位置、槽
做用：用來獲取組件中的原內容，相似angular中的transclude指令

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/08.html" rel="nofollow noreferrer">slot內容分發</a></p> <h2>4、 vue-router路由</h2> <h3>1. 簡介</h3>

使用Vue.js開發SPA（Single Page Application）單頁面應用
根據不一樣url地址，顯示不一樣的內容，但顯示在同一個頁面中，稱爲單頁面應用

<p><a href="https://router.vuejs.org/zh-cn" rel="nofollow noreferrer">參考</a></p>

bower info vue-router
cnpm install vue-router -S

<h3>2. 基本用法</h3>

a.佈局
b.配置路由

<div id="itany">
        <div>
            <!-- 使用router-link組件來定義導航，to屬性指定連接url -->
            <router-link to="/home">主頁</router-link>
            <router-link to="/news">新聞</router-link>
        </div>
        <div>
            <!-- 路由出口 -->
            <!-- 路由匹配到的組件將渲染在這裏 -->
            <!-- router-view用來顯示路由內容 -->
            <router-view></router-view>
        </div>
</div>

<script>
        //1.定義組件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var News={
            template:'<h3>我是新聞</h3>'
        }
        //2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'} //重定向
        ]
        //3.建立路由實例
        const router=new VueRouter({
            routes, //簡寫，至關於routes:routes
            // mode:'history', //更改模式
            linkActiveClass:'active' //更新活動連接的class類名
        });
        //4.建立根實例並將路由掛載到Vue實例上
        new Vue({
            el:'#itany',
            router //注入路由
        });
    </script>

<p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/09.html" rel="nofollow noreferrer">路由基本用法</a></p> <h3>3. 路由嵌套和參數傳遞</h3>

傳參的兩種形式：
    a.查詢字符串：login?name=tom&pwd=123
        {{$route.query}}
    b.rest風格url：regist/alice/456
        {{$route.params}}

<h3>4. 路由實例的方法</h3>

router.push()  添加路由，功能上與<route-link>相同
router.replace() 替換路由，不產生歷史記錄

<h3>5. 路由結合動畫</h3> <p><a href="https://github.com/tcyfree/VueLearn/blob/master/day03/10.html" rel="nofollow noreferrer">路由嵌套和參數傳遞、動畫</a></p> <h2>5、 單文件組件</h2> <h3>1. .vue文件</h3>

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

.vue文件由三部分組成：<template>、<style>、<script>
    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js
    </script>

<h3>2. vue-loader</h3>

瀏覽器自己並不認爲.vue文件，因此必須對.vue文件進行加載解析，此時須要vue-loader
相似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
須要注意的是vue-loader是基於webpack的

<h3>3. webpack</h3>

webpack是一個前端資源模板化加載器和打包工具，它可以把各類資源都做爲模塊來使用和處理
實際上，webpack是經過不一樣的loader將這些資源加載後打包，而後輸出打包後文件 
簡單來講，webpack就是一個模塊加載器，全部資源均可以做爲模塊來加載，最後打包輸出

<p><a href="http://webpack.github.io/" rel="nofollow noreferrer">webpack官網</a></p>

webpack版本：v1.x v2.x

webpack有一個核心配置文件：webpack.config.js，必須放在項目根目錄下

<h3>4. 示例，步驟：</h3> <h4>4.1 建立項目，目錄結構 以下：</h4> <p>webpack-demo</p>

|-index.html
|-main.js   入口文件       
|-App.vue   vue文件
|-package.json  工程文件 //npm init --yes
|-webpack.config.js  webpack配置文件
|-.babelrc   Babel配置文件

<h3>4.2 編寫App.vue</h3> <h3>4.3 安裝相關模板</h3>

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

<h3>4.4 編寫main.js</h3>

import Vue from 'vue' //引入內置模塊
import App from './App.vue' //引入自定義模塊，須要加./

render:function(h){ //使用render函數（推薦）渲染組件,和compnents同樣
        return h(App);
    }

/* scoped表示該樣式只在當前組件中有效 */

<h3>4.5 編寫webpack.config.js</h3> <h3>4.6 編寫.babelrc</h3> <h3>4.7 編寫package.json</h3> <h3>4.8 運行測試</h3>

npm run dev

<p><a href="https://github.com/tcyfree/VueLearn/tree/master/day03/webpack-demo" rel="nofollow noreferrer">webpack-demo</a></p> <h2>6、 vue-cli腳手架</h2> <h3>1. 簡介</h3>

vue-cli是一個vue腳手架，能夠快速構造項目結構
vue-cli自己集成了多種項目模板：
    simple  不多簡單
    webpack 包含ESLint代碼規範檢查和unit單元測試等
    webpack-simple 沒有代碼規範檢查和單元測試
    browserify 使用的也比較多
    browserify-simple

<h3>2. 示例，步驟：</h3> <p><a href="https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI" rel="nofollow noreferrer">官網安裝示例</a></p> <h4>2.1 安裝vue-cli，配置vue命令環境</h4>

cnpm install vue-cli -g
vue --version
vue list

<h4>2.2 初始化項目，生成項目模板</h4>

語法：vue init 模板名  項目名

<h4>2.3 進入生成的項目目錄，安裝模塊包</h4>

cd vue-cli-demo
cnpm install

<h4>2.4 運行</h4>

npm run dev  //啓動測試服務
npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到服務器上

<h3>3. 使用webpack模板</h3>

vue init webpack vue-cli-demo2

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

<p><a href="http://eslint.org" rel="nofollow noreferrer">官網</a></p>

問題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

<h3><a href="https://segmentfault.com/a/1190000013036608"><strong>下一篇：</strong>Vue系列（四）：模塊化開發、Elment UI、自定義全局組件（插件）、Vuex</a></h3> <p>參考Vue教學視頻：<a href="http://edu.51cto.com/course/10543.html" rel="nofollow noreferrer">Vue.js 2.0之全家桶系列視頻課程（vue、vue-router、axios、vuex）</a></p>

原文地址：http://www.javashuo.com/article/p-tnzbortr-cp.html