Vue中计算属性、侦听、过滤、自定义指令、ref的操作
1.计算属性
<div id="app">
<input type="text" v-model="x">
<input type="text" v-model="y">
{{get}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
x:"",
y:""
},
computed:{
get:function(){
return this.x+this.y;
}
}
});
</script>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。
2.使用侦听器
<body>
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"",
},
watch: {
msg:function(newval,oldval){
if(newval=="admin"){
this.msg=oldval;
}else{
this.msg=newval;
}
}
},
});
</script>
我们发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
3.过滤器的使用
局部过滤器：
<body>
<div id="app">
<input type="text" v-model="msg">
{{msg|myf|nu}}
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data: {
msg:"",
},
filters:{
myf:function(val){
return val.toUpperCase();
},
nu:function(val){
var reg=/\d/g;
return val.replace(reg,'*');
}
}
});
</script>
全局过滤器：
<body>
<div id="app2">
<input type="text" v-model="msg">
{{msg|myf|nu}}
</div>
</body>
<script>
Vue.filter('myf',function(val){
return val.toUpperCase();
});
Vue.filter('nu',function(val){
var reg=/\d/g;
return val.replace(reg,'*');
});
var app2=new Vue({
el:"#app2",
data:{
msg:"",
}
});
</script>
过滤器要被添加到操作值得后面，使用 管道符 | 分割；vue会自动将操作值，以实参的形式传入过滤器的方法中；
4.自定义指令
前面我们学过 v-on 、v-model、v-show 等指令，在操作 dom 时使用了 ref 属性，其实之前学过的指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此 vue 允许我们自定义指令来操作 dom
<body>
<div id="app">
<p v-color>123131321</p>
</div>
</body>
<script>
//全局指令
// Vue.directive("color",{
// inserted:function(el){
// el.style.background="red";
// }
// });
var app=new Vue({
el:"#app",
directives:{
color:{
inserted:function(el){
el.style.background="green";
}
}
}
});
</script>
5.ref的使用
在学习 jq 时，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；
<body>
<div id="app">
<input type="button" value="按钮" @click="get">
<p ref="ps">211113131</p>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
methods: {
//用来获取具有ref属性的节点对象
get:function(){
alert(this.$refs.ps.innerHTML);
}
},
});
</script>
但是在项目开发中，尽可能不要使用ref，因为从一定程度上，ref 违背的mvvm设计原则；
Vue中计算属性、侦听、过滤、自定义指令、ref的操作的更多相关文章
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- Vue中计算属性（computed）和监听属性函数watch的比较
1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
- vue中计算属性中的set和get
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body& ...
随机推荐
- fjnu2019第二次友谊赛 B题
### 题目链接 ### 题目大意: 给你一个 n * m 的地图以及小蛇蛇头的初始位置,告诉你它会往 上.下.左.右 四个方向走.若在走的过程中(包括结束时)会使得小蛇越界,则输出 "Ga ...
- kubernetes haproxy+keepalive实现master集群高可用
前言 master的HA,实际是apiserver的HA.Master的其他组件controller-manager.scheduler都是可以通过etcd做选举(--leader-elect),而A ...
- Nginx图片防盗链配置
如果我们自己网站内的图片资源被其它网站所盗用,这会增加自己网站的带宽资源,增加很多额外的消耗,而且会对我们系统的稳定性有影响,为了防止自己网站上的图片资源被其它网站所盗用,我们需要给自己的服务器配置防 ...
- 工作笔记 之 Linux服务搭建
No.1 linux环境下安装nginx步骤 Nginx (engine x) 是一款轻量级的Web 服务器.反向代理服务器.电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行. ...
- H5 App实现热更新，不需要重新安装app
直接上代码吧,你竟然搜到了我的文章就应该知道了,为什么要热更新 //app热更新下载 //假定字符串的每节数都在5位以下 function toNum(a) { //也可以这样写 var c=a.sp ...
- Java后端，最全知识点
你可能有所感悟.零散的资料读了很多,但是很难有提升.到处是干货,但是并没什么用,简单来说就是缺乏系统化.另外,噪音太多,雷同的框架一大把,我不至于全都要去学了吧. 这里,根据基础.Java基础.Jav ...
- Xamarin Bindableproperty 可绑定属性
重要的事情说三遍: 本文基本是取自微软官方 Bindable Properties, 官方也提供了机翻的中文版本,笔者只是尝试用自己的理解描述一遍,便于记忆.如有不对之处,欢迎拍砖. 本文基本是取自微 ...
- SQL Server通过函数把逗号分隔的字符串拆分成数据列表的脚本-干货
CREATE FUNCTION [dbo].[Split](@separator VARCHAR(64)=',',@string NVARCHAR(MAX)) RETURNS @ResultTab ...
- Fiddler 过滤图片
fiddler过滤无用图片操作步骤1.在右侧Filters中勾选 Hide if URL contains 2.在 Hide if URL contains 中加入下面一行过滤图片代码 REGEX:( ...
- GetPrivateProfileInt 使用方法
GetPrivateProfileInt ＝>从ini文件取得数值 <参数> lpApplicationName String,指定在其中查找条目的小节.注意这个字串是不区分大小写的 ...