vue的修饰符

一、v-model.lazy 只有在input输入框发生一个blur时才触发

v-model绑定的变量正常输入的时候会同步更新,加上lazy时只在失去焦点时更新绑定的变量。

二、v-model.trim 将用户输入的前后的空格去掉

三、v-model.number 将用户输入的字符串转换成number

我们在获取用户输入的数字时取到的是字符串类型,使用number可以取到数值类型。

四、@click.once点击事件只会触发一次

五、@click.stop点击子节点不会捕获到父节点的事件,以下例子中只会执行inner事件,去掉stop则会依次执行inner middle outer。

<div id="app">
  <div class="outeer" @click.stop="outer">
    <div class="middle" @click.stop="middle">
      <button @click.stop="inner">点击我(^_^)</button>
     </div>
   </div>
</div>

六、@click.prevent阻止事件的默认行为,而不停止事件的进一步传播。

七、@click.capture点击子节点会触发从外至内的父节点的事件(触发事件捕获),依次执行outer middle inner。

<div id="app">
  <div class="outeer" @click.capture="outer">
    <div class="middle" @click.capture="middle">
      <button @click.capture="inner">点击我(^_^)</button>
     </div>
   </div>
</div>

八、@click.self只会触发当前元素绑定的事件,以下例子只会执行inner事件

<div id="app">
  <div class="outeer" @click.self="outer">
    <div class="middle" @click.self="middle">
      <button @click.stop="inner">点击我(^_^)</button>
     </div>
   </div>
</div>

九、@click.passive告诉浏览器不想阻止事件的默认行为

<div @scroll.passive="onScroll">...</div>

十、事件修饰符可以串联,顺序很重要,相应的代码会以同样的顺序产生,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

十一、键盘修饰符

.enter:回车键
.tab:制表键
.delete:含delete和backspace键
.esc:返回键
.space: 空格键
.up:向上键
.down:向下键
.left:向左键
.right:向右键

<!-- 点回车时调用submit事件 -->
<input @keyup.enter="submit">

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

// 可以使用 :@keyup.f1
Vue.config.keyCodes.f1 = 112

十二、系统修饰符,可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器,@click.ctrl="doSomething"
.ctrl
.alt
.shift
.meta

十三、.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

十四、鼠标按钮修饰符,这些修饰符会限制处理函数仅响应特定的鼠标按钮

.left
.right
.middle

原文:https://blog.csdn.net/qq_42238554/article/details/86592295

原文地址:https://www.cnblogs.com/xjy20170907/p/11383763.html

时间: 2024-08-30 16:58:19

vue的修饰符的相关文章

Vue—事件修饰符

Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点 (.) 表示的指令后缀来调用修饰符. .stop.prevent.capture.self.once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面

Vue 时间修饰符之使用$event和prevent修饰符操作表单

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> <title id="title">{{title}}</title> </head> <body> <div id

【Vue】修饰符

一.事件修饰符 1..stop: 等同于event.stopPropagation() 12 <a v-on:click.stop="doThis"></a> 2..prevent:等同于event.preventDefault() 12 <!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form> 3..capture:使用事件捕获模式 1

vue .sync修饰符的使用

vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTit

Vue的修饰符 .sync

.sync 修饰符以前存在于 vue1.0版本里,在2.0版本中移除了 .sync  但是在2.0发布之后的实际应用中,我们发现 .sync 还是有其适用之处的,比如在开发可复用组件库时.我们需要做的只是让子组件改变父组件状态的代码更容易被区分.从2.3.0起,Vue重新引入了 .sync修饰符,但是这次它只是作为一个编译时的语法糖存在.它会被扩展为一个自动更新父组件属性的 v-on 监听器. <com :foo.sync="bar"></com> 会被扩展为:

vue之修饰符

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 -->

[Vue] : 键盘修饰符

键盘修饰符以及自定义键盘修饰符 为文本框回车键绑定事件 <input type="text" class="form-control" v-model="name" @keyup.enter="add"> 自定义键盘修饰符 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名: Vue.config.keyCodes.f2 = 113; 使用自定义的按键修饰符: <input

vue 事件修饰符

1.修饰符种类 .stop .prevent .capture .self .once .passive 2.self修饰符说明 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.

[Vue].sync 修饰符

可实现对prop 进行"双向绑定". 用法: 一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父组件可以监听那个事件并根据需要更新一个本地的数据属性: <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $even