一、安裝腳手架

1、下載node.js，本文下載版本為node-v8.12.0-x64.msi，一鍵式安裝。

2、安裝按成後，開啟終端，輸入node，可進入node環境（兩次ctrl+c退出），如下圖：

3 , 檢視版本:

4、在成功安裝node.js的前提下（即檢視版本如上圖），再安裝淘寶npm（http://npm.taobao.org/），如下圖：

命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

5、安裝腳手架

依次執行下面兩條命令：

npm install -g @vue/cli

npm install -g @vue/cli-init              註釋：這是拉取cli版本2的命令

CLI3版本的文件：https://cli.vuejs.org/zh/guide/

CLI2版本的文件：https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

6、執行完畢後輸入vue -V驗證是否成功，如下圖：

二 、過濾器

1、過濾器分為區域性過濾器和全域性過濾器，定義和使用如下：

<div id="app">
   <App />
</div>
<script>
    // 定義全域性過濾器（任意元件都可以使用）
    Vue.filter('myTime', function (val, formatStr) {
        return moment(val).format(formatStr)
    });
    let App 
 
= {
        data(){
            return {
                msg: "hello world",
                time: new Date()
            }
        },
        // 在template中使用過濾器
        template:`
            <div>
                <h3>我是一個APP</h3>
                <p>區域性過濾器{{ msg | myReverse }}</p>
                <p>全域性過濾器{{ time | myTime('YYYY-MM-DD') }}</p>
            </div>
        `,
        // 定義區域性過濾器（只能在本元件內使用）
        filters:{
            myReverse:function (val) {
                return val.split('').reverse().join('')
            }
        }
    };

    new Vue({
        el: "#app",
        data(){
            return {

            }
        },
        components:{
            App
        }
    });
</script>

總結：

1）區域性過濾器：在當前元件內部使用；

2）全域性過濾器：只要過濾器一建立，在任何元件中都能使用；

3）過濾器其實就是給某些資料“添油加醋”；

4）上面示例用到了moment.js（一個處理時間的類庫：http://momentjs.cn/）中moment方法；

三、生命週期的鉤子函式

- beforeCreate
- created 元件建立完成，可以發起ajax（XMLHttpRequest 簡稱XHR  axios  fetch  $.ajax()）請求,實現資料驅動檢視
- beforeMount
- mounted DOM掛載完成
- beforeUpdate 獲取原始DOM
- updated  獲取更新之後的DOM
- beforeDestory 元件銷燬之前
- destoryed 元件銷燬之後
- activated   啟用當前元件   vue提供的內建元件`<keep-alive></keep-alive>`
- deactivated 停用當前元件

每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。

我們可以在官方文件的API 的選項/生命週期鉤子看到有如下生命週期鉤子函式：

<div id="app">
    <App></App>   <!-- 使用區域性元件App -->
</div>
<script>
    // 宣告一個區域性元件Test
    let Test = {
        data(){
            return {
                msg: "原資料",
                count: 0,
                timer: null
            }
        },
        template:`
            <div id="test">
                <div id="box">{{ msg }}</div>
                <p>定時器{{ count }}</p>
                <button @click="change">修改</button>
            </div>
        `,
        methods:{
            change(){
                this.msg = '修改後的資料';
                // 查詢選擇器，獲取id=box的元素
                document.querySelector('#box').style.color='red';
            }
        },
        beforeCreate(){
            // 元件建立之前，獲取不到資料屬性
            console.log(this.msg);  // undefined
        },
        created(){
            // 在該元件例項建立完成後被立即呼叫，可以獲取資料屬性，重要
            // 資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥
            // 然而，掛載階段還沒開始，$el 屬性目前不可見
            // created中可以操作資料，可實現vue==》頁面(即資料驅動檢視)的影響
            // 應用：傳送ajax請求
            console.log(this.msg);
            // this.msg = '嘿嘿黑';
            // 開一個定時器，在destroyed中銷燬
            this.timer = setInterval(()=>{
                this.count++;
            },1000);
        },
        beforeMount(){
            // 掛載資料到DOM之前會呼叫，無法獲取到該元件DOM
            console.log(document.getElementById('app'));
        },
        mounted(){
            // 這個地方可以操作DOM，重要
            // 但是能用資料驅動完成的就不要做DOM操作
            // 掛載資料到DOM之後會呼叫，可以獲取到真實存在的DOM元素
            console.log(document.getElementById('app'));
        },
        beforeUpdate(){
            // 資料更新時呼叫，發生在虛擬 DOM 打補丁之前
            // 應用：獲取更新之前的DOM
            console.log(document.getElementById('app').innerHTML);
        },
        updated(){
            // 由於資料更改導致的虛擬DOM重新渲染和打補丁，在這之後會呼叫該鉤子
            // 應用：獲取最新的DOM
            console.log(document.getElementById('app').innerHTML);
        },
        beforeDestroy(){
            // 例項銷燬之前呼叫。在這一步，例項仍然完全可用
            console.log('beforeDestroy');
        },
        destroyed(){
            // Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，
            // 所有的事件監聽器會被移除，所有的子例項也會被銷燬
            // 應用：清定時器（定時器有開就要清，佔記憶體）
            // created中開定時器，destroyed中消定時器
            console.log('destroyed');
            clearInterval(this.timer);
            console.log('------', this.timer)
        },
        // 建立和銷燬比較消耗效能，可以用啟用（activated）和停用（deactivated）
        // 啟用和停用要藉助vue的內建元件keep-alive元件
        // 它能讓當前元件放在keep-alive中快取起來
        activated(){
            // keep-alive 元件啟用時呼叫
            console.log('元件被激活了');
        },
        deactivated(){
            // keep-alive 元件停用時呼叫
            console.log('元件被停用了');
        }
    };
    // 宣告一個區域性元件App
    let App = {
        data(){
            return {
                isShow:true
            }
        },
        template:`
            <div class="app">
                <keep-alive>
                    <Test v-if="isShow"></Test>
                </keep-alive>
                <button @click="clickHandler">改變test元件的生死</button>
            </div>
        `,
        methods:{
            // 演示beforeDestroy和destroyed方法的事件
            clickHandler(){
                this.isShow = !this.isShow
            }
        },
        components:{
            Test
        }
    };
    // Vue例項物件，根元件，可以沒有template屬性，直接在el中使用子元件
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components:{
            App  // 掛載區域性元件App
        }
    })
