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' }})

巴特西