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 ...
随机推荐
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- java基础常问面试题
1.面向对象和面向过程的区别 面向过程 :面向过程性能比面向对象高. 因为类调用时需要实例化,开销比较大,比较消耗资源,所以当性能是最重要的考量因素的时候,比如单片机.嵌入式开发.Linux/Unix ...
- [常用类]Scanner 类
Scanner 类 一个简单的文本扫描器,可以使用正则表达式解析原始类型和字符串. 该代码允许用户从System.in读取一个数字: Scanner sc = new Scanner(System.i ...
- uve (mui/light7)写APP的使用心得(大坑);
话说mui这个框架的UI确实挺好看的(个人觉得)所以项目使用了他,结果里面的坑太TM多,不得不说MUI做东西太不用心了,社区不活跃,提问都没人管!; mui第一个坑: 日期选择器默认值无效:使用代码跟 ...
- Vue+elementui 实现复杂表头和动态增加列的二维表格
先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element. ...
- 如何在SVN服务器上创建项目
1,首先你的电脑上安装了SVN的服务器 VisualSVN-Server-3.7.1-x64.msi 2,打开SVN服务器后,可以看到分布的目录是 Repositories.Users.Groups. ...
- Kata Container 介绍
docker容器,性能高,不安全:VM虚拟机,安全性好,性能损耗大:Kata Container轻量级虚拟机的容器,即安全,性能也高. 开源容器项目Kata Containers,旨在将虚拟机(VM) ...
- thinkphp 模板变量输出替换和赋值
一.变量输出的几个方法 <?php namespace app\index\controller; use http\Params; use think\Config; use think\Co ...
- NASA CEA 安装指南
有用的网站: http://www.engr.colostate.edu/~marchese/combustion08/cec.html 1 把三个压缩包解压到同一个Ubuntu文件夹CEAexec下 ...
- 使用vue进行国际化
相对于网站等一些需求 我们有需要做国际化的需求,具体步骤如下: 首先安装 vue-i18n npm install vue-i18n import VueI18n from 'vue-i18n' Vu ...