Vue过滤器和自定义指令

目录

1、过滤器

2、自定义指令

---

1、过滤器：

            1、定义过滤器

                1、全局过滤器：Vue.filter(过滤器名字，(v)=>{return 处理结果})

                2、局部过滤器：filters：{过滤器名字.function(v){return 处理的结果}}    

                     注意：局部过滤器filters结尾的s不要忘记

                 2、具体功能：处理需要被处理数据的数据格式

                3、使用过滤器：{{被处理的数据 | 过滤器名字}}

<div id="app">
        我是修改前的数据：{{msg}}
        <hr>
        我是全局filter修改后的数据：{{msg | toupper}}
        <hr>
        我是局部filters修改后的数据：{{msg | add}}
        <hr>
  <!-- 这里需要注意的是串联过滤器的使用，后面的过滤器处理的是前面一个过滤器return返回的结果-->
        我是串联filters修改后的数据：{{msg | add | unfhift}}
    </div>

    <script src="vuejs-2.5.16.js"></script>
    <script>
        // 定义全局过滤器
        Vue.filter('toupper',(v) =>{
            // 定义过滤器要做的事
            return v.charAt(0).toUpperCase()+v.substr(1);
        })
        new Vue({
            el:"#app",
            data:{
              msg:'avc'
              },
            //   定义局部filters，需要注意和全局过滤器关键字filter的区别 --> 结尾多了s
              filters:{
                add(v) {
                  return  v+"我是局部filters1";
                },
                unfhift(v) {
                  return  v+"---我是串联filters2"
                }
              }
        })
    </script>

 2、自定义指令：

           1、定义指令

                    1、自定义全局指令：1、vue.directive(指令名，{inserted(el){具体功能}}  

                 注意：inserted中的el指的是使用该指令的dom元素

                    2、自定义局部自定义指令directives：{指令名：{inserted(el){}}}    

                注意：只能在该选项所在的vue实例所管理的视图中使用

            2、具体功能 inserted(el){}

            3、使用方法：v-指令名

<div id="app">
       <input v-fo type="text" placeholder="我是id为app的输入框"/>
    </div>
    <br>
    <!-- <div id="blck">
       <input v-focus type="text" placeholder="我是id为blck的输入框"/>
    </div> -->
    <script src="vuejs-2.5.16.js"></script>
    <script>
        // 定义全局自定义指令，该指令可以供多个div使用
        Vue.directive('focus',{
            inserted(el){
                // 注意：这里的el指的是使用该指令的dom元素
                el.focus()
            }
        })
        new Vue({
            el:"#app",
            data:{
              },
        //定义局部自定义指令，该指令只能在该选项所在的vue实例所管理的视图中使用
              directives:{
                    fo:{
                        inserted(el){
                            el.focus()
                        }
                    }
              }
        })
        // new Vue({
        //     el:"#blck",
        //     data:{
        //       },
        //       methods:{

        //       }
        // })
    </script>

因为一个页面只可以有一处焦点，所以只有一块效果啦，感兴趣的小伙伴可以复制代码去试一下哦，有什么疑问可以在评论区留言，拜拜咯