Vue实例生命周期

vue生命周期之beforeCreate

实例创建之前除标签外，所有的vue需要的数据，事件都不存在

vue生命周期之created

实例创建之后，data和事件已经被解析到，el还没有找到

vue生命周期之beforeMount

开始找标签，数据还没有被渲染，事件也没有被监听

vue生命周期之mounted

开始渲染数据，开始监听事件

vue生命周期之beforeUpdata

数据已经被修改在虚拟DOM，但没有被渲染到页面上

vue生命周期之updata

开始使用Diff算法，将虚拟DOM中的修改应用大页面上，此时真实DOM中数据被修改

vue生命周期之beforeDestory

所有的数据都存在

vue生命周期之destory

所有的数据都有(虚拟DOM中找)

<keep-alive></keep-alive>vue提供的用来缓存被消除的标签

用activated和deactivated取代了beforeUpdate和destory的执行

vueRoter

实现原理

<div id='app'>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
</div>
<script>
    let oDiv = document.getElementById('#app');
    window.onhashchange = function(){
        switch (location.hash){
            case '#/login':
                oDiv.innerHTML = `<h1>这是登录</h1>`;
                break;
            case '#/register':
                oDiv.innerHTML = `<h1>这是注册</h1>`;
                break;
        }
    }
</script>

安装使用

// 直接下载安装  vue-router.js 地址：https://router.vuejs.org/zh/installation.html
<div id="app">
​
</div>
​
<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`
    };
    let Login = {
        template: `<div><h1>这是登录页面</h1></div>`
    };
    let Register = {
        template: `<div><h1>这是注册页面</h1></div>`
    };
​
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link to='/'>首页</router-link>
                    <router-link to='/login'>登录</router-link>
                    <router-link to='/register'>注册</router-link>
                    <router-view></router-view>
                </div>`,
​
    };
    // 第二步，创建VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                path: '/',
                component: Home,
            },
            {
                path: '/login',
                component: Login,
            },
            {
                path: '/register',
                component: Register,
            },
        ]
    });
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        template: '<App/>',
        components: {
            App,
        }
    })
</script>

命名路由

<div id="app"></div>
​
<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`
    };
    let Login = {
        template: `<div><h1>这是登录页面</h1></div>`
    };
    let Register = {
        template: `<div><h1>这是注册页面</h1></div>`
    };
​
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "login"}'>登录</router-link>
                    <router-link :to='{name: "register"}'>注册</router-link>
                    <router-view></router-view>
                </div>`,
​
    };
    // 第二步，创建VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'register',
                path: '/register',
                component: Register,
            },
        ]
    });
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        template: '<App/>',
        components: {
            App,
        }
    })
</script>

路由参数的实现

<script>
    // 之真实的场景中，xxx/1  带有参数
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
    
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`
    };
    let userParams = {
        template: `<div><h1>这是用户一的信息</h1></div>`
    };
    let userParams = {
        template: `<div><h1>这是用户二的信息</h1></div>`
    };
    
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "userParams", params: {userId: 1}}>登录</router-link>
                    <router-link :to='{name: "userQuery"， query: {userId: 2}}'>注册</router-link>
                    <router-view></router-view>
                </div>`,
        
    };
    // 第二步，创建VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'hoem',
                path: '/',
                component: Home,
            },
            {
                // xxx/1
                name: 'userParams',
                path: '/user/:userId',
                component: userParams,
            },
            {
                //xxx/?userId=1
                name = 'userQuery',
                path: '/user',
                compontennt: userQuery,
            }
        ]   
    })
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    })
</script>

路由参数的实现原理

<div id="app"></div>
​
<script>
    // 之真实的场景中，xxx/1  带有参数
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`,
        mounted(){
            console.log(this.$route);
        }
    };
    let userParams = {
        template: `<div><h1>这是用户一的信息</h1></div>`,
        mounted(){
            console.log(this.$route);
        }
    };
    let userQuery = {
        template: `<div><h1>这是用户二的信息</h1></div>`
    };
​
let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "userParams", params: {userId: 1}}'>登录</router-link>
                    <router-link :to='{name: "userQuery", query: {userId: 2, id: 1, ss: 4}}'>注册</router-link>
                    <router-view></router-view>
                </div>`,
