Vue的watch和computed方法的使用
Vue的watch属性
Vue的watch属性可以用来监听data属性中数据的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstname:"",
lastname:""
},
methods:{},
watch:{
firstname:function(){
console.log(this.firstname)
}
}
})
</script>
</body>
</html>
可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次
同时还可以直接在监听的function中使用参数来获取新值与旧值
watch:{
firstname:function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}
其中第一个参数是新值，第二个参数是旧值
同时Watch还可以被用来监听路由router的变化，只是这里的监听的元素是固定的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<!--
由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号
-->
<!-- <a href="#/login">登录</a>
<a href="#/register">注册</a>-->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</body>
<script>
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes:[
//此处的component只能使用组件对象，而不能使用注册的模板的名称
{path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:routerObj,//将路由规则对象注册到VM实例上
watch:{
'$route.path':function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}
})
</script>
</html>
计算属性Computed的作用
computed属性的作用与watch类似，也可以监听属性的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" />
<input type="text" v-model="lastname" />
<input type="text" v-model="fullname" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstname:"",
lastname:""
},
methods:{},
/* watch:{
firstname:function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}*/
computed:{
fullname:function(){
return this.firstname +"-"+this.lastname
}
}
})
</script>
</body>
</html>
只是他会根据他依赖的属性，生成一个属性，让vm对象可以使用这个属性
methods,watch,computed的区别
computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；methods方法表示一个具体的操作，主要书写业务逻辑；watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；
Vue的watch和computed方法的使用的更多相关文章
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- Vue（十二）vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
- 在Vue中关闭Eslint 的方法
在vue项目中关闭ESLint方法:找到 webpack.base.conf.js 将这些代码注释掉, { test: /\.(js|vue)$/, loader: 'eslint-loader', ...
- vue解决遮罩层滚动方法
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...
- vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el #指定要绑定的元素 vm.$data #Vue 实例的数据对象 vm.$options #获取自定义属性的值 new Vue({ customOpti ...
随机推荐
- 【MM系列】SAP S/4 HANA 1511的BP角色创建及供应商数据的创建方法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP S/4 HANA 1511的 ...
- MySQL 数据库下载
地址链接: msi:https://dev.mysql.com/downloads/installer/ zip:https://downloads.mysql.com/archives/commun ...
- spring boot-14.集成MyBatis
1.如何使用注解版Mybatis? (1)引入mybatis ,druid,Mysql 的依赖,环境搭建可以参考第13篇的内容 <dependency> <groupId>or ...
- 通过node指令自动创建一个package.json文件，并封装发布使用
通过node指令自动创建一个package.json文件,并封装发布使用:https://blog.csdn.net/scu_cindy/article/details/78208268
- 洛谷 P1578 奶牛浴场 题解
题面 1.定义有效子矩形为内部不包含任何障碍点且边界与坐标轴平行的子矩形.如图所示,第一个是有效子矩形(尽管边界上有障碍点),第二个不是有效子矩形(因为内部含有障碍点). 2.极大有效子矩形:一个有效 ...
- BZOJ 1257 余数之和 题解
题面 这道题是一道整除分块的模板题: 首先,知道分块的人应该知道,n/i最多有2*sqrt(n)种数,但这和余数有什么关系呢? 注意,只要n/i的值和n/(i+d)的值一样,那么n%i到n%(i+d) ...
- Spring Boot解决无法访问图片的问题
找了很多Spring Boot项目访问图片的解决方式,发现都是配置的,有时配置了也没有用.然后自己研究了一种简单操作的方法. 1,在Spring Boot的static目录下创建一个新目录img(或者 ...
- 集成学习-Adaboost 进阶
adaboost 的思想很简单,算法流程也很简单,但它背后有完整的理论支撑,也有很多扩展. 权重更新 在算法描述中,权重如是更新 其中 wm,i 是m轮样本i的权重,αm是错误率,Øm是第m个基学习器 ...
- Java基础——Modifier类
转自:https://www.cnblogs.com/baiqiantao/p/7478523.html 反射 Reflect Modifier 修饰符工具类 在查看反射相关的Class.Fiel ...
- qt在tableview中绘制图片
void ItemModelDeletage::paint(QPainter *painter, const QStyleOptionViewItem &option, const QMode ...