vue-wacth监听事件
2019-08-05 0:20
Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：（此时我就想了一下，好像绑定点击事件，也是可以实现计数器的，所以，我就自己增加了一个点击事件“我真牛”）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js"></script>
<style>
span{
padding: 20rpx;
border: 1px solid #000;
}
</style>
</head>
<body> <div id="app">
<p>{{connum}}</p>
<!-- 方法一：没点击一次，connum数据+1 -->
<span @click="handleClick">点我哈</span> <!-- 方法二：触发监听事件，每点击一次，connum数据+1 -->
<button @click="connum++">点击我监听</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
connum:0
},
// 点击事件,每触发一次点击事件,connum加1
methods:{
handleClick:function(){
this.connum+=1
}
}
});
// 监听点击事件
vm.$watch("connum",function(connum){
console.log(connum)
})
</script>
</body>
</html>
一个小秘密，在菜鸟教程https://www.runoob.com/vue2/vue-watch.html 里的这个实例，我都没有看明白
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
上面的 function(nval,oval)到底是什么鬼？
所以，我就把它省略了，根据我自己的理解写了最上面的代码“我真牛”！！！！！！！！
-------学习使我快乐，快乐使我成长，成长使我加深黑眼圈
vue-wacth监听事件的更多相关文章
- vue v-on监听事件
在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...
- vue(一)--监听事件
1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @ 2.事件修饰符 .stop:等同于JavaScript中的event.stopPropagation() ...
- vue之监听事件
一.v-on 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 简写形式 用@代替 v-on: <button v-on:click="co ...
- vue 键盘监听事件
<template> <div class="hello"> <input v-on:keyup.enter="submit" t ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
<!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- VUE 实现监听滚动事件，实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
- vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
随机推荐
- [hdu6558][CCPC2018吉林D题]The Moon(期望dp)
题目链接 当时年少不懂期望$dp$,时隔一年看到这道题感觉好容易.... 定义状态$dp[i]$表示当前的$q$值为$i$时的期望,则当$q$值为$100$时$dp[100]=100/q$,这时后发现 ...
- Hystrix (容错，回退，降级，缓存)
Hystrix熔断机制就像家里的保险丝一样,若同时使用高功率的电器,就会烧坏电路,这时候保险丝自动断开就有效的保护了电路.而我们程序中也同样是这样.例如若此时数据库压力太大速度很慢,此时还有不断的请求 ...
- 剑指offer学习读书笔记--二维数组中的查找
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都是按照从上到下递增的顺序排序.请设计一个函数,输入这样的一个二维数组和一个整数,判断数组是否含有这个整数. 1 2 8 9 2 4 9 1 ...
- Spark2.0基于广播变量broadcast实现实时数据按天统计
package com.gm.hive.SparkHive; import java.text.SimpleDateFormat; import java.util.Arrays; import ja ...
- 2018-2-13-win10-uwp-读写csv-
title author date CreateTime categories win10 uwp 读写csv lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17 ...
- MySQL 简介
MySQL 简介 点击查看MySQL官方网站 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,后来被Sun公司收购,Sun公司后来又被Oracle公司收购,目前属于Oracle旗 ...
- 一、.Net Core 分块上传文件
一..Net Core 分块上传文件 一.前端实现 @* For more information on enabling MVC for empty projects, visit http://g ...
- [NOI2007]社交网络（最短路）
[NOI2007]社交网络 Description 在社交网络(socialnetwork)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题. 在一个社交圈子里有n个人,人与人之 ...
- MongoDb学习 自定义配置mongodb连接
最近研究了mongodb获取本地连接属性的方案,场景就是mongodb的连接地址不在配置文件中配置,而是在代码中写好,代码中是从本地文件读取地址. public class MongoConfig { ...
- Linux忘记root密码解决方案
忘记Linux root密码时,只需重启Linux系统,然后引导进入Linux的单用户模式(init 1),由于单用户模式不需要输入登陆密码,因此,可直接登陆系统,修改root密码即可解决问题.需要说 ...