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& ...
随机推荐
- 使用 html2canvas 点击保存时把当前页面生成图片
style: #box{ background-image:url('./img/pone.png') } body: <div id="box" ...
- vscode 格式化代码 与 eslint 有冲突的问题解决
项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致.然后在配置中加了配置也无效(File - Preference - Setting) 查了下原因是在vue开发的时候我们一般都安装 ...
- Python time.time()方法
描述 Python time time()返回当前时间的时间戳. 时间戳:时间戳是指格林威治时间1970年01月01日00时00分00秒(背景时间1970年01月01日08时00分00秒)起至现在的总 ...
- SpringBoot2.0 整合 SpringSecurity 框架，实现用户权限安全管理
本文源码:GitHub·点这里 || GitEE·点这里 一.Security简介 1.基础概念 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方 ...
- vue路由传参和获取参数
参考链接 https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5% ...
- Java - IO 内存流和打印流
IO 内存流和打印流操作 字符编码 计算机中所有的信息组成都是二进制数据,所有能够描述的中文文字都是经过处理后的结果:所有的语言文字都会使用编码来进行描述,例如:ASCII码 常见编码 GBK/GB2 ...
- linux学习（八)Shell中变量的数学运算
目录 常见的运算符 expr命令 @(Shell中变量的数学运算) 常见的运算符 环境变量 说明 + 加 - 减 * 乘 / 除 % 取模 因为Shell中将*作为通配符使用, expr命令 expr ...
- SQL Server 查询某一个数据库存储过程、函数是否包含某一个内容或者脚本
SELECT obj.Name 名称, sc.TEXT 内容FROM syscomments scINNER JOIN sysobjects obj ON sc.Id = obj.IDWHERE sc ...
- Phoenix核心功能原理及应用场景介绍以及Calcite 查询计划生成框架介绍
Phoenix是一个开源的HBase SQL层.它不仅可以使用标准的JDBC API替代HBase Client API创建表,插入和查询HBase,也支持二级索引.事物以及多种SQL层优化. 此系列 ...
- mssql sqlserver 添加表注释和添加列注释的方法分享
转自: http://www.maomao365.com/?p=8919 摘要: 下文讲述使用sql脚本对数据表或数据列添加注释(备注说明)的方法分享,如下所示: 实验环境:sql server 2 ...