Vue修饰符

事件修饰符

在Vue 2.0中,事件修饰符允许我们在处理事件时对其进行修改或增强。以下是一些常用的事件修饰符:

  1. .stop:阻止事件冒泡。使用此修饰符后,父元素的相同事件不会再触发。
  2. .prevent:阻止事件的默认行为。比如,提交表单时可以使用.prevent修饰符阻止页面的刷新。
  3. .capture:使用事件捕获模式,即在父元素上触发事件处理程序,然后才在子元素上触发。默认情况下,事件是在冒泡阶段处理的。
  4. .self:只有当事件是从元素自身触发时才触发事件处理程序。如果事件是从子元素冒泡上来的,那么事件处理程序不会被触发。
  5. .once:只触发一次事件处理程序。即使事件被多次触发,只有第一次触发时会执行相应的处理程序。
  6. .passive:指定事件处理程序不会调用preventDefault()方法。这可以提升滚动性能。

.stop 阻止事件冒泡

<template>
    <div>
    	<div @click="showInfo" style="height: 50px;background: yellowgreen;">
        	<button @click.stop="showInfo">点我提示信息</button>
		</div>
    </div>
</template>
<script>
export default {
    methods: {
        showInfo(e) {
            // e.stopPropagation();
            alert(".prevent 修饰符")
        }
    }
};
</script>

.prevent 阻止事件的默认行为

<template>
    <div>
      	// 阻止了表单提交时的默认行为
        <form @submit.prevent="handleSubmit">
          <input type="text" />
          <button type="submit">Submit</button>
        </form>
		// 阻止了a标签的默认行为
        <a href="www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    </div>
</template>
<script>
export default {
    methods: {
        handleSubmit() {
            console.log('.prevent 修饰符')
        },
        showInfo(e) {
            // e.preventDefault();
            alert(".prevent 修饰符")
        }
    }
};
</script>

.capture 事件捕获模式

<template>
    <div>
    	<div style="background: red;padding: 5px;" @click.capture="showMsg(1)">
            div1
            <div style="background: yellow;padding: 5px;" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        showMsg(msg) {
            console.log(msg)
        }
    }
};
</script>

.once 只触发一次事件处理程序

<template>
    <div>
    	<button @click.once="showInfo">点我提示信息</button>
    </div>
</template>
<script>
export default {
    methods: {
        showInfo() {
            alert(".prevent 修饰符")
        }
    }
};
</script>

.self 只有当事件是从元素自身触发时才触发事件

<template>
    <div>
    	<div @click.self="showInfo" style="height: 50px;background: yellowgreen;">
        	<button @click="showInfo">点我提示信息</button>
		</div>
    </div>
</template>
<script>
export default {
    methods: {
        showInfo(e) {
            // e.stopPropagation();
            alert(".prevent 修饰符")
        }
    }
};
</script>

.passive 事件的默认行为立即执行,无需等待事件回调执行完成

<template>
    <div>
    	<ul @scroll="headelScroll" @wheel.passive="headelWhell" style="height: 100px; overflow: auto;background: bisque;color:#fff">
            <li style="height: 50px;background: rebeccapurple;">1</li>
            <li style="height: 50px;background: blue;">2</li>
            <li style="height: 50px;background: rebeccapurple;">3</li>
            <li style="height: 50px;background: blue;">4</li>
		</ul>
    </div>
</template>
<script>
export default {
    methods: {
        headelScroll() {
            console.log("@");
        },
        // 滚轮事件
        headelWhell() {
            for (let i = 0; i <100000; i++) {
                console.log('++');
            }
            console.log("@@");
        }
    }
};
</script>

.native 就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加 native事件是无法触发的。

<my-component v-on:click.native="doSomething">my-component>

键盘修饰符

在Vue 2.0中,你可以使用键盘修饰符来更方便地处理键盘事件。键盘修饰符是在处理键盘事件时使用的一种特殊语法,在按下特定键时执行相应的操作。

