vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一、监听数据变化
1、监听数据变化有两种，深度和浅度，形式如下：
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视
2、实例用法
2.1-1浅度监听：当点击页面，弹出发生变化了，a的值变为1，b的值变为101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浅度监听1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:111,
b:2
}
}); vm.$watch('a',function(){
alert('发生变化了'); this.b=this.a+100;
}); document.onclick=function(){
vm.a=1;
};
}; </script>
</head>
<body>
<div id="box">
{{a}}
<br>
{{b}}
</div> </body>
</html>
2.1-2浅度监听：点击页面之后，弹出“发生变化了”，页面变为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浅度监听2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
json:{name:'strive',age:16},
b:2
}
}); vm.$watch('json',function(){
alert('发生变化了');
}); document.onclick=function(){
vm.json.name='aaa';
};
}; </script>
</head>
<body>
<div id="box">
{{json | json}}
<br>
{{b}}
</div> </body>
</html>
2.2深度监听：可以监视对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深度监听</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
json:{name:'strive',age:16},
b:2
}
}); vm.$watch('json',function(){
alert('发生变化了');
},{deep:true}); document.onclick=function(){
vm.json.name='aaa';
};
}; </script>
</head>
<body>
<div id="box">
{{json | json}}
<br>
{{b}}
</div> </body>
</html>
运行结果：
二、自定义指令
vue中自带的指令往往有时候满足不了我们实际的需求，例如当小于9时显示为09，当大于9时显示为原本的数。所以我们这个时候就需要自己定义一些指令
1、基本语法
自定义指令:
属性: Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
}); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头
2、基本用法
2.1 v-red -> red
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(){ //和下面的v-red相对应
this.el.style.background='red';
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
}; </script>
</head>
<body>
<div id="box">
<span v-red>
asdfasd
</span>
</div> </body>
</html>
运行结果：
2.2、自定义指令参数为变量的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令参数用法</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(color){ //将下面的a的值传给color
this.el.style.background=color;
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
}; </script>
</head>
<body>
<div id="box">
<span v-red="a"> //是上面的变量a
asdfasd
</span>
</div> </body>
</html>
运行结果：
2.3参数为值的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>参数为值的用法</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(color){
this.el.style.background=color;
}); window.onload=function(){
var vm=new Vue({
el:'#box'
});
}; </script>
</head>
<body>
<div id="box">
<span v-red="'blue'"> //这里的blue就是普通的值
asdfasd
</span>
</div> </body>
</html>
运行结果：
2.4自定义指令就是默认绑定的bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',{
bind:function(){
this.el.style.background='red';
}
}); window.onload=function(){
var vm=new Vue({
el:'#box'
});
}; </script>
</head>
<body>
<div id="box">
<span v-red>
asdfasd
</span>
</div> </body>
</html>
运行结果：
2.5自定指令进行拖拽小实例：可以进行拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令--拖拽小实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
Vue.directive('drag',function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
}; </script>
</head>
<body>
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
</div> </body>
</html>
三、过滤器
3.1、配合事件使用的过滤器：debounce—>延迟执行事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>debounce--延迟执行</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<input type="text" @keyup="show | debounce 2000"> //按键之后，将过2秒弹出1
</div>
<script> var vm=new Vue({
data:{ },
methods:{
show:function(){
alert(1);
}
}
}).$mount('#box'); </script>
</body>
</html>
3.2配合数据使用的过滤器
3.2.1：limitBy用法
基本用法
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
limitBy 限制几个，
limitBy 参数(取几个)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>limitBy 限制几个</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<ul>
<li v-for="val in arr | limitBy 2"> //限制显示为2个，也可改为参数
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
运行结果：
limitBy 取几个 从哪开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>limitBy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<ul>
<li v-for="val in arr | limitBy 2 arr.length-2">
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
运行结果：取2个，从数组的倒数第二个开始取
3.2.2、filterBy 过滤数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filterBy的用法</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
运行结果：当在文本框输入w时只会出现width,其余的都将被过滤掉
3.2.3、orderBy:倒序还是正序排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>orderBy倒序排列，1为正序，-1为倒序</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy -1"> //这里的-1也可为变量
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
运行结果：
四、自定义过滤器
1、基本语法
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){ });
2.基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a | toDou}}
</div>
<script>
Vue.filter('toDou',function(input){ //自定义过滤器
return input<10?'0'+input:''+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
运行结果：
3、自定义时间转化器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义时间转化器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a | date}}
</div>
<script>
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
}); var vm=new Vue({
data:{
a:Date.now()
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
运行结果：
五、自定义键盘信息
1、基本 语法
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义键盘信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
//ctrl->17
/*document.onkeydown=function(ev){
console.log(ev.keyCode);
};*/
Vue.directive('on').keyCodes.ctrl=17; // ctrl
Vue.directive('on').keyCodes.myenter=13; //enter window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
},
methods:{
show:function(){
alert(1);
}
}
});
}; </script>
</head>
<body>
<div id="box">
<input type="text" @keydown.myenter="show | debounce 2000">
</div> </body>
</html>
运行结果：当按下enter键之后过2秒弹出1
vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化的更多相关文章
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- js 实现watch监听数据变化
1.js /** * @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch * @author Jason * @study https://www.jianshu.c ...
- Vue中使用watch来监听数据变化
写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- Vue.JS快速上手（指令和实例方法）
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- React和Vue中，是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
- vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 简单说下 Winform 的分页快速开发框架必须要实现的几个功能之一
简单说下 Winform 的分页快速开发框架必须要实现的几个功能之一 分页非为前端分页 和 后端分页,前端分页只有适用于B/S,B/S的呈现速度远远不如C/S,而C/S则没有这个问题,所以分页必然是 ...
- 十二、VueJs 填坑日记之项目打包发布
通过上一篇博文的学习,我们其实已经完成了我们设想的项目的开发.但是,我们做好的这套东西,是基于 nodejs 开发的.而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服 ...
- php垃圾回收
php所有的变量都存在一个zval的结构里面,通过refcount和is_ref来存储变量的引用关系.refcount是变量的引用次数,is_ref是变量是否被引用,当is_ref=0的时候refco ...
- CNN网络介绍与实践：王者荣耀英雄图片识别
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者介绍:高成才,腾讯Android开发工程师,2016.4月校招加入腾讯,主要负责企鹅电竞推流SDK.企鹅电竞APP的功能开发和技术优化工作 ...
- nginx+tomcat安装配置
nginx+tomcat安装配置 # nginx+tomcat安装配置 #创建网站目录 mkdir -p /www/wwwroot cd /www #安装配置 wget http://mirrors. ...
- jmeter接口系列：时间戳、加密
JMeter安装配置 从官网下载JMeter的软件包apache-jmeter-x.x.zip,下载完成之后解压打开jmeter.bat即可. 说明 这里使用的jmeter版本是3.0,jdk版本是j ...
- mustache.js 使用
对于mustache模板,我是属于即用即查的方法,以下记录仅是我常用的方式.方便以后使用时不用再去项目中去找,因为真的不好找.(此处 -->serious 脸) 当需要渲染一些数据列表的时候,使 ...
- IntelliJ IDEA（四） ：Settings【Appearance and Behavior】
前言 IDEA是一个智能开发工具,每个开发者的使用习惯不同,如何个性化自己的IDEA?我们可以通过Settings功能来设置.Settings文件是IDEA的配置文件,通过他可以设置主题,项目,插件, ...
- redmine工作流程总结
1.需求调研员和測试员新建问题,问题跟踪为支持,指派给产品经理 2.产品经理对收到的问题进行分类处理,功能类型的,改动跟踪状态为功能,指派给自己.是bug类型的,将跟踪类型改动错误类型,指派给技术经理 ...
- c语言中字符串函数的使用
#include<stdio.h> #include<string.h> /* char s1[]="I am a student"; char s2[20 ...