Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

时间 2019-12-11

标签 vue 安装脚手架过滤器生命周期钩子函数 router 基本使用繁體版

原文原文链接

1、安装脚手架

一、下载node.js，本文下载版本为node-v8.12.0-x64.msi，一键式安装。前端

二、安装完成后，打开终端，输入node，可进入node环境（两次ctrl+c退出），以下图：vue

三、查看版本，以下图：node

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

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

　　执行结果以下：git

五、安装脚手架github

　　依次执行下面两条命令：ajax

 
         npm install  
         - 
         g @vue 
         / 
         cli

 
         npm install  
         - 
         g @vue 
         / 
         cli 
         - 
         init               
         / 
         /  
         注释：这是拉取cli版本 
         2 
         的命令

　　CLI3版本的文档：https://cli.vuejs.org/zh/guide/vue-router

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

六、执行完毕后输入vue -V验证是否成功，以下图：vue-cli

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>

五、注意