过滤器：

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

　　我们需要知道的是：

　　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. Browser cannot find PAC because wpad hostname cannot be resolved
			
    Enterprise Network administrator may faultly forget to configure wpad hostname to DNS server. If use ...
    
			
    2. 
						
  2. vue+ typescript 使用parcel 构建
			
    parcel 是一个零配置的前端构建工具,相比webpack 更快,同时使用简单以下是 一个简单的使用typescript 开发vue 应用,同时使用parcel 构建,同时集成了docker 构建, ...
    
			
    3. 
						
  3. ESA2GJK1DH1K升级篇: 升级STM32 预热: 单片机每隔一定时间 使用 http 获取天气
			
    前言: 实现功能概要: STM32使用AT指令控制Wi-Fi以TCP方式连接服务器(YY天气Web服务器),然后使用http的get协议获取今天的天气数据 单片机提取今天的温度和湿度数据,把温湿度数据 ...
    
			
    4. 
						
  4. django -- 安装django
			
    安装 通过cmd进行安装 pip3 install django==1.11.11 创建django项目 通过命令行进行创建 下面的命令创建了一个名为"mydjango"的Djan ...
    
			
    5. 
						
  5. webpack中的hash、chunkhash、contenthash区别
			
    hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CD ...
    
			
    6. 
						
  6. vb.net 获取文件的版本号
			
    dim strVersion =  Reflection.Assembly.LoadFrom(strFileName).GetName().Version.ToString()
    
			
    7. 
						
  7. 使用ps将短视频制作成gif以进行展示遇到的问题
			
    前言 为了将我们完成的微信小程序小小易校园展示给没用过的用户进行宣传,我们选择将小程序的页面使用过程录屏并制作成GIF来进行展示.制作选择的工具经过初步尝试及对比,最终选择了Adobe Photosh ...
    
			
    8. 
						
  8. Gamma展示
			
    团队成员简介 团队成员 角色 个人博客地址 刘峻辰 后端开发 刘峻辰 焦云鹏 后端开发 焦云鹏 赵智源 测试&服务器部署 赵智源 肖萌威 前端开发 肖萌威 杨亦鑫 前端开发 杨亦鑫 戴荣 UI ...
    
			
    9. 
						
  9. c++primer（第五版） 阅读笔记
			
    快速阅读一遍c++ primer,复习c++ 1.本书代码:http://www.informit.com/store/c-plus-plus-primer-9780321714114 2.本书结构:
    
			
    10. 
						
  10. Tomcat对取消post长度限制
			
    1.Tomcat 默认的post参数的最大大小为2M, 当超过时将会出错,可以配置maxPostSize参数来改变大小. 从 apache-tomcat-7.0.63 开始,参数 maxPostSiz ...
    
			
    11.