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

Z时代
2024-01-10
分类：综合

vue

一.过滤器　　

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+router" title="vue-router">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>