Vue方法与事件处理器详解


Posted in Javascript onDecember 01, 2016

本文实例为大家分享了Vue方法与事件处理器的使用,供大家参考,具体内容如下

按键修饰符

在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:enter 、tab 、delete、 esc 、space、 up 、down、 left 、right。

eg:

HTML如下:

<template>
<div class="home-body">
 <div class="project-all">
 <template v-for='project in projectData'>
 <div class="name" v-on:click='successT($index)' v-bind:class="{'success':project.success}">{{project.projectName}}</div>
 </template>
 <div class="name" v-if='addp' v-on:click='addproject'>新增项目</div>
 <div class="name" v-if='!addp'>
 <input type="text" class='name-input' placeholder='请填写项目名称' v-on:keyup.enter='saveProjectFun' v-el:addProject>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='esc' v-on:keyup.esc='escFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='delete' v-on:keyup.delete='deleteFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='space' v-on:keyup.space='spaceFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='up' v-on:keyup.up='upFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='down' v-on:keyup.down='downFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='left' v-on:keyup.left='leftFun'>
 </div>
 <div class="name"> 
 <input type="text" class='name-input' placeholder='right' v-on:keyup.right='rightFun'>
 </div>
 </div>
</div>
</template>

JS代码:

<script>
export default {
 components: {

 },
 ready: function() {
 
 },
 methods: {
 //当你选种某个项目时,将其success属性改为true,为其class添加 success 
 successT:function(index){
 this.projectData.forEach(function(item){
 item.success=false;
 });
 this.projectData[index].success=true;
 },
 //点击添加项目后让其不显示
 addproject:function(){
 this.addp=false;
 }, 
 //当用户按回车后,保存添加的项目
 saveProjectFun:function(){
 var obj={}
 obj.success=false;
 let name=this.$els.addproject.value;
 obj.projectName=name.replace(/\s+/g,""); 
 this.projectData.push(obj);
 this.addp=true;
 },
 escFun:function(){
 alert("esc");
 },
 deleteFun:function(){
 alert("delete");
 },
 spaceFun:function(){
 alert("space空格键");
 },
 upFun:function(){
 alert("up");
 },
 downFun:function(){
 alert("down");
 },
 leftFun:function(){
 alert("left");
 },
 rightFun:function(){
 alert("right");
 }
 },
 data() {
 return {
 addp:true,//是否显示添加项目
 projectData:[{
  success:false,
  projectName: '人员管理系统'
  }, { 
  success:false,
  projectName: '管理系统'
  },{
  success:false,
  projectName: '假数据1'
  },{
  success:false,
  projectName: '假数据2'
  }, {
  success:false,
  projectName: '假数据3'
  }
 ],
 }
 }
}
</script>

页面最开始:

Vue方法与事件处理器详解

当你点击新增项目后:

Vue方法与事件处理器详解

在文本框中输入  “豆豆”后按回车键后页面

Vue方法与事件处理器详解

当你按回车键后触发  keyup.enter事件调saveProjectFun方法,在此方法中进行数据保存。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
You might like
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
vue实现添加标签demo示例代码
2017/01/21 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
python机器学习之神经网络(一)
2017/12/20 Python
Django权限机制实现代码详解
2018/02/05 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python3 实现口罩抽签的功能
2020/03/11 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
毕业生面试求职信
2014/06/23 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
干部作风建设心得体会
2014/10/22 职场文书
个人借款协议书范本
2014/11/17 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
工厂员工辞职信范文
2015/05/12 职场文书