Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

<template>
<div>
<button @mouseenter="counter += 1">Increment the counter!</button>
<button @click="increment">Increment using a method!</button>
<div v-text="counter"></div>
<form @submit.prevent="logName">
<input @keyup.ctrl.alt.shift.down="keyHandler" v-model="firstName" placeholder="First name..." />
</form>
</div>
</template> <script>
export default {
data() {
return {
counter: ,
firstName: ''
}
}, methods: {
increment() {
console.log('counter incremented!')
this.counter +=
}, logName() {
console.log('firstName:', this.firstName)
}, keyHandler() {
this.firstName = 'Evan'
}
}
}
</script>
  • Using '@' replace 'v-on'
  • @submit.prevent -> preventDefault
  • @submit.stop
  • @submit.once
  • @keyup.ctrl.alt.shift.down --> "ctrl + alt + shift + down" 4 keys click together

[Vue] Use basic event handling in Vue的更多相关文章

  1. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  2. vue学习笔记(四)——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  3. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. vue学习(一)、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...

  5. Event Handling Guide for iOS--(一)--About Events in iOS

    About Events in iOS Users manipulate their iOS devices in a number of ways, such as touching the scr ...

  6. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  7. 一、vue基础语法(轻松入门vue)

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  8. Vue.js高效前端开发 • 【Vue基本指令】

    全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 ...

  9. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

随机推荐

  1. 随手记录---transform 属性

    其实平时很少用到transform属性,一些放大缩小用width.height可以改变,一些位置变换,更是有margin,而一些旋转.2D.3D变换也不怎么能用得到.不过最近接触了一些图片的缩放,觉得 ...

  2. 【Java学习】Font字体类的用法介绍

    一.Font类简介 Font类是用于设置图形用户界面上的字体样式的,包括字体类型(例如宋体.仿宋.Times New Roman等).字体风格(例如斜体字.加粗等).以及字号大小. 二.Font类的引 ...

  3. iOS界面生命周期过程具体解释

    开发过Android的人都知道,每个Android界面就是一个Activity,而每个Activity都会有自己的生命周期, 有一系列方法会控制Activity的生命周期.如:onCreate(),o ...

  4. 51Nod——N1284 2 3 5 7的倍数

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1284 基准时间限制:1 秒 空间限制:131072 KB 分值: 5  ...

  5. 使用ajax发送图片等文件

    1.使用H5的FormData()对象,append()添加文件 2.processData: false, // 告诉jQuery不要去处理发送的数据    contentType: false, ...

  6. 单位转换 inch mm mil

    从上面看:英寸(inch)是最大的单位   其次是毫米(mm)  再次是密耳(mil)

  7. Android Studio设置图片背景及主题设置

    因为Android Studio是基于IDEA的,所以IDEA里面能用的插件Android Studio也能用,这次图片背景是依赖IDEA下的一个插件,名为BackgroundImage的插件,用户可 ...

  8. VIM使用说明

    [vim 命令-移动光标]:h 的鍵位于左邊,每次按下就會向左移動.l 的鍵位于右邊,每次按下就會向右移動.j 鍵看起來很象一支尖端方向朝下的箭頭.k朝上移动. [vim 命令-启动和退出]:1. 請 ...

  9. 动态布局Cell的高度

    1 自定义Cell, 在Cell的构造方法里面添加好所有的子控件 2 3 2 在HeightForRowAtIndexPath方法中返回每一行Cell对应的高度 4 5 3 在Cell的layoutS ...

  10. 怎样cp文件夹时忽略指定的文件夹和文件

    在备份ltedecoder程序时,须要把此文件夹拷由到bak文件夹下.但decoder文件夹下有个大文件,不须要备份,还有日志问题,也不须要备份,怎样实现呢?? 方法: cd /source-dir ...