[Vue] Use basic event handling in Vue
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的更多相关文章
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- vue学习笔记(四)——Vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- vue学习(一)、Vue.js简介
Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...
- 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 ...
- Vue基础系列(五)——Vue中的指令(中)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- 一、vue基础语法(轻松入门vue)
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- Vue.js高效前端开发 • 【Vue基本指令】
全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
随机推荐
- Restlet 学习笔记
摘要:网络上对 restlet 的评判褒贬不一,有的说框架封装的很好,很有弹性,有的说 rest 架构风格本身是一种简单的风格,restlet 过设计以使编程过于复杂,其实我倒不觉得 restlet ...
- IOIOI卡片占卜(Atcoder-IOIOI カード占い)(最短路)
题目描述: K 理事長は占いが好きで,いつも様々な占いをしている.今日は,表の面に ‘I’ が,裏の面に ‘O’ が書か れたカードを使って今年の IOI での日本選手団の出来を占うことにした. 占い ...
- 3/18 Django框架 启动django服务
web框架:本质是socket服务端,socket通常也被称为"套接字",用于描述IP地址和端口,是一个通信链的句柄,可以用来实现不同虚拟机或不同计算机之间的通信.web框架就是将 ...
- Android Studio使用Mob来获取手机验证码的源码
本文来自:CSDN 感谢作者:qq_35812301(其实就是我的号!) 查看原文:http://blog.csdn.net/qq_35812301/article/details/79150775 ...
- 如何优雅的写UI——(1)MFC六大核心机制-程序初始化
很多做软件开发的人都有一种对事情刨根问底的精神,例如我们一直在用的MFC,很方便,不用学太多原理性的知识就可以做出各种窗口程序,但喜欢钻研的朋友肯定想知道,到底微软帮我们做了些什么,让我们在它的框架下 ...
- Windows 共享无线上网 无法启动ICS服务解决方法(WIN7 ICS服务启动后停止)
Windows 共享无线上网 无法启动ICS服务解决方法(WIN7 ICS服务启动后停止) ICS 即Internet Connection Sharing,internet连接共享,可以使局域网上其 ...
- cv2.putText 文字换行('\n')无法解析换行
OpenCV putText() new line character cv2.putText 在向图像中添加文本信息时,如果在待添加的文本中含有换行转义符,一般它是无法正确处理的: cv2.putT ...
- golang recover panic 流程控制的可达与不可达
--------------------------流程控制可达----------------------------- package main import "fmt" fu ...
- Weblogic问题汇总
1. weblogic unable to get file lock问题 在项目使用过程中,非正常结束Weblogic进程导致Weblogic无法启动,出现以下错误: <BEA-141281& ...
- selenium 自动化基础知识(各种定位)
元素的定位 webdriver 提供了一很多对象定位方法 例如: [ id ] , name , class name , link text , partial link text , tag n ...