vue学习笔记day04-6.28-过滤器-生命周期函数

无双幽梦
114 阅读3分钟

过滤器

过滤器的功能是对要显示的数据进行相应的处理后再显示,不会改变原有的数据,只是处理后显示新的对应的数据

过滤器可以做到的使用计算属性,methods方法也可以实现

过滤器的简单使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
  //过滤器 filter 
  有两个参数 第一个参数是过滤器的名字,第二个参数是一个函数,用来放过滤的代码
  需要使用return 返回操作后的数据
    <div id="app">
        <div>{{money | curr}}</div><br>
        <input type="text" v-model="mes"><br>
        <p>{{mes | give}}</p><br>

        <div>{{price | fil}}</div>
    </div>
    <script>
        //全局过滤器
        Vue.filter('curr', function (val) {
            if (!val) return ''
            console.log(val);
            return `¥${parseInt(val).toFixed(2)}`
        })

        Vue.filter('give', function (val) {
            if (!val) return ''
            return val.charAt(0).toUpperCase() + val.slice(1)
        })
        let vm = new Vue({
            el: '#app',
            data: {
                price: '50',
                money: '100',
                mes: ''
            },
            //局部过滤器
            filters:{'fil':function(val){
                if(!val) return ''
                return `¥${val}元`
            }}
        })
    </script>
</body>

</html>

过滤器加参数使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{str | strChange('Hello world !')}}</h3>
    </div>
    <script>
        Vue.filter('strChange', function (val, res) {
            console.log('value值:', val, 'res值:', res)
            return val + ' ! ' + res
        })

        let vm = new Vue({
            el: '#app',
            data: {
                str: '你好 世界'
            },

        })
    </script>
</body>

</html>

这个时候过滤器的第二个函数放两个参数,第一个是管道符前面的值,第二个是过滤器的参数

过滤器串联

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message"><br>
        <span>{{message | filtA | filtB | filtC}}</span>

    </div>
    <script>
        Vue.filter('filtA',function(val){
            if(!val) return ''
            return val.charAt(0).toUpperCase()+val.slice(1)
        })
        Vue.filter('filtB',function(val){
            if(!val) return ''
            return val+'第二次处理'
        })
        Vue.filter('filtC',function(val){
            if(!val) return ''
            return val+'最后一次处理'
        })
        let vm = new Vue({
            el: "#app",
            data: {
                message: ''
            }
        })
    </script>
</body>

</html>

可以设置多个过滤器串联起来,然后将数据多次处理

生命周期函数

生命周期函数指的是vue实例在页面中的 创建-运行-销毁的三个阶段

生命周期函数总共有8个,其中:

  • 创建期间的函数有:beforeCreate,create,beforeMount,mounted
  • 运行期间的函数有:beforeUpdate,updated
  • 销毁期间的函数有:beforeDestroy,destroyed

官方文档中有一张图片详细的介绍了每个部分执行的函数,这里找到一张汉化版

可以看出了不同的阶段有不同的生命周期函数,所以在不同的阶段我们可以使用相应的生命周期函数作为方法使用

创建阶段

beforeCreate

创建之前:指的是Vue被实例化 new Vue({})已经被创建,但是data,methods还没有创建的时候

created

此时data和methods都已经被创建,可以使用,但是模版还没有被编译

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <!--  beforeCreate  初始化工作 -->

        <!-- created  初始化完成-->
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '我是生命周期函数'
            },
            methods: {
                init() {
                    console.log('做了初始化工作');
                }
            },
            beforeCreate() {
                // this.init() //无法触发
                console.log('beforeCreate');//触发顺序1
            },
            created() {
                this.init() //触发顺序2
                console.log('created');//触发顺序3
            }
        })
    </script>
</body>

</html>

beforeMount

现在是created的下一个阶段,此时模版已经被编译了,但是还没有挂载到页面中

mounted

此时模版代码已经被加载到页面中了,此时创建的所有准备都完成了,网页已经开始运行了

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">

      <ul>
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
      </ul>

      <!-- beforeMount 挂载之前 完成dom 但是没有生成真正的dom结构 -->
      <!-- mounted 挂载完成 生成真实的Dom -->
    </div>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          arr: ['面包', '牛奶', '爱情']
        },
        methods: {
          init() {
            console.log('做了初始化工作');
          }
        },
        beforeMount() {
          this.init()
          console.log('beforeMount', document.getElementsByTagName('li').length); // 结果是1
        },
        mounted() {
          console.log('mounted', document.getElementsByTagName('li').length); // 结果是3
        }
      })
    </script>
  </body>

</html>

运行阶段

beforeUpdate

在网页运行期间,data中的数据如果更新了就会触发此方法.在这个阶段data中的数据已经进行了更新,但是并没有在模版中进行更新,所以页面还没有发生变化

updated

这个阶段数据不仅在data中更新了,也在页面中更新完成了 是更新完成的状态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{{name}}</div>
        <button @click="update">点击更改数据</button>
        <!-- beforeUpdete  更新之前 -->
        <!-- updeted  更新之后 -->

    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                name: '赵丽颖'
            },
            methods: {
                update() {
                    console.log(this.update);
                    this.name = '白百何'
                },
                del() {
                    console.log(this.del);
                    this.name = '杨幂'
                }
            },
            beforUpdete() {
                console.log('beforUpdete');
            },
            updated() {
                console.log('updated');
            }
        })
    </script>
</body>

</html>

销毁阶段

beforeDestory

这个阶段Vue实例已经收到了销毁指令,但是指令还没有执行,这个时候Vue中的所有属性都是可以使用的

destroyed

Vue实例已经被完全销毁后执行,此时Vue实例上所有的东西都会解绑,所有事件都会被移除,所有子元素都会被销毁

感谢伙伴们耐心观看,本文是个人的学习笔记,今年27岁转行前端程序员,笔记中如有错误还请指正,非常感谢! 如果本篇笔记能给你带来帮助,还请点个关注点个赞 感谢支持 您的支持也是我不断更新学习笔记的动力~

avatar
文章
阅读
粉丝