Vue修饰符
事件修饰符
在Vue 2.0中，事件修饰符允许我们在处理事件时对其进行修改或增强。以下是一些常用的事件修饰符：
.stop：阻止事件冒泡。使用此修饰符后，父元素的相同事件不会再触发。.prevent：阻止事件的默认行为。比如，提交表单时可以使用.prevent修饰符阻止页面的刷新。.capture：使用事件捕获模式，即在父元素上触发事件处理程序，然后才在子元素上触发。默认情况下，事件是在冒泡阶段处理的。.self：只有当事件是从元素自身触发时才触发事件处理程序。如果事件是从子元素冒泡上来的，那么事件处理程序不会被触发。.once：只触发一次事件处理程序。即使事件被多次触发，只有第一次触发时会执行相应的处理程序。.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 -->