Vue 3 --安裝腳手架、過濾器、生命週期的鉤子函數、vue-router基本使用

1、安裝腳手架

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

二、安裝完成後，打開終端，輸入node，可進入node環境（兩次ctrl+c退出），以下圖：

三、查看版本，以下圖：

 

四、在成功安裝node.js（即可以成功查看版本如上圖）的前提下，再安裝淘寶npm（http://npm.taobao.org/），命令以下：

1	npm install  - g cnpm  - - registry = https: / / registry.npm.taobao.org

　　執行結果以下：

五、安裝腳手架

　　依次執行下面兩條命令：

1	npm install  - g @vue / cli

1	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--

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

2、過濾器 

一、過濾器分爲局部過濾器和全局過濾器，定義和使用以下：

<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方法；

3、生命週期的鉤子函數

　　每一個 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：若是開了定時器，可在此函數中關閉定時器；

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

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

　　vue-router是vue的核心插件，它要依賴vue。

　　爲何要使用單頁面應用？

　　由於傳統的路由跳轉，若是後端資源過多，會致使頁面出現白屏現象，讓前端來作路由，在某個生命週期的鉤子函數中發送ajax，數據驅動視圖。爲了用戶體驗。

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

5、vue-router的基本使用

　　Vue Router是Vue.js的官方路由器。它與Vue.js核心深度集成，使用Vue.js構建單頁應用程序變得垂手可得。

　　注意：若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)，至關於給Vue的原型上掛載了一個屬性。

一、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>

二、命名路由

　　有時候，經過一個名稱來標識一個路由顯得更方便一些，特別是在連接一個路由，或者是執行一些跳轉的時候。你能夠在建立 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>

三、動態路由

<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對象在從控制檯輸出結果以下：

四、編程式導航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>

五、注意

　　組件中的函數寫在methods屬性中，created等屬性中也能夠定義函數，咱們有時候能夠將在created中執行的方法定義在methods中，在created中執行。