<div id="example-1"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({el: '#example-1',data: {counter: 0}
})

最好把v-on调用的方法写在方法属性里

<div id="example-2"><!-- `greet` 是在下面定义的方法名 --><button v-on:click="greet">Greet</button>
</div>

ar example2 = new Vue({el: '#example-2',data: {name: 'Vue.js'},// 在 `methods` 对象中定义方法methods: {greet: function (event) {// `this` 在方法里指向当前 Vue 实例alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件if (event) {alert(event.target.tagName)}}}
})// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

系统修饰

.ctrl
.alt
.shift
.meta

鼠标修饰符

.left
.right
.middle

参考文献:
https://cn.vuejs.org/v2/guide/events.html

vue.js v-on相关推荐

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue.js?v=3e1adf4e‘ does not ...
vue3导入全局变量时,可以运行但是会一直显示报错,如图: 解决方法如下: 在 Vue.js 3 中,"@vue/runtime-core" 是一个包含 Vue.js 运行时核心的 ...
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=bd1817bb‘ does not provide
vite 2.7.8 启动后报错暂时不清楚是 2.7.8 的版本问题还是其他问题.将版本降低到 2.6.13 解决还有可能是vite 预编译缓存的问题,把 node_modules 下的 .vit ...
vue -V查看vue版本时，提示vue.js缺少标识符
vue -V查看vue版本时,提示vue.js缺少标识符出现的错误提示如下图. 我的解决办法: win+R打开 cmd 输入 where vue. 找到D:\a_tools\vue,删除该文件夹中的 ...
vue.js安装过程(npm安装)
一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
运用vue.js写的表格小demo
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习vue.js,我把工作中项目里面的一个小实例用vue.js重构了下,写成一个小demo,巩固自己所学,并与大家分享, ...
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...
宝塔面板部署nuxt_MacOS下创建及部署vue.js项目（及Nuxt.js、PM2等相关流程）
开发环境权限准备为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...

vue.js v-on

事件修饰符

按键修饰符

系统修饰

鼠标修饰符

vue.js v-on相关推荐

最新文章

热门文章