查看“Vue从入门到实战:使用监听器”的源代码
←
Vue从入门到实战:使用监听器
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==用途== Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:监听属性。当你有一些数据需要随着其他数据变化而变动时,就可以使用监听器 ==举例== 监听器是在Vue实例的选项对象的watch选项中定义。下面通过监听器来实现千米与米之间的换算。 <nowiki><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>监听器</title> </head> <body> <div id = "app"> 千米 : <input type = "text" v-model="kilometers"> 米 : <input type = "text" v-model="meters"> </div> <p id="info"></p> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { kilometers: 0, meters: 0 }, watch : { kilometers: function(val){ this.meters = val * 1000 }, // 监听器函数也可以接受两个参数,val是当前值,oldVal是改变之前的值 meters : function (val, oldVal) { this.kilometers = val / 1000; } } }); /* // $watch 是一个实例方法 vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue; })*/ </script> </body> </html></nowiki> 编写了两个监听器,分别监听kilometers 和meters的变化,当其中一个数据属性的值发生改变时,对应的监听器就会被调用。 不要使用箭头函数来定义监听器函数,箭头函数绑定的是父级作用域的上下文。 当需要在数据变化时执行异步或开销较大的操作时,使用监听器是最合适的。 例: fibonacci.js: <nowiki>function fibonacci(n) { return n < 2 ? n : arguments.callee(n-1) + arguments.callee(n-2); } onmessage = function(event) { var num = parseInt(event.data, 10); postMessage(fibonacci(num)); }</nowiki> watch-fibonacci.html: <nowiki><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>监听器</title> </head> <body> <div id = "app"> 请输入要计算斐波那契数列的第几个数: <input type="text" v-model="num"> <p v-show="result">{{result}}</p> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { num: 0, result: '' }, watch : { num: function(val){ this.result = "请稍候..."; if(val > 0){ let worker = new Worker("fibonacci.js"); worker.onmessage = (event) => this.result = event.data; worker.postMessage(val); } else{ this.result = ''; } } } }); </script> </body> </html></nowiki> Worker实例是异步执行的,当后台线程执行完任务后通过postMessage()调用通知创建者线程的onmessage回调函数。
返回至
Vue从入门到实战:使用监听器
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息