vue应用 - 3.修饰符

• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符
• v-bind修饰符

表单修饰符

• .lazy

我们希望失去焦点的时候再更新视图

<div>{{lazyTxt}}</div>
 <input type="text" v-model.lazy="lazyTxt" placeholder="lazy">

• .trim

去除value两边的空格

<input type="text" v-model.trim="value">

• .number

如果你先输入数字，那它就会限制你输入的只能是数字。
如果你先输入字符串，那它就相当于没有加.number

<input type="text" v-model.number="numberTxt" placeholder="number">

事件修饰符

• .stop

一键阻止事件冒泡(由内向外)，相当于调用了event.stopPropagation()方法。

<button @click.stop="shout(1)">ok</button>

• .prevent

用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法

<form v-on:submit.prevent="onSubmit"></form>

• .self

只有点击自己才能触发绑定函数，例如下面，点击button不会触发父级绑定事件，只有当点击父级元素的时候才会触发父级绑定函数

<div @click.self="parentFn">
	<button @click="childFn">ok</button>
</div>

• .once

绑定了事件以后只能触发一次，第二次就不会触发

<button @click.once="shout">ok</button>

• .capture

默认事件触发是从目标开始往上冒泡，加了.capture以后，事件从顶层往下触发

<div @click.capture="parentFn">
   <button @click="childFn">ok</button>
</div>

• .passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

<div v-on:scroll.passive="onScroll">...</div>

• .native

如下实例：

<My-component @click.native="shout"></My-component>

鼠标按钮修饰符

• .left 左键点击
• .right 右键点击
• .middle 中键点击

<button @click.right="shout">ok</button>

键值修饰符

.keyCode

<input type="text" @keyup.keyCode.enter="keyCodeFn" /> // 点击回车按键时

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

Vue.config.keyCodes.f1 = 112

• .exact

<button type="text" @click.ctrl.exact="shout">ok</button>

v-bind修饰符

.sync

• 子组件传递的事件名必须为update:value
• .sync 修饰符的 v-bind 不能和表达式一起使用
• v-bind.sync=”{ title: doc.title }”，是无法正常工作的

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

• .prop

如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。
通过自定义属性存储变量，避免暴露数据
防止污染 HTML 结构

<input id="uid" title="title1" value="1" :index.prop="index">

• .camel

渲染为驼峰名

<svg viewbox="viewBox"></svg>