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>

原文地址：https://www.cnblogs.com/chenxi67/p/10034358.html

时间： 2024-07-31 20:25:28

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

vue生命周期、钩子函数

https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期. 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy

vue的生命周期和钩子函数的理解

对于vue的生命周期,官方文档上并没有太多的文字性说明,把自己对生命周期和钩子函数的理解记录下来官方文档自己的理解 vue生命周期的概念:vue对象从被创建,到执行逻辑,最后到被销毁的过程. 具体流程: 1)vue实例的创建 2)初始化事件和生命周期 3)初始化data和methods 4)生成虚拟dom $el(将没有解析的指令的dom加载到内存中) 5)使用$el 来替代el,并且将$el中的指令进行解析 6)进行状态mounted的循环判断data中的数据是否发生改变,如果改变,则跟

生命周期的钩子函数

生命周期的钩子函数(写在方法的下面,一共有11个) 1.vue的整个生命周期的特定时刻,自动调用的函数 2.beforeCreate 实例创建之前调用, 数据没有挂载,不能访问数据 vue实例初始化的时候就被执行(数据加载之前执行的一个函数,拿不到data里面的数据) 3.created 实例创建之后调用,能访问.修改数据,单修改数据不会触发updated函数在这里可以向服务器请求数据,(也可以拿到父组件的数组进行修改等操作,这一步骤是没有操作到模板,数据和模板还没有结合) 下一步就是开始找

黑马eesy_15 Vue：03.生命周期与ajax异步请求&&04.vue案例

黑马eesy_15 Vue:02.常用语法 vue的生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法插值表达式事件的绑定数据的显示逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求它和jquery的ajax比较相似 5.综合案例实现用户的查询列表和更新操作前端:Vue 后端:ssm 3.VueJS生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程. v

Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载

Vue生命周期每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: var vm = new Vue({ el: '#app', ...... } 是根组件,el指定了它的模板(id为app的元素包裹的部分),相对于template属性也可以这样写: var vm = new Vue({ ...... } vm.$mount("#app"); 根组件里

vue2.0项目实战（3）生命周期和钩子函数详解

最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 下面来总结一下vue的生命周期. vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. <!DOCTYPE html>

Vue2.0 探索之路——生命周期和钩子函数的一些理解（转）

前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介咱们从上图可以很明显的看出现在vue2.0

Vue2.0 探索之路——生命周期和钩子函数的一些理解

从零开始学 Web 之 Vue.js（三）Vue实例的生命周期

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.vue实例的生