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 ...
随机推荐
- docker面试总结
1.什么是docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化.容 ...
- 【神经网络与深度学习】CIFAR-10数据集介绍
CIFAR-10数据集含有6万个32*32的彩色图像,共分为10种类型,由 Alex Krizhevsky, Vinod Nair和 Geoffrey Hinton收集而来.包含50000张训练图片, ...
- 原生js实现选中所有的checkbox
<div class="con"> <input name='多选项名称' type='checkbox' value='' id="all" ...
- 第八周课程报告&&实验报告六
Java实验报告 班级 计科一班 学号 20188390 姓名 宋志豪 实验四 类的继承 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获方法. 实验要求 练习捕获异常.声明异常. ...
- 【转帖】技术选型之Docker容器引擎
技术选型之Docker容器引擎 https://segmentfault.com/a/1190000019462392 图过不来的 原作者写的挺好的 题外话 最近对Docker和Kubernetes进 ...
- [转帖]达梦数据库（DM6)和ORACLE 10g的异同点
达梦数据库(DM6)和ORACLE 10g的异同点 https://bbs.aliyun.com/detail/351337.html 花花浪子 级别: 小白 发帖 0 云币 -41 加关注 ...
- springboot - 应用实践（1）认识springboot
1.为什么要推出springboot springboot设计的目的是用来简化新spring应用的初始搭建以及开发过程.springboot遵循“约定优于配置”原则. 2.springboot默认的配 ...
- 小记-----如何把本地jar包加载到maven库中
1.从maven中央库下载下jar包
- computer(树形dp || 树的直径)
Computer Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- 即时通讯IM
即时通讯(Instant Messaging,后简称im)消息的可靠投递 一.报文类型 im的客户端与服务器通过发送报文(也就是网络包)来完成消息的传递 报文分为: 请求报文(request,后简称为 ...