Vue 2.0中支持的键盘修饰符有以下几种:

普通

  • .enter:按下Enter键。
  • .tab:按下Tab键。
  • .delete.backspace:按下Delete或Backspace键。
  • .esc:按下Escape键。
  • .space:按下Space键。
  • .up:按下上箭头键。
  • .down:按下下箭头键。
  • .left:按下左箭头键。
  • .right:按下右箭头键。

系统修饰键

  • .ctrl:按下Ctrl键。
  • .alt:按下Alt键。
  • .shift:按下Shift键。
  • .meta:按下Meta键(通常是Command键或Windows键)。

还可以通过以下方式自定义一些全局的键盘码别名:

<!-- HTML -->
<div id="app">
    <input type="text" v-on:keydown.f5="prompt()">
</div>

Vue.config.keyCodes.f5 = 116;
let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5!');
        }
    }
});

你可以通过在Vue模板中使用这些修饰符来监听相应的键盘事件。以下是一个示例:

<template>
  <div>
    <input v-on:keydown.enter="handleEnter" />
    <input v-on:keydown.tab="handleTab" />
    <input v-on:keydown.delete="handleDelete" />
    <input v-on:keydown.esc="handleEscape" />
    <input v-on:keydown.space="handleSpace" />
    <input v-on:keydown.up="handleUp" />
    <input v-on:keydown.down="handleDown" />
    <input v-on:keydown.left="handleLeft" />
    <input v-on:keydown.right="handleRight" />
    <input v-on:keydown.ctrl="handleCtrl" />
    <input v-on:keydown.alt="handleAlt" />
    <input v-on:keydown.shift="handleShift" />
    <input v-on:keydown.meta="handleMeta" />
    <input v-on:keydown="handleAll" />
      
    
    <input v-on:keydown.caps-lock="handleAll" />
  div>
template>

<script>
export default {
  methods: {
    handleEnter() {
      // 按下Enter键的处理逻辑
    },
    handleTab() {
      // 按下Tab键的处理逻辑
    },
    // 其他键盘事件处理函数...
    handleAll () {
        console.log(e.key, e.keyCode); // CapsLock 20
    }
  }
}
script>

在上面的示例中,我们分别在不同的input元素上使用了不同的键盘修饰符,并绑定了相应的事件处理函数。当用户在输入框中按下对应的键时,对应的事件处理函数会被调用。

希望这能帮助到你!如果你有任何进一步的问题,请随时问我。

鼠标修饰符

针对的就是左键、右键、中键点击,对应的鼠标键点击才会触发函数

left 左键点击
right 右键点击
middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

表单修饰符

在Vue.js 2.0中,表单修饰符是一种用于修改表单输入行为的特殊指令。它们是通过在指令后面添加一个句点(“.”)和修饰符来使用的。

下面是一些常用的表单修饰符:

  • .lazy:默认情况下,Vue会在每次输入事件触发时同步更新输入框的值。使用.lazy修饰符可以改为在change事件触发时进行同步更新。

  • .number:将用户的输入值转为数字类型。如果输入的值无法转为有效的数字,则会返回原始的字符串。

  • .trim:自动过滤用户输入的首尾空白字符。

  • .native:监听组件根元素的原生事件,而不是组件内部通过$emit触发的自定义事件。

使用示例:

<input type="text" v-model.lazy="message"> 
<input type="text" v-model.number="age"> 
<input type="text" v-model.trim="username"> 

以上是一些常用的Vue.js 2.0表单修饰符,它们可以帮助我们更好地处理表单输入。

v-bind修饰符

