记录我的Vue学习 --- 四种修饰符

387 阅读3分钟

记录学习的四种修饰符:

  • 事件修饰符
  • 表单修饰符
  • 键盘修饰符
  • 鼠标修饰符

1.事件修饰符

如果可以,避免在methods中处理DOM事件细节,最好methods只有纯粹的数据逻辑。

那为了处理DOM事件,Vue.js为v-on提供了事件修饰符:

  • .stop --- 取消事件的进一步冒泡,即不会向上触发其他点击事件,相当于event.stopPropagation()
 <div class="div1" @click="number(2)">
    <!--<div class="div2" @click="number(1)"></div>-->
    <!--不加.stop的话会冒泡,输出1,2-->
    <div class="div2" @click.stop="number(1)"></div>  
    <!--加.stop会阻止冒泡,输出1-->
</div>
    
<script>
    var vm = new Vue({
        el : ".div1",
        methods : {
            number : function(num){
                console.log(num);
            }
    }
})
</script>
  • .prevent --- 阻止事件的默认行为 --- 相当于 event.preventDefault()
    例如:
    点击submit按钮提交表单,用了.prevent 就会阻止表单的提交。

  • .capture --- 事件冒泡的顺序是沿着DOM树向上传播的(子->父),但是.capture会将顺序改过来:

<div class="div1" @click.capture="number(2)">
    <div class="div2" @click="number(1)"></div> 
</div>
<!--正常点击div2会输出1,2-->
<!--加.capture点击div2会输出2,1-->

注意.capture作用在父节点上,每层都加,不然按普通冒泡处理。

  • .self --- 只当事件在该元素本身触发时才会触发回调 --- 子元素也不会触发。
<div class="div1" @click.self="number(2)">
    <div class="div2" @click="number(1)"></div> 
</div>
<!--点击div1区域(不包含div2)输出2 ,点击div2区域(不包含div1)输出1-->

2.表单修饰符

  • .lazy --- v-model的绑定很同步,比如下面这个例子,你输入的时候它就在展示你输入的信息了 ,如果用.lazy修饰符,情况就会跟onchange事件一样,在我们全部输入完离开之后(outline消失)才会更新视图。
<div class="a">
    <input type="text" v-model="val" />
    <p>{{ val }}</p>
</div>
        
<script>
    var vm = new Vue({
        el : '.a',
        data : {
            val : ''
        }
    })
</script>
<input type="text" v-model.lazy="val" />

  • .number --- 可以自动将用户的输入值转换为Number类型(如果原值的转换结果为NaN则返回原值):

    然后我就试了一下,发现emm,输入字符串显示的还是字符串,输入数字显示的还是数字??

    但是在输入数字+字符串的组合就只会提取字符串之前数字:

不然就会展示原值:

  • .trim --- 会过滤用户输入的首尾空格

中间的空格不会过滤:

3.键盘修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰 .keyCode

<!-- 只有在 keyCode 是 14 时调用方法lala() -->
<button v-on:keyup.14="lala">lala</button>

有好多个键值,很难记忆,所以提供一些经常使用的键值的别名:

  • enter
  • tab
  • delete
  • esc
  • space
  • up
  • down
  • left
  • right

另外也可以用config.keyCodes对象自定义按钮修饰符的别名:

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

4.鼠标修饰符

  • .left --- 鼠标左键触发
  • .right --- 鼠标右键触发
  • .middle --- 鼠标中键触发
<div class="div1" @click.left="number(2)" @click.right="number(3)" @click.middle="number(4)"></div>
        
<script>
    var vm = new Vue({
        el : ".div1",
        methods : {
            number : function(num){
                console.log(num);
            }
        }
    })
//点击鼠标左键,输出2
//点击鼠标右键,输出3
//点击鼠标中键,输出4
</script>

有什么建议或者我有什么写得不好的,望告知,蟹蟹~🦀🦀