vue笔记(2)- (事件处理、表单输入绑定)

原创 乘风逐月 随笔 Vue 239阅读 2018-04-16 11:57:40 举报
一、事件处理
1.监听事件:

v-on指令监听 DOM 事件

2.事件处理方法:

a.在触发时运行一些简单的JavaScript 代码

b.接收一个需要调用的方法名称

c.在内联 JavaScript 语句中调用方法

d.在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

3.事件修饰符:

.stop - 调用event.stopPropagation()
.prevent - 调用event.preeventDefault()
.capture - 添加事件侦听器时使用capture模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调
.passive - 以{passive:true}模式添加侦听器
注: 使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符别名:

4.示例
二、表单输入绑定
1.基础用法:v-model指令

a.v-model 指令在表单input和textarea元素上创建双向数据绑定。
b.v-model 会忽略所有的表单元素的value、checked、selected特性的初始值
,而总是将Vue示例的数据作为数据来源,所以初始值应该声明在data中。
c. 对于需要使用输入法 (如中文、日文、韩文等) 的语言,v-model 不会在输入法组合文字过程中得到更新。如果要处理这个过程,需要使用 input 事件。

2.复选框:

a.单个复选框: 选中与不选中获取true和false,会忽略checkbox本身的value值。

b.多个复选框,绑定到同一个数组,选中获取一个数组,包含被选中的复选框的value

3.单选框:获取选中的value值

4.select下拉选择框:

若option有value值,选中时获取的是value值,若无,则获取option的text;多选获的一个被选中的值组成的数组。

注: 如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

5. 修饰符:

a. .lazy: 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。添加 lazy 修饰符,从而转变为使用 change 事件进行同步

b. .number: 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串
c. .trim: 自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复