Vue学习之过滤器和自定义指令小结（三）
过滤器：
过滤是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰。过滤器就是过滤用的工具。渲染数据用的！！！
我们需要知道的是：
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 }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。//获取焦点的字体颜色变成指定的颜色！
Vue.directive("color", {
bind: function(el, binding) {
el.style.color = binding.value;
}
});
Vue学习之过滤器和自定义指令小结（三）的更多相关文章
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue学习(十八)使用自定义指令 为字体渲染颜色
<div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...
- Vue学习之基础及部分指令小结（一）
一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View V ...
- Vue.js学习 Item13 – 指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
- Vue.js学习 Item14 – 过滤器与自定义过滤器
基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...
- VUe键盘修饰符及自定义指令获取焦点
首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- Vue学习之品牌案例部分代码小结（二）
品牌案例的增删查和其他部分效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- vue学习笔记（五）——指令
13条指令 1. v-text (数据绑定语法-插值) <span v-text="msg"></span> <!-- 和下面的一样 --> & ...
随机推荐
- 第二章 linux不为人知的命令
文件和目录命令 cd /home 进入 home目录' cd ..返回上一级目录 pwd显示当前工作路径 ls查看目录中的文件 ls -l 显示文件和目录的详细资料(可简写为ll),后可跟具体文件名 ...
- c语言中的数据类型的最大最小值
#include <float.h>#include <limits.h> int n1 = INT_MIN;int n2 = INT_MAX;float f1 = F ...
- java 监控文件夹 WatchService
原文链接 :http://blog.csdn.net/lirx_tech/article/details/51425364 public class WacthFileUtil { public st ...
- Pandas | 26 疏离数据
当任何匹配特定值的数据(NaN/缺失值,尽管可以选择任何值)被省略时,稀疏对象被“压缩”. 一个特殊的SparseIndex对象跟踪数据被“稀疏”的地方. 这将在一个例子中更有意义. 所有的标准Pan ...
- django ORM创建
简短的例子 from django.db import models class Person(models.Model): first_name = models.CharField(max_len ...
- 网络协议 16 - DNS 协议
为什么在地址栏输入域名,就能直接访问到对应服务器?全局负载均衡和内部负载均衡又是什么?这些都和 DNS 解析息息相关,让我们一起来解密 DNS 解析. 其实说起 DNS 解析,应该都知道它很像 ...
- NOIP2019翻车前写(and 抄)过的代码
咕咕咕.按上传时间升序排列. //树的重心 void dfs(int x) { v[x]=1; size[x]=1; int max_part=0; for(int i=hed[x];i;i=nxt[ ...
- idea 2018.1 创建springboot开启找回Run Dashboard
Run Dashboard 他是一个代替Run窗口的一个更好清晰简介的一个启动器.一般我们需要启动多个窗口时,Run窗口不能让我们直观的看到我们看到每一个端口的变化. 我们可以对比一下这个是Run D ...
- 常见网页编辑器(富文本，Markdown，代码编辑等)
编辑器:网页不常用的功能,但却又是不可少的功能,如果要造个编辑器轮子,它可以把人玩死!!前端几大禁忌就有富文本, 为什么都说富文本编辑器是天坑? 下面记录一下常见的一些编辑器,该文随时更新: 富文本编 ...
- USB、UART、SPI等总线速率(转)
1. USB总线 USB1.1: ——-低速模式(low speed):1.5Mbps ——-全速模式(full speed): 12Mbps USB2.0:向下兼容.增加了高速模式,最大速率480M ...