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 ...
随机推荐
- screen重新连接会话
1.# yum -y install screen 2.# screen 3.# /usr/local/kibana/bin/kibana (具体使用案例) 然后按ctrl+a+d组合键,暂时断开s ...
- 【嵌入式开发】树莓派+官方摄像头模块+VLC串流实时输出网络视频流
sudo apt-get update sudo apt-get install vlc sudo raspivid -o - -t 0 -w 640 -h 360 -fps 25|cvlc -vvv ...
- 2019JAVA第四次实验报告
JAVA实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/29 评分等级 实验四 类的继承 1.实验目的 掌握类的继承方法: 变量的继承和覆盖,方法的继承.重载和 ...
- Qt - 基于TCP的网络编程
TCP(传输控制协议 Transmission Control Protocol) 可靠.面向数据流.面向连接 的传输协议.(许多应用层协议都是以它为基础:HTTP.FTP) 使用情况: 相比UDP ...
- abp.event.on与abp.event.off使用
apb的全局事件 var eventName = "app.createOrEditFieldModalSaved"; var reloadPage = function () { ...
- Java第四周总结报告
本周做了什么? 学习了Java的面向对象知识,包括对类,对象,抽象的理解 下周准备做什么? 学习Java面向对象的有关知识,包括对象与类,继承关系等内容 代码联系时间五个小时,看书四个小时. 本周遇到 ...
- python3抓取中国天气网不同城市7天、15天实时数据
思路:1.根据city.txt文档来获取不同城市code2.获取中国天气网7d和15d不同城市url3.利用requests库请求url获取html内容4.利用beautifulsoup获取7d和15 ...
- 工作中常用到的JS验证
Common.js // JavaScript Document // _ooOoo_ // o8888888o // 88" . "88 // (| -_- |) // O\ = ...
- Gym 101466(完整)
题目链接 :点击此处 ## Problem A 题意: 给你n个数,重定义两个数之间的加法不进位,求这些数中两个数相加的最大值和最小值. 题解: 字典树.我们首先将前i-1为放入字典树中,然后在查询第 ...
- phpstudy配置多站点
1.打开vhosts.conf文件 目录 Apache/conf/vhosts.conf #开启apache的vhost模块 (此模块默认是关闭的,去掉前面的#号) LoadModule vh ...