vue 常用的修饰符及其使用

修饰符是用于限定类型以及类型成员的声明的一种符号。

 

常见修饰符种类：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符。

 

1. 表单修饰符

// lazy、trim、number
 
// 光标离开标签的时候，才会将值赋予给value
<input type="text" v-model.lazy="value">
// 过滤用户输入的首尾空格字符，注意，如果是中间的空格则不会过滤
<input type="text" v-model.trim="value">
// 自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值
<input v-model.number="age" type="number">

2. 事件修饰符

// stop、prevent、self、once、capture、passive、native
 
// 阻止了事件冒泡
<button @click.stop="btn()">ok</button>
// 阻止了事件的默认行为
<form v-on:submit.prevent="onSubmit"></form>
// 只当在 event.target 是当前元素自身时触发处理函数
<div v-on:click.self="doSome">...</div>
// 事件只能触发一次
<button @click.once="btn()">ok</button>
// 事件触发从包含这个元素的顶层开始往下触发 // 输出结构: 1 2
<div @click.capture="btn(1)">
    1
    <div @click.capture="btn(2)">
        2
    </div>
</div>
/* 在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符*/
<div v-on:scroll.passive="onScroll">...</div>
/*让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件，注意：使用.native修饰符来操作普通HTML标签是会令事件失效的*/
<my-component v-on:click.native="doSomething"></my-component>

3. 鼠标按键修饰符

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

4. 键值修饰符

// onkeyup，onkeydown，后面需要跟keycode编码名或者按键编码 
 
<input type="text" @keyup.keyCode="btn()">

5. v-bind修饰符

// async、prop、camel
 
// 能对props进行一个双向绑定
// 父组件
<comp :myMessage.sync="bar"></comp>
// 子组件
this.$emit('update:myMessage',params);
 
 
// 上面代码与以下代码是等同的,实际上就是实现了获取子组件信息处理并回传
// 父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
    this.bar = e;
}
// 子组件js
func2(){
  this.$emit('update:myMessage',params);
}

注意：

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

// 设置自定义标签属性，避免暴露数据，防止污染HTML结构
<input id="uid" title="title1" value="1" :index.prop="index">
 
// 将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox
<svg :view-Box.camel="viewBox"></svg>