資源地址：
https://www.talkingcoder.com/article/6310724958473489215

一、單頁面富應(yīng)用（SPA）和路由

• 何為SPA：
  在前后端分離的基礎(chǔ)上再加一層前端路由
• 前端路由：
  由前端來維護(hù)一個路由規(guī)則。
  實現(xiàn)方式2種：
  1、利用url的錨點 #
  2、html5的history模式

二、編寫可復(fù)用的代碼、模塊化、組件

把一個頁面分成不同的模塊，再組裝。
模塊化 是一種開發(fā)模式，組件 就是這種模式的具體實現(xiàn)。
代碼復(fù)用 ：不同項目，不同文件，不同人員都可以使用

三、vue的路由和它的組件化

常見:vue.js+vue-router+webpack

1、組件的構(gòu)造

vue組件特點：可插拔、獨立作用域、觀察者模式、完整生命周期

Vue.component( 'child',{ //child為組件的名稱
    props: ['msg'],  //從父級通過html特性傳遞過來的數(shù)據(jù)，它可以是字符串、數(shù)字、布爾、數(shù)組、對象，默認(rèn)是單向的，也可以設(shè)置為雙向綁定的。props里的參數(shù)可以直接通過像this.msg這種方式調(diào)用，這與data的里的數(shù)據(jù)是一樣的。
    template: '<span>{{msg}}</span>',  //組件使用的html片段，可以直接是字符串，也可以像'#child'這樣標(biāo)識一個dom節(jié)點
    data: function(){
      return  {
        title: 'libra'
      },
    methods: {},
    ready:function() {},  //在組件準(zhǔn)備好時的一個回調(diào)，一般在這里我們可以使用獲取數(shù)據(jù)、實例化第三方組件、綁定事件等
    beforeDestroy: function() {},//在組件即將被銷毀時觸發(fā)回調(diào)，在這里進(jìn)行銷毀自定義的實例、解綁自定義事件、定時器等。
    events:{}
 });

組件格式類似于vue實例，有methods和data，區(qū)別就是組件的data通過function返回一個對象。

2、如何使用組件

組件一般由他的父級來顯示調(diào)用的

<child :msg="msg1"></child>
<child :msg.sync="msg2"></child>
new Vue({
    data: {
        msg1: 'Hello',
        msg2: '你好'
    }
})

上例使用了兩次child組件，使用props傳遞了一個參數(shù)msg，并第二個組件的參數(shù)是雙向綁定的，在雙向綁定后，無論修改父級還是子元素的msg，雙方的數(shù)據(jù)和view都會響應(yīng)到，而單向綁定后，子組件修改是不會影響到父級的。

在渲染完，<child>的內(nèi)容就會替換為組件template內(nèi)的字符串了，雖然使用的是同一個child組件，但是兩次使用的作用域是獨立的，這也是為什么在組件內(nèi)data要使用function來返回一個對象的原因。

3、父子組件間的通信

• 在vue中，父子之間的通信主要通過事件來完成，這就是觀察者模式。父組件通過Vue內(nèi)置的dispatch()向上派發(fā)事件和傳遞數(shù)據(jù)，雙方都可以在events對象內(nèi)接收自定義事件，并且處理各自的業(yè)務(wù)邏輯。
• 使用v-ref來標(biāo)識組件

<child :msg="msg1" v-ref:child1></child>
<child :msg.sync="msg2" v-ref:child2></child>
new Vue({
    data: {
        msg1: 'Hello，TalkingCoder',
        msg2: '你好，TalkingCoder'
    },
    methods: {
        sendData: function() {
            this.$refs.child1.$emit('set-data', {});
            this.$refs.child2.$emit('set-data', {});
        }
    }
})
通過$refs就可以給指定的組件觸發(fā)事件了，事實上，通過$refs是可以獲取到子組件的整個實例的。

<child :msg="msg1" v-ref:child1 @child-event="handler1"></child>
<child :msg.sync="msg2" v-ref:child2 @child-event="handler2"></child>
new Vue({
    data: {
        msg1: 'Hello，TalkingCoder',
        msg2: '你好，TalkingCoder'
    },
    methods: {
        sendData: function() {
            this.$refs.child1.$emit('set-data', {});
            this.$refs.child2.$emit('set-data', {});
        },
        handler1: function() {
            // ...
        },
        handler2: function() {
            // ...
        }
    }
})
//@xxx或v-bind:xxx綁定自定義事件

4、內(nèi)容分發(fā)slot

使用slot來分發(fā)自定義的內(nèi)容

Paste_Image.png

<div>
    <h1>提示</h1>
    <slot name="content"></slot>
    <span>確定</span>
    <span>取消</span>
</div>
//父組件調(diào)用子組件：
<confirm>
    <p slot="content">歡迎來到TalkingCoder</p>
</confirm>
//最終渲染完的內(nèi)容為：
<div>
    <h1>提示</h1>
    <p>歡迎來到TalkingCoder</p>
    <span>確定</span>
    <span>取消</span>
</div>

5、編寫可復(fù)用組件

可復(fù)用組件要定義一個清晰的公開接口
vue組件API：

• prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件
• 事件 允許組件觸發(fā)外部環(huán)境的action
• slot 允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)

<my-component  :foo="baz" :bar="qux" @event-a="doThis"  @event-b="doThat">
  <img slot="icon" src="">
  <p slot="main-text">Hello!</p>
</my-component>

6、路由、組件和組件化

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Env from './config/env';
Vue.use(VueRouter); //安裝路由模塊
// 開啟debug模式
Vue.config.debug = true;
// 路由配置
var router = new VueRouter({
    history: Env != 'production'
});
//設(shè)置路由匹配規(guī)則
router.map({
    '/index': {    //匹配127.0.0.1:8080/index
        name: 'index',
        component: function (resolve) {
            //在component的回調(diào)里使用require（）異步按需加載
            require(['./routers/index.vue'], resolve);
        }
    }
});
//vue-router還有一些鉤子函數(shù)，通俗就是在發(fā)生一次路由時某個狀態(tài)的一些回調(diào)，如下
router.beforeEach(function () {   //路由切換開始時調(diào)用
    window.scrollTo(0, 0);
});
router.afterEach(function (transition) {  //路由成功切換到激活狀態(tài)時調(diào)用，一般寫一些自動導(dǎo)航或自動面包屑的全局工作
console.log(transition);
});
router.redirect({    //重定向
    '*': "/index"   //找不到路由時可以跳轉(zhuǎn)到指定路由
});
router.start(App, '#app');  //app.vue組件掛載到#app內(nèi)

• main,js文件，是項目跑起來后第一個執(zhí)行的js文件。
• vue-router支持匹配帶參數(shù)的路由，比如'/user/:id'可以匹配到'/user/123'，或者'/user/any/bar'可以匹配到'/user/a/b/bar'，:id是參數(shù)，any是全匹配，
• 路徑跳轉(zhuǎn)

<a v-link="{path: '/index'}">首頁</a>
<!--或者其他標(biāo)簽頁可以-->
<p v-link="{path: '/index'}">首頁</p>
//在js中跳轉(zhuǎn)：
module.exports = {
    data: function() {return {} },
    methods: {
        go: function() {
            console.log(this.$route);//得到當(dāng)前路由狀態(tài)信息
            console.log(this.$router); //
            this.$router.go('/index');
        }
    }
}