​
    };
    // 第二步，创建VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                // xxx/1
                name: 'userParams',
                path: '/user/:userId',
                component: userParams,
            },
            {
                //xxx/?userId=2
                name : 'userQuery',
                path: '/user',
                component: userQuery,
            }
        ]
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 第三步，在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    })
</script>

子路由

<div id="app"></div>
​
<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`,
    };
    let Courses = {
        template: `<div><h1>这是课程页面</h1>
                    <router-link to='/courses/lightcourses'>免费</router-link>
                    <router-link to='/courses/degreecourses'>收费</router-link>
                    <router-view></router-view>
                </div>`,
    };
    let Lightcourses = {
        template: `<div><h1>这是轻课页面</h1></div>`,
    };
    let Degreecourses = {
        template: `<div><h1>这是学位课程页面</h1></div>`,
    };
​
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "courses"}'>登录</router-link>
                    <router-view></router-view>
                </div>`,
    };
    // 第二步，创建VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'courses',
                path: '/courses',
                component: Courses,
                children: [
                    {
                        path: '/courses/lightcourses',
                        component: Lightcourses
                    },
                    {
                        path: '/courses/degreecourses',
                        component: Degreecourses
                    }
                ]
            },
        ]
    });
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        template: '<App/>',
        components: {
            App,
        }
    })
</script>

子路由append

<div id="app"></div>
<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`,
    };
    let Courses = {
        template: `<div><h1>这是课程页面</h1>
                    <router-link :to='{name: "lightcourses" }' append >轻课</router-link>
                    <router-link :to='{name: "degreecourses" }'>学位课</router-link>
                    <router-view></router-view>
                </div>`,
    };
    let LightCourses = {
        template: `<div><h1>这是轻课页面</h1></div>`,
    };
    let DegreeCourses = {
        template: `<div><h1>这是学位课程页面</h1></div>`,
    };
​
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "courses"}'>课程</router-link>
                    <router-view></router-view>
                </div>`,
​
    };
    // 第二步，创建VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'courses',
                path: '/courses',
                component: Courses,
                children: [
                    {
                        name: 'lightcourses',
                        path: 'lightcourese',
                        component: LightCourses
                    },
                    {
                        name: 'degreecourses',
                        path: 'degreecourses',
                        component: DegreeCourses
                    },
                ]
            },
        ]
    });
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        template: "<App/>",
        components: {
            App,
        }
    })
</script>

路由重定向

<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
    
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`,
    };
    let Pay = {
        template: `<div><h1>这是支付页面</h1></div>`,
    };
    let Login = {
        template: `<div><h1>这是登录页面</h1></div>`,
    };
    
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "login",}>登录</router-link>
                    <router-link :to='{name: "pay",}>支付</router-link>
                    <router-view></router-view>
                </div>`,
        
    };
    // 第二步，创建VueRouter对象
    // 把a标签的锚点值和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'hoem',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'pay',
                path: '/pay',
                redirect: '/login',
                component: Pay,
            },
        ]   
    })
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    })
</script>

路由的钩子函数

<div id="app"></div>
<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`,
    };
    let Pay = {
        template: `<div><h1>这是支付页面</h1></div>`,
    };
    let Login = {
        template: `<div><h1>这是登录页面</h1></div>`,
    };
​
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "login"}'>登录</router-link>
                    <router-link :to='{name: "pay"}'>支付</router-link>
                    <router-view></router-view>
                </div>`,
​
    };
    // 第二步，创建VueRouter对象
    // 把a标签的锚点值和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            // 对应关系
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'pay',
                path: '/pay',
                meta: { required_login: true },
                component: Pay,
            },
        ]
    });
​
    // 通过router对象的beforeEach(function(to, from, next))
    router.beforeEach(function(to, from, next){
        console.log('to', to);
        console.log("from", from);
        console.log("next", next);
        if (to.meta.required_login){
            next('/login');
        }
        else{
            next();
        }
    });
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        components: {
            App,
        },
        template: '<App/>',
    })
</script>

路径去掉#号

在router对象中加入mode: 'history'

<div id="app"></div>
<script>
    // 第一步，在vue根实例中使用VueRouter
    Vue.use(VueRouter);
