事件处理器

<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p> {{ counter }} 次。</p>
</div> <script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div> <script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
}, methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div> <script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>

event.preventDefault() 或 event.stopPropagation()

.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

(10)打鸡儿教你Vue.js的更多相关文章

  1. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  2. (1)打鸡儿教你Vue.js

    当今世界不会Vue.js,前端必定路难走 一个JavaScript MVVM库 以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...

  3. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  4. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  5. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  6. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  7. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  8. (17)打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

  9. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

随机推荐

  1. Java8 基础数据类型包装类-Long

     https://blog.csdn.net/u012562117/article/details/79023440 基础 //final修饰不可更改,每次赋值都是新建类(其中-128~127是通过L ...

  2. GitHub上传文件问题总结

    问题一:git warning: LF will be replaced by CRLF in 解决办法 在Git Bash中输入git add .时出现上述语句. 解决办法: 输入以下语句: $ g ...

  3. js 一些有意思的小Demo

  4. sql 注入风险

    目录 sql 注入风险 什么是sql注入呢? 查看sql注入风险 如何避免 sql 注入风险 pymysql 简单规避注入风险示列 sql 注入风险 什么是sql注入呢? 参考百度 查看sql注入风险 ...

  5. mysql安装好需要启动和停止服务

    启动mysql: mysql.server start 停止服务:mysql.server stop

  6. 钉钉、阿里云和PaaS平台的整合开发

    钉钉在企业移动办公领域有着很高的占有率,但是可能大家都会觉得,他在企业定制化,数据分析等领域有着很大的短板. 而我们的kintone作为PaaS平台,可以补足这个短板.很多开发者想知道如何利用钉钉还有 ...

  7. Spring -10 -<bean>的 scope 属性 -singleton 默认值/prototype 多例 /request /session /application /global session

    1.<bean>的属性; 2.作用:控制对象有效范围(单例,多例等)3.<bean/>标签对应的对象默认是单例的. 3.1无论获取多少次,都是同一个对象 Teacher t1 ...

  8. jmeter生成html报告详解

    Jmeter Dashboard详解 结果面板主要分为Dashboard和Charts两部分.Dashboard对信息进行汇总展示,Charts展示更多详细指标数据. Dashboard Test a ...

  9. Caused by: java.lang.IllegalStateException: Ambiguous mapping found

    Caused by: java.lang.IllegalStateException: Ambiguous mapping found. Cannot map ‘myCockpitMgrControl ...

  10. .net框架-字典对象 Hashtable & Dictionary<TKey,TValue> & SortedList

    字典对象: 字典对象是表示键值对的集合 字典对象有Hashtable(.net 1.0)及其泛型版本Dictionary<TKey,TValue> 字典对象还包括SortedList及其泛 ...