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& ...
随机推荐
- Leetcode题解 - BFS部分题目代码+思路（896、690、111、559、993、102、103、127、433）
和树有关的题目求深度 -> 可以利用层序遍历 -> 用到层序遍历就想到使用BFS 896. 单调数列 - 水题 class Solution: def isMonotonic(self, ...
- HDU - 5952 Counting Cliques
Counting Cliques HDU - 5952 OJ-ID: hdu-5952 author:Caution_X date of submission:20191110 tags:dfs,gr ...
- Linux下离线安装python项目的依赖包
第一步新建一个site-packages文件夹,把python项目有需要的依赖包名称导出到site-packages下的requirements.txt中 $ pip3 freeze > req ...
- 利用 chunked 类型响应实现后台请求的监听
Koa 中实现 chunked 数据传输 中介绍了如何在 Koa 中实现 Transfer-Encoding:chunked 类型的响应分片传输.这里来看一个应用场景. 假如我们想监听后台的请求,并将 ...
- 深入selenium模块基础操作
selenium模块的基本操作 一.模拟浏览器 谷歌.Firefox.Safari等浏览器 browser=webdriver.Chrome() browser=webdriver.Firefox ...
- element的表单校验自动定位到该位置
遇到的项目问题是在每个折叠面板里边都有不同的表单,用element上的校验时,若有没填写的表单或不符合表单格式的要求,则自动展开该折叠面板,且页面定位到没校验成功的表单 this.$refs.fo ...
- echarts玩转图表之矩形树图
前言 这是第一次用makedown编辑器写文章,感觉像一件利器,排版美观而且效率飙升.进入正题 Echart官网文档地址 针对于矩形树图api配置项链接 1. 完全从数据定义图形 $.get( &qu ...
- html5+css3画太极并添加动画效果
可兼容移动端视图 效果图如下:太极图是可以旋转的 具体实现如下: <!DOCTYPE html> <html lang="zh"> <head> ...
- 【转】关闭firefox火狐浏览器下载完成时自动扫描（49.0.2以后版本）
用firefox火狐浏览器下载文件到最后时,会显示"剩余时间未知",将持续10秒钟左右,即使几KB 的文件,也要持续这么长时间,问度娘才知道是自动扫描,检查是否有毒,用的却是Goo ...
- SpringMVC重定向路径中带中文参数
SpringMVC重定向路径中带中文参数 springboot重定向到后端接口测试 package com.mozq.http.http_01.demo; import org.springframe ...