vue 修饰符 整理

事件修饰符

.stop

  <!-- 阻止单击事件继续传播 -->
  <a v-on:click.stop="doThis"></a>

 

.prevent

   <!-- 提交事件不再重载页面 -->
   <form v-on:submit.prevent="onSubmit"></form>

 

.capture

　　<!-- 添加事件监听器时使用事件捕获模式 -->
　　<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
　　<div v-on:click.capture="doThis"></div>

 

.self

　　<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
　　<!-- 即事件不是从内部元素触发的 -->
　　<div v-on:click.self="doThat"></div>

 

.once

　　<!-- 点击事件将只会触发一次 -->
　　<a v-on:click.once="doThis"></a>

 

.passive

　　<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
　　<!-- 而不会等待 `onScroll` 完成  -->
　　<!-- 这其中包含 `event.preventDefault()` 的情况 -->
　　<div v-on:scroll.passive="onScroll">...</div>

 .passive 和 .prevent 不要 一起使用

.prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

　　<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
　　<input v-on:keyup.13="submit">

 

全部的按键别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

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

　　// 可以使用 `v-on:keyup.f1`
　　Vue.config.keyCodes.f1 = 112

 

系统修饰键

• .ctrl
• .alt
• .shift
• .meta

修饰键与常规按键不同:

事件触发时修饰键必须处于按下状态，释放其它按键

　　<!-- Alt + C -->
　　<input @keyup.alt.67="clear">

　　<!-- Ctrl + Click -->
　　<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
　　<div @click.ctrl="doSomething">Do something</div>

 

修饰符

-.exact

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

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

 

• .lazy

转变为使用 change 事件进行同步：

　　<!-- 在“change”时而非“input”时更新 -->
　　<input v-model.lazy="msg" >

 

onchange 和 oninput 事件区别在于 前者在输入值后失去焦点触发,并且支持select,后者输入值实时触发,只支持文本

• .number

自动将用户的输入值转为数值类型，如果这个值无法被 parseFloat() 解析，则会返回原始的值。

• .trim

自动过滤用户输入的首尾空白字符

• .native

一个组件的根元素上直接监听一个原生事件。根元素不支持原生事件(比如label) 监听器将静默失败。它不会产生任何报错，但是 处理函数不会如你预期地被调用。

• .sync

prop 进行“双向绑定”。

原理:

//父
　　<text-document
 　　 v-bind:title="doc.title"
 　　 v-on:update:title="doc.title = $event"
　　></text-document>
//子
　　this.$emit('update:title', newTitle)

 

.sync 修饰符的 v-bind 不能和表达式一起使用

　　v-bind:title.sync="doc.title +'!'" //无效

　　v-bind.sync="{ title: doc.title }"//无效

 

---

鼠标按钮修饰符

• .left
• .right
• .middle

---

使用 v-on 有几个好处：

• 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
• 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
• 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。