过滤器：

　　过滤是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰。过滤器就是过滤用的工具。渲染数据用的！！！

　　我们需要知道的是：

　　1、Vue中的过滤器不能替代Vue中的methods、computed或者watch。

　　2、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。　

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

二、过滤器：

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;
    
        }
    
      });
												


											
Vue学习之过滤器和自定义指令小结（三）的更多相关文章
	

    
								
  1. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
		
    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
    
		
    2. 
						
  2. vue学习(十八)使用自定义指令 为字体渲染颜色
		
    <div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...
    
		
    3. 
						
  3. Vue学习之基础及部分指令小结（一）
		
    一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View V ...
    
		
    4. 
						
  4. Vue.js学习 Item13 – 指令系统与自定义指令
		
    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
    
		
    5. 
						
  5. Vue.js学习 Item14 – 过滤器与自定义过滤器
		
    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...
    
		
    6. 
						
  6. VUe键盘修饰符及自定义指令获取焦点
		
    首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...
    
		
    7. 
						
  7. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
		
    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
    
		
    8. 
						
  8. Vue学习之品牌案例部分代码小结（二）
		
    品牌案例的增删查和其他部分效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
    
		
    9. 
						
  9. vue学习笔记（五）——指令
		
    13条指令 1. v-text (数据绑定语法-插值) <span v-text="msg"></span> <!-- 和下面的一样 --> & ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C# XML封装
			
    /************************************************* * 描述: * * Author:yuanshuo@healthcare.cn * Date:20 ...
    
			
    2. 
						
  2. 树莓派项目（1-2）人脸识别 C++
			
    级联分类器 在这里,我们学习如何使用objdetect在我们的图像或视频中查找对象 https://docs.opencv.org/3.3.0/db/d28/tutorial_cascade_clas ...
    
			
    3. 
						
  3. Windbg Scratch Pad(便笺簿)窗口的使用
			
    “便笺簿”窗口是一个剪贴板,您可以在其中键入和保存文本. 打开便笺簿 通过菜单View--->Scratch Pad 通过快捷键Alt+8 通过工具栏 使用便笺簿 用上面的方式打开的窗口如下:  ...
    
			
    4. 
						
  4. windows下 zabbix agent心跳数据获取异常
			
    模板中的心跳监控项默认是主动性的,在windows下直接装上客户端后,如果不协调时间,可能会出现心跳数据异常, 因为是主动式的监控,agent上的数据主动的推送到server上,但是从server上看 ...
    
			
    5. 
						
  5. GoogleHacking语法篇
			
    常用GoogleHacking语法: 1.intext:(仅针对Google有效) 把网页中的正文内容中的某个字符作为搜索的条件 2.intitle: 把网页标题中的某个字符作为搜索的条件 3.cac ...
    
			
    6. 
						
  6. Docker ubuntn 使用apt-get update报错
			
    在docker 容器中执行apt-get update有时候会报错,当然造成错误的原因有很多情况,具体情况具体分析, APT Hash sum mismatch错误的常见解决方法总结这篇博客写的不错, ...
    
			
    7. 
						
  7. 分布式事务解决方案（一） 2阶段提交 & 3阶段提交 & TCC
			
    参考文档:http://blog.jobbole.com/95632/https://yq.aliyun.com/articles/582282?spm=a2c4e.11163080.searchbl ...
    
			
    8. 
						
  8. HSA AMD异构计算架构
			
    当前的CPU和GPU是分立设计的处理器,不能高效率地协同工作,编写同时运行于CPU和GPU的程序也是相当麻烦.由于CPU和GPU拥有独立的地址空间,应用程序不得不明确地控制数据在CPU和GPU之间的流 ...
    
			
    9. 
						
  9. Error Code: 1175. You are using safe update
			
    使用MySQL执行update的时候报错:Error Code: 1175. You are using safe update mode and you tried to update a tabl ...
    
			
    10. 
						
  10. 《Linux就该这么学》自学笔记_ch21_使用Git分布式版本控制系统
			
    <Linux就该这么学>自学笔记_ch21_使用Git分布式版本控制系统 文章主要内容: 分布式版本控制系统 使用Git服务程序 提交数据 移除数据 移动数据 历史记录 还原数据 管理标签 ...
    
			
    11.