4、Vue过滤器和生周期函数

1、过滤器

1.1.局部过滤器

在当前组件内部使用过滤器

// 声明局部过滤器
filter{
    '过滤器的名字':function(val,a,b){
        // val是当前数据，a是鲁班，b是提莫
        return {}
    }
    
}

// 只能在当前组件中使用
// 使用 管道符

数据|过滤器的名字(“鲁班”,"提莫")
    ```

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        let App = {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
                }
            },
            template:`

               <div>我是一个APP  {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>

               </div>
            `,
            filters:{
                myReverse:function (val) {
                    console.log(val);
                    return val.split('').reverse().join('')
                },
                //年-月- 日  年- 月
                myTime:function(val,formatStr){
                    return moment(val).format(formatStr);
                }
            }
        }
        new Vue({
            el:'#app',
            data(){
                return {

                }
            },
            components:{
                App
            }

        })

    </script>
</body>
</html>

 

1.2全局过滤器

只要一创建就可以在任意组件中使用

 

// 声明全局过滤器
Vue.filter('过滤器的名字':function(val,a,b){
    // val是当前数据，a是鲁班，b是提莫
    return {}
})
// 全局过滤器一旦声明就可以在任意组件中使用
// 使用 管道符

 

数据|过滤器的名字(“鲁班”,"提莫")

2、生命周期的钩子函数

 

从生到死的过程（diff算法）

 

　　beforeCreate　　

　　

　　created

  • 虚拟DOM React
  • 组件创建之后发生
  • 主要用于发送ajax获取数据 实现数据驱动

　　

　　beforeMount

 

　　mounted

 

　　beforeUpdate

 

　　updated

 

 　　activated

 

　　deactivated

 

　　beforeDestroy

 

　　destroyed

 

3、Vue的全家桶（kfc） vue+vue-router+vuex

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

 

为什么要使用单页面应用？

传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，
在某个生命周期的钩子函数中发送ajax,数据驱动。为了提高用户体验

 

 

3.1使用vue-router

 

 

 

 

 //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首页</div>`
    }
    const Course = {
        data() {
            return {}
        },
        template: `<div>我是免费课程</div>`
    }
    //2.创建路由
    const router = new VueRouter({
        //3.定义路由规则
        mode:'history',
        routes: [
            {
              path:'/',
              redirect:'/home'
            },
            {
                path: '/home',
                component: Home
            },
            {
                path: '/course',
                component: Course
            }
        ]
    })
    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 = '/home'>首页</router-link>
                    <router-link to = '/course'>免费课程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

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

 

 

 

3.2命名路由

const router = new VueRouter({
        //定义路由规则
        routes: [
            {
              path:'/',
              redirect:'/home'
            },
            {
                path: '/home',
                name:'Home',
                component: Home
            },
            {
                path: '/course',
                name:'Course',
                component: Course
            }
        ]
    })
    
    
     let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的两个全局组件
        //router-view  是路由组件的出口
        template: `
            <div>

                <div class="header">
                    <router-link :to = '{name:"Home"}'>首页</router-link>
                    <router-link :to = '{name:"Course"}'>免费课程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

    }

 

 

 

3.3动态路由匹配

$route 路由信息对象

$router 路由对象 VueRouter

watch: {
    '$route'(to, from) {
        // 对路由变化作出响应...
        console.log(to); //当前路由信息对象
        console.log(from);
    }
}

 

 

 

 

 

 

3.4编程式导航vs 声明式导航

 

<router-link :to = '{name:"Home"}'>首页</router-link>
<router-link :to = '{name:"Course"}'>免费课程</router-link>

//编程式导航
this.$router.push({
    name:'Home'
})

 

posted @ 2019-10-04 00:49  Mr_Yun  阅读(315)  评论(0)    收藏  举报