过滤器:

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

  我们需要知道的是:

  1、Vue中的过滤器不能替代Vue中的methodscomputed或者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: 指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • 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: 上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。
     //获取焦点的字体颜色变成指定的颜色!
    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. vue学习(十八)使用自定义指令 为字体渲染颜色

    <div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...

  3. Vue学习之基础及部分指令小结(一)

    一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View V ...

  4. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  5. Vue.js学习 Item14 – 过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...

  6. VUe键盘修饰符及自定义指令获取焦点

    首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...

  7. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  8. Vue学习之品牌案例部分代码小结(二)

    品牌案例的增删查和其他部分效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. vue学习笔记(五)——指令

    13条指令 1. v-text (数据绑定语法-插值) <span v-text="msg"></span> <!-- 和下面的一样 --> & ...

随机推荐

  1. USACO Hide and Seek

    洛谷 P2951 [USACO09OPEN]捉迷藏Hide and Seek 洛谷传送门 JDOJ 2641: USACO 2009 Open Silver 1.Hide and Seek JDOJ传 ...

  2. ant design pro如何实现分步表单时,返回上一步值依然被保存

    首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...

  3. LeetCode 885. Spiral Matrix III

    原题链接在这里:https://leetcode.com/problems/spiral-matrix-iii/ 题目: On a 2 dimensional grid with R rows and ...

  4. 深入js系列-类型(null)

    首先null是表示什么状态呢 这个是需要和上篇的undefined做一个区分 undefined 从未赋值 非关键词(也就是可以定义为变量名或者赋值给它) null 曾经赋值.目前没值 关键词 typ ...

  5. SpringData JPA实现增删改查

    application.properties配置 一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 结果: 删除操作: 修改操作:

  6. CF1215E Marbles

    CF1215E Marbles 传送门 思路 一道比较有意思的状压dp. 首先有一个结论,把一个序列通过交换相邻元素排序,那么交换次数的最小值就是逆序对个数. 证明:从小到大依次把元素换到最前面,那么 ...

  7. [转]MySQL之——崩溃-修复损坏的innodb:innodb_force_recovery

    原文 https://blog.csdn.net/l1028386804/article/details/77199194 1. mysql崩溃 --------------------------- ...

  8. Spring Boot 《一》开发一个“HelloWorld”的 web 应用

    一,Spring Boot 介绍 Spring Boot不是一个新的框架,默认配置了多种框架使用方式,使用SpringBoot很容易创建一个独立运行(运行jar,内嵌Servlet).准生产级别的基于 ...

  9. unity内存管理(转)

    转自:https://www.cnblogs.com/zsb517/p/5724908.html Unity3D 里有两种动态加载机制:一个是Resources.Load,另外一个通过AssetBun ...

  10. [转帖]华为PC端台式机电脑来啦!自研主板及自研CPU处理器

    华为PC端台式机电脑来啦!自研主板及自研CPU处理器 在性能上,4核版相当于酷睿i5 ,8核版相当于酷睿i5 8300H. https://www.bilibili.com/read/cv376376 ...