vue5 v-model详解,绑定事件,修饰符,深度响应式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue5 v-model详解,绑定事件,修饰符,深度响应式相关的知识,希望对你有一定的参考价值。
参考技术A 1.input绑定2.多行文本域的绑定
3.单选框的绑定:在标签中绑定new Vue内命名的属性名称 例如下方的sex
4.复选框的绑定:v-model绑定单个复选框,绑定一个布尔值
5.绑定选择框,同理
v-model指令的修饰符
v-model指令默认触发的是input事件,当文本框的值发生变化后,立刻同步数据。
.lazy 修饰符,可以将input事件转换为change事件,当文本框失去焦点后,同步数据
v-model.lazy=" name "
.number 修饰符,会自动将你的输入转换为数字
v-model.number=" name "
.trim修饰符,用于去除内容将首尾的空格
v-model.lazy.trim=" name "
@是v-on的缩写,通过v-on:指令绑定事件,指定一个methods选项里面定义的方法
调用方法时,传的是什么参数,接的就是什么参数。
鼠标左键单击 @click =" 方法 " ;鼠标右键单击 @contextmenu =" 方法 " ;鼠标左键双击 @dblclick =" 方法 " ;
一般我们在方法中通过 e.preventdefault( ) 来 阻止默认行为 ,在vue中,通过事件修饰符 .prevent 来阻止默认行为,如下图
一般我们在方法中通过 e.stopProgation( ) 来 阻止默认行为 ,在vue中,通过事件修饰符 .stop 来阻止默认行为,如下图
.once 修饰符,用只绑定一次事件方法,即点击效果只执行一次,后面再点击就没有效果。
.self 修饰符,只能在自身元素上触发,不能再子元素上触发。(和阻止冒泡.prevent相似)
keyup与keydown键盘事件
.enter 修饰符,回车时,调用事件方法
同理 .enter .tab .delete .esc .space .up .down .left .right
1.obj对象里面的每一个属性,都会采用 Object.defineProperty 去封装, 实现响应式 。所谓响应式,指的是数据发生变化后,页面自动更新。给对象后添加的数据不会采用Object.Property去封装,所以,就失去了响应式。如下文
this.obj.sex=" 男 "
vue 通过 $ set 方法,给对象添加响应式属性,如下文
this.$set ( this.obj , 'sex' , ' 男 ' ) ,使用这种方法给对象后添加的属性可以再页面中响应式显示。
2. 删除属性同理 : this.delete( this.obj , 'age')
3. 添加数组的数据 在vue中,操作数据,并触发页面更新只能使用数组的以下方法:
push,pop,unshift,shift,splice,resolve,sort
vue中表单输入和表单修饰符
vue中的表单输入及表单修饰符
基础用法
用
v-model
指令在表单<input>
、<textarea>
及<select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但 v-model
本质上不过是语法糖。
数据的双向绑定可以理解为:数据的单向绑定+UI事件监听,单向绑定是将model绑定到view,当model更新时,view也会更新;双向绑定就是model和view互相驱动。
示例
<div id="app">
<label>
<input type="text" v-model="info">
</label>
<p>{{info}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
info:'hello world!',
}
})
</script>
作用
它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model
会忽略所有表单元素的 value、checked、selected attribute
的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。
用法
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用 value property 和 input 事件;
- checkbox 和 radio 使用checked property 和 change 事件;
- select 字段将 value 作为 prop 并将 change作为事件。
注意
在 input框不同的type类型 v-model存放的内容也不一样
text 和 radiov-model 存放的是value值
checkbox v-model的true和false可以控制选中和不选中 v-model=‘aa’
这个aa是数组的情况下,会把选中的内容存放到这个数组中
<textarea>
v-model=‘a’ 可以影响文本域里面的内容
2.修饰符
.lazy
> 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy
> 修饰符,从而转为在 change 事件_之后_进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
.namber
想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
<input v-model.number="age" type="number">
因为即使在 type=“number” 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。
.trim
要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg">
以上是关于vue5 v-model详解,绑定事件,修饰符,深度响应式的主要内容,如果未能解决你的问题,请参考以下文章