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监听事件的更多相关文章

  1. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  2. vue(一)--监听事件

    1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @ 2.事件修饰符 .stop:等同于JavaScript中的event.stopPropagation() ...

  3. vue之监听事件

    一.v-on 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 简写形式  用@代替 v-on: <button v-on:click="co ...

  4. vue 键盘监听事件

    <template> <div class="hello"> <input v-on:keyup.enter="submit" t ...

  5. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  6. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

    <!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...

  8. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  9. VUE 实现监听滚动事件,实现数据懒加载

    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...

  10. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

随机推荐

  1. CentOS 添加硬盘创建并挂载分区

    分区工具介绍: fdisk 创建MBR分区:所支持的最大卷:2T,而且对分区有限制:最多4个主分区或3个主分区加一个扩展分区 gdisk 创建GPT分区:突破MBR 4个主分区限制,每个磁盘最多支持1 ...

  2. day17-django基础

    3. Django框架 版本:1.11 创建: django-admin startprojcet xxx cd xxx python manage.py startapp app01 python ...

  3. 05-CSS浮动、定位、页面布局

    # 浮动 ### 文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置. # ...

  4. 第一个chrome extension

    如今,chrome浏览器的使用如越来越流行,chrome extension往往能提供更多很丰富的功能.以前一直想了解这方面的东西,可是又担心很复杂.前段时间,在斗鱼看一个直播,想刷弹幕,但是每次自己 ...

  5. 利用tesseract-ocr进行验证码识别

    因为爬虫项目需要模拟登陆,可是有一个网站的登录需要输入验证码.其实这种登录有2种解决方案,一种是利用cookie,一种是识别图片.前者需要人工登录一次,而且有时效限制,故不太现实.后者可以,但是难点是 ...

  6. polyfill.io 试用

    Polyfill 可以为旧浏览器提供和标准 API 一样的功能.比如你想要 IE 浏览器实现 Promise 和 fetch 功能,你需要手动引入 es6-promise.whatwg-fetch.而 ...

  7. VS2012在解决方案资源管理器显示解决方案名称

    工具>选项>项目与解决方案(需点右下方的显示所有)>点上 总是显示解决方案

  8. (NOIP)CSP-S 2019前计划

    前言 无 1.NOIP原题板刷 NOIP原题板刷 这是一篇咕了的blog 2.牛客 & ACwing & 洛谷 网课学习 收获还是蛮大的,不过我没有写博客 3.codeforces专项 ...

  9. RestTemplate 发送post请求

    springboot使用restTemplate post提交值 restTemplate post值 post提交有 FormData和Payload 两种形式: 第一种是formdata形式,在h ...

  10. 【leetcode】1081. Smallest Subsequence of Distinct Characters

    题目如下: Return the lexicographically smallest subsequence of text that contains all the distinct chara ...