修饰符

LiAng2023年11月30日大约 3 分钟约 662 字

基本说明

修饰符 (Modifiers) 是以(.)指明的后缀，指出某个指令以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()即阻止事件原本的默认行为 3.事件修饰符 .stop 阻止事件继续传播 .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为
键盘事件的修饰符比如: 项目经常需要监听一些键盘事件来触发程序的执行，而 Vue 中允许在监听的时候添加关键修饰符

<input v-on:keyup.13="submit">

5.v-model 的修饰符比如: 自动过滤用户输入的首尾空格 <input v-model.trim="msg"> 一句话: 修饰符 (Modifiers) 是以（.）指明的后缀，指出某个指令以特殊方式绑定官方文档：https://v2.cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

应用实例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue修饰符使用</title>
</head>
<body>
<div id="app">
    <!-- 
            1. 修饰符用于指出一个指令应该以特殊方式绑定。
            2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为
            3. 执行 程序员指定的方法
     -->
    <form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">
        妖怪名: <input type="text" v-model="monster.name"><br/><br/>
        <button type="submit">注册</button>
    </form>
    <p>服务返回的数据是{{count}}</p>
    <h1>修饰符扩展案例</h1>
    <button v-on:click.once="onMySubmit">点击一次</button><br/>
    <input type="text" v-on:keyup.enter="onMySubmit">
    <input type="text" v-on:keyup.down="onMySubmit">
    <input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
    <script>
    let vm = new Vue({
        el: '#app',
        data: {//数据池
            monster: {//monster数据(对象)的属性, 可以动态生成
            },
            count: 0
        },
        methods: {//方法池
            onMySubmit() {
                //console.log("我们自己的表单提交处理...");
                //"", null, undefined都是false
                if(this.monster.name) {
                    console.log("提交表单 name=", this.monster.name);
                    //这里，程序员就可以根据自己的业务发出ajax请求到后端
                    //得到数据后，在进行数据更新
                    this.count = 666;
                } else {
                    console.log("请输入名字..");
                }
            }
        }
    })
</script>
</body>
</html>