zoukankan      html  css  js  c++  java
  • 过滤器和生命周期

    过滤器的使用

    局部过滤器

     //1.注册局部过滤器 在组件对象中定义
    filters:{
        '过滤器的名字':function(value){
        }   
    }
    //2.使用过滤器 使用管道符 | 
    {{price  | '过滤器的名字'}}

    全局过滤器

    // 注册全局的过滤器
    //第一个参数是过滤器的名字,第二个参数是执行的操作
    
    Vue.filter('reverse',function(value) {    
        return value.split('').reverse().join('');
    });
    
    //使用跟 局部过滤器一样

    生命周期(钩子函数)

    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('组件被停用了');
    
    }

    $属性

    • $refs获取组件内的元素
    • $parent:获取当前组件的父组件
    • $children:获取当前组件的子组件
    • $root:获取New Vue的实例化对象
    • $el:获取组件对象的DOM元素

    获取更新之后的dom添加事件的特殊情况

    $nextTick 是在下次Dom更新循环结束之后执行的延迟回调,在修改数据之后使用$nextTick ,则可以在回调中获取更新之后的DOM

  • 相关阅读:
    Java线程状态和关闭线程的正确姿势
    Eclipse最全的编码设置
    Maven中的src/test/java颜色不正常
    web.xml 各版本的 Schema 头部声明
    程序员面试系列
    几款强大的网页生成工具
    endnoteX9批量导入enw
    关于Ubuntu16.04里安装elasticsearch-head显示集群健康值未连接的问题
    U盘做了系统盘,写入如硬盘映像过程中终止,怎么格式化硬盘重新写入?
    使用jupyter notebook出现kernel error
  • 原文地址:https://www.cnblogs.com/lxfpy/p/11102880.html
Copyright © 2011-2022 走看看