摄影赚钱的网站,舟山公司做网站,昆明调整高风险地区,网站结构构图表单修饰符
1、lazy
input type text v-model.lazy value
p{{value}}/plazy跟懒加载类似#xff0c;只有再说鼠标离开光标的时候才会触发#xff0c;也就是说在input事件的oninput书法的时候不会赋值#xff0c;当onch…表单修饰符
1、lazy
input type text v-model.lazy value
p{{value}}/plazy跟懒加载类似只有再说鼠标离开光标的时候才会触发也就是说在input事件的oninput书法的时候不会赋值当onchange触发的时候才会进行赋值
2、trim
input type text v-model.trim value过滤掉输入内容的前后空格
3、number
input v-model.number age type number会将输入的值转换为数值类型
事件修饰符
1、stop
div clickshout(2)button click.stopshout(1)ok/button
/div //只输出1阻止了事件冒泡相当于调用了event.stopPropagation方法
2、prevent
form v-on:submit.preventonSubmit/form阻止了事件默认行为相当于调用了event.preventDefault方法
3、self
div v-on:click.selfdoThat.../div只有在event.target是当前元素自身时触发
使用修饰符时顺序很重要相应的代码会以同样的顺序产生。因此用 v-on:click.prevent.self 会阻止所有的点击而 v-on:click.self.prevent 只会阻止对元素自身的点击
4、once
button click.onceshout(1)ok/button绑定的事件只能触发一次
5、capture div click.captureshout(1)obj1div click.captureshout(2)obj2div clickshout(3)obj3div clickshout(4)obj4/div/div/div/div
// 输出结构: 1 2 4 3让事件触发从包含这个元素的顶层开发往下依次触发
6、passive
!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --
!-- 而不会等待 onScroll 完成 --
!-- 这其中包含 event.preventDefault() 的情况 --
div v-on:scroll.passiveonScroll.../div这个我们以移动端监听元素滚动事件说明在监听元素滚动事件的时候会一直触发onscroll事件让页面变的越来越卡因此在我们使用这个修饰符后相当于给onscroll事件增加了.lazy修饰符
7、native
my-component v-on:click.nativedoSomething/my-component让组件变成像html内置标签那样监听根元素的原生事件否则组件上使用v-on只会监听自定义事件
鼠标按钮修饰符
1、left、right、middle
button click.leftshout(1)ok/button
button click.rightshout(1)ok/button
button click.middleshout(1)ok/button鼠标按钮修饰符针对的就是鼠标的左键left、右键right和中键middle的点击操作 键盘修饰符
1、enter回车按键
2、delete删除按键
3、space空格按键
4、tabtab按键
5、escesc按键
6、ctrlctrl按键
7、shiftshift按键
8、altalt按键
9、直接用按键的代码来做修饰符如enter为13
!-- 键修饰符键别名 --
input keyup.enteronEnter
!-- 键修饰符键代码 --
input keyup.13onEnterVue.config.keyCodes {v: 86,f1: 112,// camelCase 不可用mediaPlayPause: 179,// 取而代之的是 kebab-case 且用双引号括起来media-play-pause: 179,up: [38, 87]使用方式
input typetext keyup.media-play-pausemethod}v-bind修饰符
async
//父组件
comp :myMessagebar update:myMessagefunc/comp
func(e){this.bar e;
}
//子组件
func2(){this.$emit(update:myMessage,params);
}简写
//父组件
comp :myMessage.syncbar/comp
//子组件
this.$emit(update:myMessage,params);能对props进行一个双向绑定
注意 1、使用async的时候自组件传递的事件名必须格式必须为update:value, 其中value必须与自组件中props中声明的名称完全一致 2、将v-bind.sync用在一个字面量的对象上例如v-bind.sync“{title: doc.title}”, 是无法正常工作的
