Vue的过滤器,生命周期的钩子函数和使用Vue-router

Posted chenxi67

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的过滤器,生命周期的钩子函数和使用Vue-router相关的知识,希望对你有一定的参考价值。

一.过滤器  

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

  给某些数据 添油加醋

//声明
filters:{
    ‘过滤器的名字‘:function(val,a,b){
        //a 就是alax ,val就是当前的数据
    }
}
//使用  管道符
数据 | 过滤器的名字(‘alex‘,‘wusir‘)

 

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

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

Vue.filter(‘过滤器的名字‘,function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字(‘alex‘,‘wusir‘)

 

<!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>
        //全局过滤器
        Vue.filter(myTime,function (val,formatStr) {
            return moment(val).format(formatStr)
        })
        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(‘‘)
                }

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

                }
            },
            components:{
                App
            }

        })

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

二.生命周期的钩子函数

created 组件创建

  • 虚拟DOM React

  • 发送ajax 获取数据 实现数据驱动视图

mounted

  获取真实DOM

activated

  激活当前组件

deactivated

  • keep-alive Vue提供的内置组件,主要作用,让组件产生缓存

  • 停用当前组件

destroyed

  如果开了定时器,一定要关闭定时器

beforeCreate(){

    // 组件创建之前

    console.log(this.msg);

},

created(){

    // 组件创建之后

    // 使用该组件,就会触发以上的钩子函数,created中可以操作数据,发送ajax,并且可以实现vue==》页面的影响  应用:发送ajax请求

    console.log(this.msg);

    // this.msg = ‘嘿嘿黑‘;

},

beforeMount(){

    // 装载数据到DOM之前会调用

    console.log(document.getElementById(‘app‘));

},

mounted(){

    // 这个地方可以操作DOM

    // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素,vue操作以后的DOM

    console.log(document.getElementById(‘app‘));

},

beforeUpdate(){

    // 在更新之前,调用此钩子,应用:获取原始的DOM

    console.log(document.getElementById(‘app‘).innerHTML);

},

updated(){

    // 在更新之前,调用此钩子,应用:获取最新的DOM

    console.log(document.getElementById(‘app‘).innerHTML);

},

beforeDestroy(){

    console.log(‘beforeDestroy‘);

},

destroyed(){

    console.log(‘destroyed‘);

},

activated(){

    console.log(‘组件被激活了‘);

},

deactivated(){

    console.log(‘组件被停用了‘);

}

 

<!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>
    let Test = {
        data() {
            return {
                msg: alex,
                count:0,
                timer:null
            }
        },
        template: `
               <div id="test">
                    <div id="box">{{ msg }}</div>
                    <p>{{ count }}</p>
                    <button @click = change>修改</button>
               </div>
            `,
        methods: {
            change() {
                this.msg = wusir;
                document.querySelector(#box).style.color = red;
            }
        },
        beforeCreate() {

            // 组件创建之前
            console.log(组件创建之前, this.msg);

        },
        created() {
//                ********最重要
            // 组件创建之后
//            this.timer = setInterval(()=>{
//                this.count++
//            },1000);

            // 使用该组件,就会触发以上的钩子函数,
            // created中可以操作数据,发送ajax,并且可以实现数据驱动视图
            // 应用:发送ajax请求

            console.log(组件创建之后, this.msg);

            // this.msg = ‘嘿嘿黑‘;

        },
        beforeMount() {

            // 装载数据到DOM之前会调用

            console.log(document.getElementById(app));


        },
        mounted() {
//            *******很重要*****

            // 这个地方可以操作DOM

            // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素,vue操作以后的DOM

            console.log(document.getElementById(app));
            //jsDOM操作

        },
        beforeUpdate() {

            // 在更新之前,调用此钩子,应用:获取原始的DOM

            console.log(document.getElementById(app).innerHTML);

        },
        updated() {

            // 在更新之后,调用此钩子,应用:获取最新的DOM

            console.log(document.getElementById(app).innerHTML);

        },
        beforeDestroy() {

            console.log(beforeDestroy);

        },
        destroyed() {
            //注意: 定时器的销毁 要在此方法中处理
            console.log(destroyed,this.timer);
            clearInterval(this.timer);

        },
        activated(){

            console.log(组件被激活了);

        },

        deactivated(){

            console.log(组件被停用了);

        }
    }
    let App = {
        data() {
            return {
                isShow:true
            }
        },
        template: `

               <div>

                   <keep-alive>
                     <Test  v-if="isShow"/>
                  </keep-alive>
                    <button @click = clickHandler>改变test组件的生死</button>
               </div>
            `,
        methods:{
          clickHandler(){
              this.isShow = !this.isShow;
          }
        },
        components: {
            Test
        }

    }
    new Vue({
        el: #app,
        data() {
            return {}
        },
        components: {
            App
        }

    })

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

三.Vue的全家桶(kfc) vue+vue-router+vuex

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

  vue-router是vue的核心插件

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

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

 

1.使用vue-router

  下载引入

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

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首页</div>`
    }
    const Course = {
        data() {
            return {}
        },
        template: `<div>我是免费课程</div>`
    }
    //创建路由
    const router = new VueRouter({
        //定义路由规则
        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  是路由组件的出口
        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,
        //挂载 路由对象
        router,
        data() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    })

</script>

</body>
</html>

2.命名路由

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

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首页</div>`
    }
    const Course = {
        data() {
            return {
                categoryList:[]
            }
        },
        template: `<div>
        <span v-for = (item,index) in categoryList>{{item.name}}</span>



    </div>`,
        methods:{
          getCategroyList(){

          }
        },
        created(){
            //ajax 发送请求 数据获取
            this.getCategroyList();
        }
    }
    //创建路由
    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>

        `

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

</script>

</body>
</html>

3.动态路由匹配

  $route 路由信息对象

  $router 路由对象 VueRouter

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

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)

    //路由范式:

    //http://127.0.0.1:8080/index/user
    //http://127.0.0.1:8080/user/1 params
    //http://127.0.0.1:8080/user/2
    //http://127.0.0.1:8080/user?user_id =1   query


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

</script>

</body>
</html>

4.编程式导航

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

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)

    //路由范式:

    //http://127.0.0.1:8080/index/user
    //http://127.0.0.1:8080/user/1 params
    //http://127.0.0.1:8080/user/2
    //http://127.0.0.1:8080/user?user_id =1   query
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首页</div>`
    }

    const User = {
        data() {
            return {
                user_id: null
            }
        },
        template: `<div>我是用户{{ user_id}}
                    <button @click = clickHandler>跳转首页</button>

                 </div>`,
        created() {
            console.log(this.$route);
        },
        methods:{
            //编程式导航
            clickHandler(){
                this.$router.push({
                    name:"Home"
                })
            }
        },
        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
            },
            {
                path: /home,
                name: Home,
                component: Home
            }

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

</script>

</body>
</html>

 

以上是关于Vue的过滤器,生命周期的钩子函数和使用Vue-router的主要内容,如果未能解决你的问题,请参考以下文章

Vue——生命周期和钩子函数的一些理解

Vue-的父组件和子组件生命周期钩子函数执行顺序

Vue生命周期及钩子函数

Vue笔记(Vue生命周期 11个钩子)

vue生命周期11个钩子函数

Vue 的父组件和子组件生命周期钩子执行顺序