表单修饰符
-
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转为在change事件_之后_进行同步：<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > -
.number
如果想只允许输入数值类型，可以给 v-model 添加 number 修饰符：<template> <div > <h2>{{msg}}</h2> v-model: <input v-model.number="msg" type="number" > </div> </template> <script> export default { data() { return { msg:'' } }, } </script>注：
e为特殊的数字，也可以输入。经测试，发现1e1结果为10，1e2结果为100。eN表示10的N次方，并与e前的数字相乘。 测试结果如下：
-
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：<input v-model.trim="msg">
事件修饰符
-
.stop阻止冒泡事件的发生案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.stop事件修饰符</title> <script src="vue.js"></script> </head> <body> <div id="content"> <div id="obj1" v-on:click="doc"> obj1 <div id="obj2" v-on:click="doc"> obj2 <div id="obj3" v-on:click.stop="doc"> obj3 <div id="obj4" v-on:click="doc"> obj4 <!--。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj4、obj3； 在3开始 .stop阻止事件的冒泡行为，因为外圈不触发事件 --> </div> </div> </div> </div> </div> <script type="text/javascript"> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function (event) { this.id= event.currentTarget.id; alert(this.id) } } }) </script> </body> </html> -
.prevent阻止默认事件，一般用于阻止a链接的跳转事件，阻止表单提交刷新页面事件案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.prevent事件修饰符</title> <script src="vue.js"></script> </head> <body> <div id="content"> <a href="https://www.baidu.com;" @click.prevent="aa">222</a> <!-- 点击没有跳转百度首页 --> </div> <script type="text/javascript"> var content = new Vue({ el: "#content", data: { id: '' }, methods: { aa(){ console.log("22") }, } }) </script> </body> </html> -
.capture添加事件侦听器时使用事件捕获模式，即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title> <script src="vue.js"></script> </head> <body> <div id="content"> <div id="obj1" v-on:click="doc"> obj1 <div id="obj2" v-on:click.capture="doc"> obj2 <div id="obj3" v-on:click="doc"> obj3 <div id="obj4" v-on:click="doc"> obj4 <!--。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3； 由于1，2有修饰符，故而先触发事件，并且时捕获模式，由外到内，然后就是4本身触发，最后冒泡事件。 --> </div> </div> </div> </div> </div> <script type="text/javascript"> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function (event) { this.id= event.currentTarget.id; alert(this.id) } } }) </script> </body> </html> -
.self只当事件在该元素本身（比如不是子元素）触发时触发回调，只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.self事件修饰符</title> <script src="vue.js"></script> </head> <body> <div id="content"> <div id="obj1" v-on:click="doc"> obj1 <div id="obj2" v-on:click="doc"> obj2 <div id="obj3" v-on:click.self="doc"> obj3 <div id="obj4" v-on:click="doc"> obj4 <!--。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj4、obj2、obj1； 3阻止了本身的冒泡行为，但不会阻止其它元素的冒泡行为 --> </div> </div> </div> </div> </div> <script type="text/javascript"> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function (event) { this.id= event.currentTarget.id; alert(this.id) } } }) </script> </body> </html> -
.once事件只触发一次，后续调用不再执行<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title> <script src="vue.js"></script> </head> <body> <div id="content"> <div @click.once="aa"> dd </div> </div> <script type="text/javascript"> var content = new Vue({ el: "#content", data: { id: '' }, methods: { aa(){ console.log("22") //不论点多少次，最多执行一次 }, } }) </script> </body> </html> -
.passive这个修饰符会执行默认方法，主要用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验。
（1）浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。
（2）通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
（3）这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。
注：passive和prevent冲突，不能同时绑定在一个监听器上。
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键，Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
- 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
entertabdelete(捕获“删除”和“退格”键)escspaceupdownleftright
-
也可以自定义修饰符
(1)定义
Vue.config.keyCodes.f2 = 113;(1)使用
<input type="text" v-model="name" @keyup.f2="add"> -
获取按键码的方法
document.onkeydown = function(even){ //获取键盘码 console.log(even.keyCode); }
系统修饰符
.ctrl.alt.shift.meta
- 按下
alt的同时再按下67（字母C）调用事件<input v-on:keyup.alt.67="clear"> - 按下
alt和ctrl的同时再按下67（字母C）调用事件<input v-on:keyup.alt.ctrl.67="clear">
.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件，没有任何系统修饰符被按下的时候才触发。
<!-- 只有 Ctrl 被按下时，且点击鼠标左键的时候才触发，只要按下多余的按键就不会触发该事件 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 只有点击鼠标左键的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
鼠标按钮修饰符
鼠标按钮修饰符会限制处理函数仅响应特定的鼠标（click）按钮（keyup）。
.left，当鼠标点击事件绑定left，只有按下鼠标左键响应事件，当键盘按下事件绑定.left时，只有按下键盘左键响应事件。.right，当鼠标点击事件绑定right，只有按下鼠标由键响应事件，当键盘按下事件绑定.right时，只有按下键盘右键响应事件。.middle，当鼠标点击事件绑定middle，只有按下鼠标中间滚轮响应事件，当键盘按下事件绑定.middle时，所有键盘按键按下时都会响应事件
sync修饰符
.sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
<comp :foo.sync="bar"></comp>
会被扩展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)
猛一看不明白，下边我么通过一个实例（弹窗的关闭事件）来说明这个代码到底是怎么运用的。
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{{show}}，所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件，并传入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。
输入框常用事件
html
<input type="text" @change="specifiName($event)" />//输入框的change事件，当离开输入框或按enter时才调用函数
<input type="text" @input="specifiName($event)" />//输入框的输入事件，只要输入一个字符就会调用该函数
<input type="text" @keyup.enter="specifiName($event)" />//输入框的回车事件，按下回车后调用
css
var vm = new Vue({
el: "#app",
methods: {
specifiName(e) {
var that = this;
var val = e.target.value;
console.log(val);
},
}
});
扫一扫
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