​
    let Home = {
        template: `<div><h1>这是主页面</h1></div>`,
    };
    let Pay = {
        template: `<div><h1>这是支付页面</h1></div>`,
    };
    let Login = {
        template: `<div><h1>这是登录页面</h1></div>`,
    };
​
    let App = {
        // 第四步
        // router-link会渲染成a标签，to会变成href属性，to后面是routers中定义的路径
        // 第五步
        // router-view页面内容的渲染出口
        template: `<div>
                    <router-link :to='{name: "home"}'>首页</router-link>
                    <router-link :to='{name: "login"}'>登录</router-link>
                    <router-link :to='{name: "pay"}'>支付</router-link>
                    <router-view></router-view>
                </div>`,
​
    };
    // 第二步，创建VueRouter对象
    // 把a标签的锚点值和页面内容绑定了对应关系
    let router = new VueRouter({
        mode: 'history', // 去掉# 号
        routes: [
            // 对应关系
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'pay',
                path: '/pay',
                meta: { required_login: true },
                component: Pay,
            },
        ]
    });
​
    // 通过router对象的beforeEach(function(to, from, next))
    router.beforeEach(function(to, from, next){
        console.log('to', to);
        console.log("from", from);
        console.log("next", next);
        if (to.meta.required_login){
            next('/login');
        }
        else{
            next();
        }
    });
    new Vue({
        el: '#app',
        // 第三步，在根实例中注册router对象
        router: router,
        components: {
            App,
        },
        template: '<App/>',
    })
</script>

Vue实例生命周期+vueRoter的更多相关文章

  1. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  2. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  3. vue实例生命周期详解

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...

  4. 【Vue实例生命周期】

    目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpda ...

  5. vue 实例生命周期

    compile template into render function 编译模板渲染方法 compile el’s ouoterHtml as template 将el的outerHTML当做模板 ...

  6. vue入门：（底层渲染实现render函数、实例生命周期）

    vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法 ...

  7. Vue：生命周期

    一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...

  8. 前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子

    vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...

  9. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

随机推荐

  1. ffmpeg下载直播流

    ffmpeg -i "http://www.xxx.com/test.flv" -c:v copy -c:a copy -bsf:a aac_adtstoasc output.mp ...

  2. zero to one (2)

    kali虚拟机整理 关于kali的虚拟机,我搞崩过很多次,重新安装了很多次,也遇到了很多问题,有一些解决不了的就重新安装,费时费力,要善于用虚拟机. 关于网络配置的问题 关于网络配置,在这里我想主要记 ...

  3. 「51Nod1639」绑鞋带（概率

    1639 绑鞋带  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 有n根鞋带混在一起,现在重复n次以下操作:随机抽出两个鞋带头,把它们绑在一起.可 ...

  4. bzoj 1049: 数字序列 dp

    题目大意: 给定一个长度为n的整数序列.在改变的数最小的和改变的幅度最小的前提下把它变成一个单调严格上升的序列.求改变的最小的数和这个幅度. 题解: (貌似以前考试考过这道题) 其实这道题就是两道题拼 ...

  5. 描述怎样通过flask+redis+sqlalchemy等工具，开发restful api

    flask开发restful api系列(8)-再谈项目结构 摘要: 进一步介绍flask的项目结构,使整个项目结构一目了然.阅读全文 posted @ 2016-06-06 13:54 月儿弯弯02 ...

  6. js实现股票实时刷新数据

    近来学习炒股,免不了上班时间看盘,总不能光明正大的用电脑看行情,一直盯着手机影响也不好,容易引起“关注”. 所以就想自己做一个网页来达到看盘的目的,一个只显示几个关键数字的网页肯定不会引起怀疑.有想法 ...

  7. UDK更改启动画面及载入动画

    转自:http://www.unrealchina.org/forum.php?mod=viewthread&tid=246&extra=page%3D1 方法很简单: 1.更改启动画 ...

  8. 演讲：对 2000 多亿条数据做一次 group by 需要多久？

    http://2017.qconbeijing.com/presentation/646?utm_source=weibo&utm_medium=infoq&utm_campaign= ...

  9. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  10. oracle 内连接 外连接 查询 笔记

    elect ename,job,sal from emp where deptno>10 order by sal desc; 联合查询,PK dept.deptno FK emp.deptno ...