美文网首页
自定义指令与过滤器

自定义指令与过滤器

作者: 是夢终會醒 | 来源:发表于2017-03-03 16:05 被阅读0次

    vue生命周期(1.0及以下):

     钩子函数:(插件自带)
    
         created -> 实例已经创建 √
    
         beforeCompile -> 编译之前
    
         compiled -> 编译之后
    
         ready -> 插入到文档中 √
    
         beforeDestroy -> 销毁之前
    
         destroyed -> 销毁之后
    

    用户会看到花括号标记:

    v-cloak 防止闪烁, 比较大段落

    {{msg}} -> v-text

    {{{msg}}} -> v-html

    计算属性的使用:

    
     computed:{
    
         b:function(){ //默认调用get
    
         return 值
    
         }
    
     }
    
    

    
     computed:{
    
         b:{
    
         get:
    
         set:
    
         }
    
     }
    
    

    * computed里面可以放置一些业务逻辑代码,一定记得return


    vue实例简单方法:

    
     vm.$el -> 就是元素
    
     vm.$data -> 就是data
    
     vm.$mount -> 手动挂在vue程序
    
     vm.$options -> 获取自定义属性
    
     vm.$destroy -> 销毁对象
    
     vm.$log(); -> 查看现在数据的状态
    
    

    循环(1.0的版本,2.0中已经弃用):

    
     v-for="value in data"
    
     会有重复数据?
    
     track-by='索引' 提高循环性能
    
     track-by='$index/uid'
    
    

    过滤器:

    
     vue提供过滤器:
    
         capitalize uppercase currency....
    
         debounce 配合事件,延迟执行
    
     数据配合使用过滤器:
    
         limitBy 限制几个
    
         limitBy 参数(取几个)
    
         limitBy 取几个 从哪开始
    
         filterBy 过滤数据
    
         filterBy ‘谁’
    
         orderBy 排序
    
         orderBy 谁 1/-1
    
         1 -> 正序
    
        -1 -> 倒序
    
    

    # 自定义过滤器: model ->过滤 -> view

    
     Vue.filter(name,function(input){
    
     });
    
    

    
        v-text
    
        v-for
    
        v-html
    
        指令: 扩展html语法
    
    

    自定义指令:

    
     属性:
    
     Vue.directive(指令名称,function(参数){
    
         this.el -> 原生DOM元素
    
     });
    
     <div v-red="参数"></div>
    
     指令名称: v-red -> red
    
    

    # * 注意: 必须以 v-开头

    自定义元素指令:(用处不大)

    
         Vue.elementDirective('zns-red',{
    
             bind:function(){
    
             this.el.style.background='red';
    
             }
    
         });
    
    

    相关文章

      网友评论

          本文标题:自定义指令与过滤器

          本文链接:https://www.haomeiwen.com/subject/jhlrgttx.html