</script>

總結（created和mounted是重點）：

created：傳送ajax，獲取資料，實現資料驅動檢視；

mounted：獲取真實DOM；

activated：啟用當前元件；

deactivated：停用當前元件，依賴vue提供的內建元件，主要作用是讓元件產生快取；

destroyed：如果開了定時器，可在此函式中關閉定時器；

四、VUE的全家桶 （vue + vue-router + vuex）

vue + vue-router主要來做SPA（Single Page Application），即單頁面應用。

vue-router是vue的核心外掛，它要依賴vue。

為什麼要使用單頁面應用？

傳統的路由跳轉，如果後端資源過多，會導致頁面出現白屏現象，讓前端來做路由，在某個生命週期的鉤子函式中傳送ajax，資料驅動檢視。為了使用者體驗。

單頁面應用的網站有路飛學城、稀土掘金（https://juejin.im），和網易雲音樂。

五、vue-router的基本使用

Vue Router是Vue.js的官方路由器。它與Vue.js核心深度整合，使用Vue.js構建單頁應用程式變得輕而易舉。

注意：如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)，相當於給Vue的原型上掛載了一個屬性。

好處：減少DOM操作

不好處：後期會不易維護

前後端分離：

分工明確

前端只做前端的事情（頁面+互動+相容+封裝 +class+優化） vue+vue+router+vuex+axios+element-ui

後端只做後端的事情（介面 （表的操作+業務邏輯+封裝 +class+優化））restframework 框架 +django +sqlite + redis

1、vue-router基本使用

<div id="app"></div>
<!-- 先引入vue.js，再引入vue-router.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // 建立Home元件
    const Home = {
        data(){
            return {}
        },
        template: `<div>我是首頁</div>`
    };
    // 建立Course元件
    const Course = {
        data(){
            return {}
        },
        template: `<div>我是免費課程</div>`
    };
    // 建立路由
    const router = new VueRouter({
        // 定義路由規則
        routes: [
            {
                path: '/',
                redirect: '/home'    // 重定向
            },
            {
                path: '/home',
                component: Home
            },
            {
                path: '/course',
                component: Course
            }
        ]
    });
    // 宣告一個元件App
    let App = {
        data(){
            return {}
        },
        // router-link和router-view是vue-router提供的兩個全域性元件
        // router-link會渲染成a標籤，to屬性會被渲染成href屬性
        // router-view是路由元件的出口，就是元件內容會被渲染到router-view中
        template:`
            <div class="app">
                <div class="header">
                    <router-link to='/'>首頁</router-link>
                    <router-link to='/course'>免費課程</router-link>
                </div>
                <router-view></router-view>
            </div>
        `
    };
    // Vue例項物件
    new Vue({
        el: '#app',
        router,  // 使用router屬性掛載router，相當於router:router
        data() {
            return {}
        },
        template:`<App></App>`,
        components:{
            App  // 掛載元件App
        }
    })
