route和过滤器的基础知识

过滤器

1.局部过滤器 在当前组件内部使用过滤器(对某些数据进行装饰)

//声明
filters:{
    '过滤器的名字':function(val,a,b){
        //a 就是will ，val就是当前的数据
        return xxx //返回处理好的结果
	}
}
//使用  管道符
数据 | 过滤器的名字('will'，'william')

2.全局过滤器 只要过滤器一创建，在任何组件中都能使用

Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用

生命周期的钩子函数

Vue实例从创建到销毁的过程

diff算法

- [beforeCreate]

- [created]组件创建  ***

  - 虚拟DOM  React
  - 发送ajax 获取数据 实现数据驱动视图

- [beforeMount]

- [mounted] ***

  - 获取真实DOM

- [beforeUpdate]

- [updated]

- [activated]

  - 激活当前组件

- [deactivated]

  - keep-alive Vue提供的内置组件，主要作用，让组件产生缓存
  - 停用当前组件

- [beforeDestroy]

- destroyed

  - 如果开了定时器，一定要关闭定时器

Vue-router

vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用

vue-router是vue的核心插件

1.下载

<script src ='https://unpkg.com/vue-router/dist/vue-router.js'></script>

2.定义和创建路由

const Index = {   // 定义路由组件
        data() {
            return {}
        },
        template: `<div>我是首页</div>`
    }
    const Course = {
        data() {
            return {}
        },
        template: `<div>我是课程</div>`
    }
routes = [{  //定义路由
    path:'/',
     component:Index,
},{
    path:'/course',
     component:Course,
}]

3.创建router实例并挂载到vue中

const router = new VueRouter({
    routes  // (缩写) 相当于 routes: routes
})

new Vue({
    el:'#app',
    data(){
        return {}
    },
    router
})

命名路由

routes = [{  //定义路由
    path:'/',
    name:'index',  //命名路由
     component:Index,
},{
    path:'/course',
        name:'course', //命名路由
     component:Course,
}]

 const router = new VueRouter({
    routes  // (缩写) 相当于 routes: routes
})
let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的两个全局组件
        //router-view  是路由组件的出口
        //router-link默认会被渲染成a标签，to属性默认被渲染成href
        template: `
            <div>

                <div class="header">

                    <router-link :to = '{name:"index"}'>首页</router-link>
                    <router-link :to = '{name:"course"}'>免费课程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `,

    }

动态路由匹配

可以动态的匹配路由地址,但用的还是同一个路由组件

$route 路由信息对象

$router 路由对象 VueRouter

    const User = {
        data() {
            return {
                user_id:null
            }
        },
        template: `<div>我是用户{{ user_id}}</div>`,
        created() {
            console.log(this.$route); //路由信息对象
//            提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
        },
        watch: {
            '$route'(to, from) {
                // 对路由变化作出响应...
                console.log(to.params.id);
                console.log(from);
                this.user_id = to.params.id;
                //发送ajax

            }
        }
    }

    //创建路由
    const router = new VueRouter({
        //定义路由规则
        routes: [

            {
                path: '/user/:id',
                name: 'User',
                component: User
            }

        ]
    })
    let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的两个全局组件
        //router-view  是路由组件的出口
        template: `
            <div>

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

        `

    }
    new Vue({
        el: '#app',
        //挂载 路由对象
        router,
        data() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    })

编程式的导航

当你点击时，这个方法会在内部调用，所以说, 点击等同于调用 router.push(...)。

声明式:router-link :to="..."
编程式:router.push(...)

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})