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

　　
　　
　　<div v-on:click.self="doThat">div>

 

.once

　　
　　<a v-on:click.once="doThis">a>

 

.passive

　　
　　
　　
　　<div v-on:scroll.passive="onScroll">...div>

 .passive 和 .prevent 不要 一起使用

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

按键修饰符

　　
　　<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

修饰键与常规按键不同:

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

　　
　　<input @keyup.alt.67="clear">

　　
　　
　　<div @click.ctrl="doSomething">Do somethingdiv>

 

修饰符

-.exact

　　
　　<button @click.ctrl.exact="onCtrlClick">Abutton>

　　
　　<button @click.exact="onClick">Abutton>

 

• .lazy

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

　　
　　<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 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。