</script>

2、命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在連結一個路由，或者是執行一些跳轉的時候。你可以在建立 Router 例項的時候，在 routes 配置中給某個路由設定名稱。如下：

// 建立路由
const router = new VueRouter({
    // 定義路由規則
    routes: [
        {
            path: '/',
            redirect: '/home'    // 重定向
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/course',
         name: 'course',
            component: Course
        }
    ]
});

要連結到一個命名路由，可以給 router-link 的 to 屬性傳一個物件，如下：

<router-link :to='{name:"home"}'>首頁</router-link>
<router-link :to='{name:"course"}'>免費課程</router-link>

3、動態路由

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // 建立User元件
    const User = {
        data(){
            return {
                user_id: null
            }
        },
        template: `<div>我是使用者{{ user_id }}</div>`,
        // 通過注入路由器，我們可以在任何元件內
        // 通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由
        // 注意，當使用路由引數時，如從/user/1到/user/2原來的元件例項會被複用
        // 因為兩個路由都渲染一個元件，比起銷燬再建立，複用則顯得更加高效
        // 不過，這也意味著元件的生命週期鉤子不會再被呼叫
        // 所以在/user/1與/user/2 切換時，created方法只調用一次，即只打印一次
        created(){
            console.log(this.$route);  // 路由資訊物件
            console.log(this.$router);  // 路由物件VueRouter
        },
        // 複用元件時，想對路由引數的變化作出響應的話，你可以用 watch (監測變化) 檢聽$route 物件
        watch: {
            '$route'(to, from) {
                console.log(to);
                console.log(from);
                // 模擬修改資料
                this.user_id = to.params.id;
                // 實際中可以傳送ajax
            }
        }
    };
    // 建立路由
    const router = new VueRouter({
        // 定義路由規則
        routes: [
            {
                path: '/user/:id',     // 例：/user/2
                name: 'user',
                component: User
            }
        ]
    });
    // 宣告一個元件App
    let App = {
        data(){
            return {}
        },
        // router-link和router-view是vue-router提供的兩個全域性元件
        // router-link會渲染成a標籤，to屬性會被渲染成href屬性
        // router-view是路由元件的出口，就是元件內容會被渲染到router-view中
        template:`
            <div class="app">
                <div class="header">
                    <router-link :to='{name:"user", params:{id:1}}'>
                使用者1
             </router-link>
                    <router-link :to='{name:"user", params:{id:2}}'>
                使用者2
             </router-link>
                </div>
                <router-view></router-view>
            </div>
        `
    };
    // Vue例項物件
    new Vue({
        el: '#app',
        router,  // 使用router屬性掛載router，相當於router:router
        data() {
            return {}
        },
        template:`<App></App>`,
        components:{
            App  // 掛載元件App
        }
    })
</script>

示例中$route物件在從控制檯輸出結果如下：

 4、程式設計式導航vs宣告式導航

除了使用<router-link>建立 a 標籤來定義導航連結（宣告式導航），我們還可以藉助 router 的例項方法，通過編寫程式碼來實現（程式設計式導航）。如下：

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // 建立User元件
    const User = {
        data(){
            return {
                user_id: null
            }
        },
        template: `<div>
                <p>我是使用者{{ user_id }}</p>
                <button @click="clickHandler">跳轉首頁</button>
            </div>
        `,
        methods:{
            // 程式設計式導航
            clickHandler(){
                this.$router.push({
                    name:"home"
                })
            }
        }
    };
    // 建立Home元件
    const Home = {
        data(){
            return {}
        },
        template:`
            <div>我是首頁</div>
        `
    };
    // 建立路由
    const router = new VueRouter({
        // 定義路由規則
        routes: [
            {
                path: '/user/:id',
                name: 'user',
                component: User
            },
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ]
    });
    // 宣告一個元件App
    let App = {
        data(){
            return {}
        },
        // 下面使用router-link建立a標籤是宣告式導航
        template:`
            <div class="app">
                <div class="header">
                    <router-link :to='{name:"user", params:{id:1}}'>
                使用者1
             </router-link>
                    <router-link :to='{name:"user", params:{id:2}}'>
                使用者2
             </router-link>
                </div>
                <router-view></router-view>
            </div>
        `
    };
    // Vue例項物件
    new Vue({
        el: '#app',
        router,  // 使用router屬性掛載router，相當於router:router
        data() {
            return {}
        },
        template:`<App></App>`,
        components:{
            App  // 掛載元件App
        }
    })
</script>

5、注意

元件中的函式寫在methods屬性中，created等屬性中也可以定義函式，我們有時候可以將在created中執行的方法定義在methods中，在created中執行。