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> <!-- 和下面的一样 --> & ...
随机推荐
- NGUI里的sprite和label有白色的边框
问题描述:NGUI里的sprite和label有白色的边框,而原图一切正常 如图: 解决方案: 给Sprite 边缘左右更增加1,这样拉伸的时候就忽略了左右1的位置,图片就不会显示白色边框了
- 15-cmake语法-math
math 数学表达式 math(EXPR <output variable> <math expression>) 例子: math(EXPR VAR "${VAR} ...
- matlab-层次分析法
层次分析法(AHP)是把问题条理化.层次化,构造出一个有层次的结构模型的方法. 比如要选择旅游地,有3个选择方案,苏杭.北戴河和桂林.选择过程需要考虑多个因素,比如景色.费用.居住.饮食和旅途. 1. ...
- django运行报错TypeError: object supporting the buffer API required
运行django项目报错:TypeError: object supporting the buffer API required 解决方案: 将settings.py中数据库的密码改成字符串格式 源 ...
- ORM属性/字段
一. ORM字段 (models.py文件中创建类,继承models.Model) class Book(models.Model): # 书籍列表 bid=models.AutoField(p ...
- 题解 洛谷 P2010 【回文日期】
By:Soroak 洛谷博客 知识点:模拟+暴力枚举 思路:题目中有提到闰年然后很多人就认为,闰年是需要判断的其实,含有2月29号的回文串,前四位是一个闰年那么我们就可以直接进行暴力枚举 一些小细节: ...
- 【字符串】【P5830】 【模板】失配树
[字符串][P5830] [模板]失配树 Description 给定一个长度为 \(n\) 的字符串 \(S\),有 \(m\) 次询问,每次询问给定 \(S\) 的两个前缀,求它们的最长公共 bo ...
- 趣谈Linux操作系统学习笔记：第二十七讲
一.文件系统的功能规划 1.引子 咱们花了这么长的时间,规划了会议室管理系统,这样多个项目执行的时候,隔离性可以得到保证. 但是,会议室里面被回收,会议室里面的资料就丢失了.有一些资料我们希望项目结束 ...
- BBS项目-01
目录 BBS项目 BBS开发流程: BBS表格创建: BBS项目 BBS开发流程: BBS项目: 开发流程: 需求分析 草拟一些项目的大致技术点和流程 架构设计 架构师(框架 语言 数据库 缓存数据库 ...
- Js中的排他思想
<body> <button>按钮1</button> <button>按钮2</button> <butto ...