当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue学习之过滤器和自定义指令小结（三）

Vue学习之过滤器和自定义指令小结（三）

2019年06月30日  | 移动技术网IT编程  | 我要评论

一、品牌项目的添加功能的思路（双向数据绑定）：

 

二、过滤器：

1、过滤器调用时候的格式：

{{ name | 过滤器的名称 }} 

2、过滤器的定义语法：

vue.filter('过滤器的名称’， function(){})
//过滤器中的function ， 第一个参数，已经被规定死了，永远都是 过滤器 管道符| 前面 传递过来的数据

3、定义私有过滤器有两个条件：过滤器的名称 和  处理函数

 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>document</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{  msg | msgformat('疯狂+1','123') | test }}</p>
    </div>

    <script>
      // 定义一个vue全局的过滤器，名字叫 msgformat
      vue.filter("msgformat", function(msg, arg, arg2) {
        // 字符串的replace 方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
        return msg.replace(/单纯/g, arg + arg2);
      });

      vue.filter("test", function(msg) {
        return msg + "========";
      });
      var vm = new vue({
        el: "#app",
        data: {
          msg: "我们都是一群单纯的人，单纯的年代培养着单纯的我们"
        }
      });
    </script>
  </body>
</html>

 三、自定义指令：

 //使用 vue.directive() 定义的指令 v-focus
      // 其中：参数1： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀
      //但是,在调用的时候，必须在指令名称前，加上v-前缀来进行调用
      // 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
      vue.directive("focus", {
        bind: function(el) {
          //每当指令绑定到元素上的时候，会立即执行这个bind 函数，只执行一次
          //注意：在每个函数中，第一个参数，永远都是el，表示 被绑定了指令的那个元素，这个el参数，是一个原生的js对象
          //在元素 刚绑定了指令的时候，还没有插入到dom中去，这时候，调用 focus 方法没有作用
          //因为，一个元素，只有插入dom后，才能获取焦点
        },
        inserted: function(el) {
          //inserted表示元素插入到dom中的时候，会执行 inserted 函数（触发1次）
          el.focus();
        },
        updated: function(el) {
          //当vnode更新的时候，会执行 updated，可能会触发多次
        }

 　　样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式，将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素。

详情见菜鸟教程有关钩子函数介绍https://www.runoob.com/vue2/vue-custom-directive.html

钩子函数的参数有：

  • el: 指令所绑定的元素，可以用来直接操作 dom 。
  • binding: 一个对象，包含以下属性：
    • name: 指令名，不包括 v- 前缀。
    • value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
    • oldvalue: 指令绑定的前一个值，仅在 update 和 componentupdated 钩子中可用。无论值是否改变都可用。
    • expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
    • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
    • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  • vnode: vue 编译生成的虚拟节点。
  • oldvnode: 上一个虚拟节点，仅在 update 和 componentupdated 钩子中可用。 
     //获取焦点的字体颜色变成指定的颜色！
      vue.directive("color", {
        bind: function(el, binding) {
          el.style.color = binding.value;
        }
      });

     

 



 


                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                 
                 

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网