vue.js_12_vue的watch和computed
1.watch用来监测指定Vue实例上的数据变动。
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
1.>使用watch监听路由的变化打印在控制台 $route.path路由地址
当$route.path的数据变动时触发watch中的方法
watch: { '$route.path': function(newval,oldval) {
console.log(this.$route)
}
}
<body>
<div id="app"> <router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h2>登陆组件</h2>'
};
var register = {
template: '<h2>注册组件</h2>'
};
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
],
linkActiveClass: 'myclass'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
watch: {
'$route.path': function(newval,oldval) {
console.log(this.$route) }
}
});
</script>
</body>
2.computed
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
1>使用computed监视完成firstname+lastname
computed：不可再data中定义
computed：当computed中的任意属性值发生改变时computed方式会重新加载
computed：被多次使用时不会加载多次，computed的结果会被缓存
<body>
<div id="app">
<input type="text" v-model="firstname" />+
<input type="text" v-model="lastname" />=
<input type="text" v-model="name" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
computed: { //computed中可以定义一些计算属相，本质就是方法，
//直接把name当作熟属性使用
//在name: function() {}中所有的属性发生改变时 就会触发 该方法
name: function() {
return this.lastname + '-' + this.firstname
}
}
})
</script>
</body>
vue.js_12_vue的watch和computed的更多相关文章
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- Vue 基础自查——watch、computed和methods的区别
1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue里的watch 和 computed 监听的不同
1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
随机推荐
- day33 序列类型，绑定方法，类方法，静态方法，封装继承和多态
Python之路,Day20 = 序列类型,绑定方法,类方法,静态方法,封装继承和多态 序列是指有序的队列,重点在"有序". 一.Python中序列的分类 Python中的序列主要 ...
- PHP MVC运用
php中的MVC模式运用 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉及文章的发布,现在开始了. 由于只涉及数据库的读取,所以我定义了两个 ...
- （转）获取android手机内部存储空间和外部存储空间的参数 && 如何决定一个apk的安装位置
转:http://blog.csdn.net/zhandoushi1982/article/details/8560233 获取android文件系统的信息,需要Environment类和StatFs ...
- selenium python bindings 项目结构总结
一个合理的文档结构在import的过程中会避免很多错误,踩完坑来记录. webtests/ framework.py webdriver.py test_file.py module/ __init_ ...
- java在jvm虚拟机中是如何实现多态的？
原文地址:https://blog.csdn.net/huangrunqing/article/details/51996424 众所周知,多态是面向对象编程语言的重要特性,它允许基类的指针或引用指向 ...
- JS 二维数组
给一个数组元素,赋一个数组的值,那么,这个数组就是“二维数组”. 二维数组,就得用两层循环来实现.也就是说循环套循环. 二维数组的循环,与二维表格的循环一模一样. 二维数组的访问:数组名后跟多个连续的 ...
- Wireless Password HDU - 2825
题意: 给出m个模式串,要求构造一长度为n的文本串,至少包括k种模式串,求有多少种可能的模式串. k<=10 然后可以想到状压 一个文本串,k种模式串,很容易想到AC自动机. 把所有的模式串放 ...
- 如何使用Spark大规模并行构建索引
使用Spark构建索引非常简单,因为spark提供了更高级的抽象rdd分布式弹性数据集,相比以前的使用Hadoop的MapReduce来构建大规模索引,Spark具有更灵活的api操作,性能更高,语法 ...
- Python全栈开发：进度条
import sys import time for i in range(31): # 清空打印内容 sys.stdout.write("\r") # 控制输出样式 sys.st ...
- 网站PC端和移动端，用户通过设备识别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--<me ...