Vue.js教程--基础2(事件处理 表单输入绑定
- 事件处理
- 表单输入绑定
事件处理
监听v-on
监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
可以在v-on:click=''加内联语句。
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
把它传入方法:
事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。
但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
Vue.js 为 v-on
提供了事件修饰符。
.stop
.prevent
.capture
.self
.once 点击事件只生效一次。还能用于自定义的组件事件
.passive
按键修饰符,鼠标按键修饰符 具体见文档
系统修饰键
<!-- Alt + C -->
<input @keyup.alt.67="clear"> <!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
表单输入绑定摘录
具体见文档https://cn.vuejs.org/v2/guide/forms.html
用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
例子:
⚠️<label>的for属性指定和哪个元素绑定。 for的值是一个元素的id值。
多选复选框:用v-model绑定到同一个数组
单选按钮:
- 需要把data中的数据的值改成 '' 空字符串
- <input>的type='radio'
选择框 v-model='selected'
- <option>A</option>,默认value的值是A,可以自定义value属性。
- 如果是多选框, 加属性 multiple。另外,绑定到一个数组selected: []。 selected.join()转换为string,逗号为默认分隔符。也可以用toString()
- 可以使用v-for来渲染<options>标签: <options v-for='opt in opts'>
值 绑定,修饰符
Vue.js教程--基础2(事件处理 表单输入绑定的更多相关文章
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Vue表单输入绑定(文本框和复选框)
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
- 一起学Vue之表单输入绑定
在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正. 基础用法 你可以用 v-model 指令在表单 ...
随机推荐
- html文件上传控件file自定义样式
问题: HTML自带的file上传按钮因在各种浏览器里显示样式不一.不易自定义样式给我们带来很大的麻烦. 解决思路: 将input[type=file]控件隐藏,使用一个input[type=text ...
- Linux服务器配置---安装telnet
安装telnet telnet是标准的远程登录协议,历史悠久.但是telnet的对话数据没有加密,甚至用户名和密码都是明文显示,这样的服务风险极大.目前大多数系统多已经不会再安装这个服务了, ...
- Qt学习之路(45): 自定义model之一
前面我们说了Qt提供的几个预定义model.但是,面对变化万千的需求,那几个model是远远不能满足我们的需要的.另外,对于Qt这种框架来说,model的选择首先要能满足绝大多数功能的需要,这就是说, ...
- [转载] My97DatePicker日历实现开始日期小于结束日期验证
<tr align='center'> <td align="right">开始日期: </td> <td align="lef ...
- 如何在Apache中运行Python脚本
第一步:进入C:\Apache24\cgi-bin: 第二步:在cgi-bin目录下新建一个hello.py文件: 第三步: #!python #coding:utf-8 print("co ...
- (mac)阿里云ECS服务器配置过程
-----首先本人是半只脚入门的iOS开发者,弄这个只是单纯想多学点东西. -----阿里云服务器的配置选择:既然是学习用的,最最基础的配置就行了.1M带宽,1核1G...这就不详述了.没啥可选的,( ...
- 如何向GLSL中传入多个纹理
http://blog.csdn.net/huawenguang/article/details/41245871 如何向GLSL中传入多个纹理 这几天在研究如何实现用GLSL对多个纹理进行融合处理, ...
- 04: 事件驱动、五种I/O操作、I/O多路复用select和epoll
网络编程其他篇 目录: 1.1 事件驱动 1.2 五种I/O操作 1.3 I/O 多路复用之select.poll.epoll详解 1.1 事件驱动返回顶部 1.什么是事件驱动 定义:就是根据不同事 ...
- poj 2369 Permutations - 数论
We remind that the permutation of some final set is a one-to-one mapping of the set onto itself. Les ...
- bzoj 1179 [APIO 2009]Atm(APIO水题) - Tarjan - spfa
Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口编号.接下来N行,每行一 ...