vue---day03

1. Vue的生命周期

    - 创建和销毁的时候可以做一些我们自己的事情

    - beforeCreated
    - created
    - beforeMount
    - mounted
    - beforeUpdate
    - updated
    - activated
    - deactivated
    - beforeDestroy
    - destroyed

    1.1 知识点回顾

        1.1.1  beforeCreated  在实例创建之前除标签外，所有的vue实例需要的数据，事件都不存在
        1.1.2  created  实例被我创建之后，data和事件已经被解析到，el还没有解析到
        1.1.3  beforeMount  开始找标签，数据还没被渲染，事件也没被监听
        1.1.4  mounted  开始渲染数据和监听事件
        1.1.5  beforeUpdate 数据已经被修改在虚拟DOM，但是还没渲染到页面上
        1.1.6  updated  开始使用Diff算法，将虚拟DOM中的要修改数据应用到页面上，真实DOM中的数据也被修改了
        1.1.7  beforeDestroy 所有的数据都存在
        1.1.8  destroyed 所有的数据都存在(在虚拟DOM中)
        1.1.9  <keep-alive></keep-alive> Vue提供的用来缓存消除的标签
                    - activated和deactivated取代了beforeDestroy和destroyed的执行

2. Vue的路由系统

    2.1 VueRouter的实现原理
        - 通过监听a的锚点值，来动态的显示页面内容

    2.2 VueRouter的安装使用

        2.2.1 第一步：

　1　　　　　  Vue.use(VueRouter)

        2.2.2 第二步：创建router对象和每个url对应的组件

 　　　　　　let Home = {
                 template:``,
             };

             let Login = {
                 template:``,
             };

             let router = new VueRouter({
                 routes:[
                     {
                         name:'home',
                         path:'/',
                         components:Home',
                     },
                     {
                         name:'login',
                         path:'/login',
                         components:Login,
                     },
                 ]
             });

        2.2.3 第三步：注册router对象到根实例中

 　　　　　　new Vue({
                 el:'#app',
                 template:`<App/>`,
                 components:{
                     App,
                 }
                 router:router,
             });

        2.2.4 第四步：

 　　　　　　let App = {
                 template:`
                     <router-link :to='{ name: 'home' }'>首页</router-link>
                     <router-link :to='{ name: 'login' }'>登录</router-link>

                     <router-view></router-view>
                 `
             }

    2.3 VueRouter之命名路由
        同上
    2.4 VueRouter之路由参数
        - user_change/1/
        - user_detail/?user_id=1

 　　　　let Home = {
             template:`
                 <h1>欢迎</h1>
             `
         };

         let UserDetail = {
             template:`
                 <h2>用户详情</h2>
             `,
         };

         let UserChange = {
             template:`
                 <h3>修改用户信息</h3>
             `,
         };

         let App = {
             template:`
                 <div>
                     <router-link :to="{ name: 'home' }">首页</router-link>
                     <router-link :to="{ name: 'user_detail', query: { user_id: 1 } }">用户详情</router-link>
                     <router-link :to="{ name: 'user_change', params: { user_id: 1 } }">修改用户信息</router-link>
                     <router-view></router-view>
                 </div>
             `
         };

         let router = new VueRouter({
             routes:[
                 {
                     'name':'home',
                     'path':'/',
                     'component':Home,
                 },
                 {
                     'name':'user_detail',
                     'path':'/user_detail',
                     'component':UserDetail,
                 },
                 {
                     'name':'user_change',
                     'path':'/user_change/:user_id',
                     'component':UserChange,
                 },
             ]
         });

    2.5 VueRouter之路由参数的实现原理

         this.$router.params
         this.$router.query

    2.6 VueRouter之子路由

 　　 　　let Home = {
         　　template: `
             　　<div>
                 　　<h1>欢迎</h1>
             　　</div>
             　　`
         　　};

         let Phone = {
             template: `
                 <div>
                     <h2>手机品牌</h2>
                     <router-link :to="{name: 'huawei'}" append>华为</router-link>
                     <router-link :to="{name: 'oneplus'}" append>一加</router-link>

                     <router-view></router-view>
                 </div>
                 `,
         };
         let HuaWei = {
             template: `
                     <div>
                         <h3>华为手机</h3>
                     </div>
                 `,
         };
         let OnePlus = {
             template: `
                     <div>
                         <h3>一加手机</h3>
                     </div>
                 `,

         let App = {
             template: `
                 <div>
                     <router-link :to="{ name: 'home' }">首页</router-link>
                     <router-link :to="{ name: 'phone'}">手机品牌</router-link>

                     <router-view></router-view>
                 </div>
                 `,
         };

         let router = new VueRouter({
         routes: [
             {
                 'name': 'home',
                 'path': '/',
                 'component': Home,
             },
             {
                 'name': 'phone',
                 'path': '/phone',
                 'component': Phone,
                 'children': [
                     {
                         'name':'huawei',
                         'path': 'huawei',
                         'component': HuaWei,
                     },
                     {
                         'name':'oneplus',
                         'path': 'oneplus',
                         'component': OnePlus,
                     },
                 ],

             },
         ]
     });

    2.7 VueRouter之子路由重定向

 　　　　let router = new VueRouter({
             routes: [
                 {
                     name: 'home',
                     path: '/',
                     component: Home,
                 },
                 {
                     name: 'login',
                     path: '/login',
                     component: Login
                 },
                 {
                     name: 'pay',
                     path: '/pay',
                     redirect: '/login',
                     component: Pay,
                 },
             ]
         });

    2.8 VueRouter之子路由的钩子函数

 　　　　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();
            }
         });

    2.9 VueRouter之子路由的去 # 号

  　　　　let router = new VueRouter({
             mode:'history',
             routes: [
                 {
                     name: 'home',
                     path: '/',
                     component: Home,
                 },
                 {
                     name: 'login',
                     path: '/login',
                     component: Login
                 },
                 {
                     name: 'pay',
                     path: '/pay',
                     component: Pay,
                 },
             ]
         });