Vue.js事件处理器与表单控件绑定详解


Posted in Javascript onMarch 20, 2017

事件处理主要通过v-on这个指令来执行。

事件监听及方法处理

1.简单的可以直接内嵌在页面。

2.可以通过将方法定义在methods中,然后再v-on中执行

3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件。

<div id="app-1">
 <button v-on:click="counter += 1">增加1</button>
 <p>这个按钮被点击了{{counter}}</p>
 <button v-on:click="great">great</button>
 <button @click="sya('hi')">say hi</button>
 <button @click="warn('form cannot be submit yet', $event)">submit</button>
</div>
<script type="text/javascript">
 var app1 = new Vue({
 el:'#app-1',
 data:{
 counter:0
 },
 methods:{
 great:function(event){
 alert('点击数目为'+ this.counter);
 alert(event.target.tagName);
 },
 sya:function(message){
 alert(message);
 },
 warn:function(msg,event){
 if(event) event.preventDefault();
 alert(msg);
 }
 }
 })
</script>

事件修饰器

Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self

<div id="app2">
<!-- 阻止单击事件冒泡 -->
<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>
</div>

按键修饰符

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

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

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

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

全部的按键别名:

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

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

表单控件绑定

通过前面的一些学习,我们知道v-model在输入框中具有双向响应功能。但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。

//文本
<input type="text" v-model="message" placeholder="edit it">
<p>this message is {{message}}</p>
<hr>
//多行文本
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<hr>
//复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<hr>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names数组: {{ checkedNames }}</span>
<hr>
//单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<hr>
//选择列表
<select v-model="selected">
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<hr>
<select v-model="mulselected" multiple>
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected数组: {{ mulselected }}</span>

动态属性

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
<p>toggle的值为{{toggle}}</p>
<input type="radio" v-model="pick" v-bind:value="a">
<select v-model="selected">
 <!-- 内联对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>

修饰符

lay:在改变后才触发

<input v-model.lazy="msg" >

number:将输出字符串转为Number类型

<input v-model.number="age" type="number">

trim:自动过滤用户输入的首尾空格

<input v-model.lazy.trim="msg" >

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

Javascript 相关文章推荐
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 #Javascript
详解Vue中添加过渡效果
Mar 20 #Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
js实现鼠标拖动功能
Mar 20 #Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
再谈javascript原型继承
2014/11/10 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python 不关闭控制台的实现方法
2011/10/23 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
flask项目集成swagger的方法
2020/12/09 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
服装促销活动方案
2014/02/23 职场文书
篝火晚会策划方案
2014/05/16 职场文书
综合测评个人总结
2015/03/03 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python