在Vue.js 2.0中,v-bind 是用来绑定一个或多个属性的指令。它可以接受修饰符,用于修改绑定的行为。下面是一些常用的 v-bind 修饰符:

  • .prop:将属性绑定到组件的属性,而不是绑定到DOM元素的特性。这在使用自定义组件时非常有用。

  • .camel:将属性名转换为驼峰式命名。例如,v-bind:my-prop.camel 将会绑定到组件的 myProp 属性,而不是 my-prop 属性。

  • .sync:实现双向绑定。当绑定的值发生变化时,会将变化同步回父组件。注意,在实际使用中,需要在父组件中使用 .sync 修饰符来更新变量。

  • .modifiers:用于传递修饰符的参数。例如,.number.trim 修饰符可以使用 v-bind:my-prop.number.trim

使用示例:

<custom-component v-bind:prop-name.prop="value">custom-component> 
<my-input v-bind:input-value.camel="myValue">my-input> 
<my-component v-bind:my-prop.sync="parentData">my-component> 
<input v-bind:value.trim="inputValue"> 

注意,在Vue 2.0中,v-bind 通常可以用简写的冒号语法来代替,例如 :prop-name.prop="value" 等同于 v-bind:prop-name.prop="value"

以上是一些常用的Vue.js 2.0 v-bind 修饰符,它们可以帮助我们更好地控制属性绑定的行为。

.sync

作用:sync修饰符是一个语法糖,类似v-model,它主要是解决了父子组件的双向绑定问题。因为vue提倡的是单向数据流动,因此不能直接在子组件里面修改父组件传过来的数据,我们一般$emit。

sync修饰符其实是做了两步动作:
1、声明传的数据visible
2、声明@update:visible事件

注意:

使用sync的时候,子组件传递的事件名格式必须为update:value,其中value必须与子组件中props中声明的名称完全一致
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的

原始写法$emit:

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">显示</button>
    <my-alert :visible="visible" @close="closeAlert"></my-alert>
  </div>
</template>
<script>
import myalert from './components/myalert'
export default {
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  },
  methods:{
    closeAlert(value){
      this.visible = value
    }
  }
 
}
</script>
<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>
 
<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('close',false)
            }
        }
    }
</script>

一个数据就要带一个自定义事件才能实现双向绑定,为了避免乱起名引起的混乱,事件名我们最好约定一下规则。
因为是修改visible这个数据,因此事件我们统一就叫@update:visible

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">点击</button>
    <my-alert :visible="visible" @update:visible="value => visible=value"></my-alert>
  </div>
</template>
 
<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  }
 
}
</script>
 
<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>
 
<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('update:visible',false)
            }
        }
    }
</script>

这么写还是太麻烦了,但有了统一的规则,系统就可以帮我们自动生成不必要的代码,这就是sync修饰符的作用,它让写法更为简洁:

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">点击</button>
    <my-alert :visible.sync="visible"></my-alert>
  </div>
</template>
 
<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  },
 
}
</script>
<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>
 
<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('update:visible',false)
            }
        }
    }
</script> 

.prop

prop:设置自定义标签属性,编译后不会出现在html中,避免暴露数据,防止污染HTML结构

<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: 
// input.data === undefined
// input.attributes.data === this.inputData
 
<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: 
// input.data === this.inputData
// input.attributes.data === undefined

.camel

camel:将命名变为驼峰命名法,只有props和.prop会默认将kebab-case转化为camelCase,剩下的作为attribute的不会。而.camel修饰符正是针对attribute的。如将view-Box属性名转换为 viewBox。

data() {
    return {
        msgText: 'aaa'
    }
}
 
<h2 :msg-text="msgText">原本</h2>
<!-- 编译后为<h2 msg-text="aaa">原本</h2> -->
 
<h2 :msg-text.camel="msgText">加camel修饰符</h2>
<!-- 编译后为<h2 msgtext="aaa">加camel修饰符</h2>,由于camel将msg-text转化为msgText,html中不区分大小写,所以会将大写都转化为小写,则最终结果为msgtext -->

你可能感兴趣的:(vue,栏,vue.js,javascript,前端)