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& ...
随机推荐
- [Vue warn]: Invalid prop: type check failed for prop "fullscreen"
fullscreen属性是Dialog弹窗中定义是否为全屏 Dialog的属性,element 官方文档中默认值是false ,于是加入是对其赋值 true,然后报了下面的错误: 解决办法:实际上并不 ...
- JDK1.8源码分析02之阅读源码顺序
序言:阅读JDK源码应该从何开始,有计划,有步骤的深入学习呢? 下面就分享一篇比较好的学习源码顺序的文章,给了我们再阅读源码时,一个指导性的标志,而不会迷失方向. 很多java开发的小伙伴都会阅读jd ...
- Python中常见的8种数据结构的实现方法（建议收藏）
数据结构作为计算机基础的必修内容,也是很多大型互联网企业面试的必考题.可想而知,它在计算机领域的重要性. 然而很多计算机专业的同学,都仅仅是了解数据结构的相关理论,却无法用代码实现各种数据结构. 栈 ...
- Java操作数据库——使用连接池连接数据库
Java操作数据库——使用连接池连接数据库 摘要:本文主要学习了如何使用JDBC连接池连接数据库. 传统方式和连接池方式 传统方式的步骤 使用传统方式在Java中使用JDBC连接数据库,完成一次数据库 ...
- .WrongArgumentException: Malformed database URL, failed to parse the connection string near ';characterEncoding=UTF-8&;serverTimezone=Asia/Shanghai'.)
连接mysql库报的异常信息: org.springframework.transaction.CannotCreateTransactionException: Could not open JDB ...
- URL.createObjectURL()的使用方法
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
- CSS学习笔记_1
1.调用 内部样式表: css可以直接在html代码里面使用</style></style>节点.允许html代码中有两个style节点,但是起作用的是靠后的节点 如图的代码, ...
- Cesium专栏-视频投影(附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- php代码如何加域名授权？开源php项目如何保护版权 商业授权？
php在web开发领域是最热门的语言,也是开发项目的不二选择,许多PHP开发者说它是当今世界上最好的开发语言,php开发项目效率高,是因为开源项目太多了,不管是国内,还是国外,开源的框架,开源的CMS ...
- UIView设置阴影
UI设计师有时候希望我们的产品比较酷. 阴影是他们喜欢的效果之一. 怎么设置阴影呢? 1.设置一个四边都相同的阴影 UIImageView *testImgView = [[UIImageView a ...