VUE修饰符知识点补充

VUE知识点补充

这篇博客是为了补充上篇VUE的中篇的知识点

修饰符
在VUE中我们认识了一些指令可以用简写的形式来代替V-指令，我们再认识下缩写中的缩写修饰符

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

1.表单修饰符

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

.lazy

//当输入完成离开光标后才执行相当于在onchange事件触发更新。
<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>

.number

//输入字符串转为有效的数字
<div>
   <input type="text" v-model.number="value">
   <p>{{value}}</p>//输入值将转换为number类型
</div>

.trim

//输入首尾空格过滤
<div>
   <input type="text" v-model.trim="value">
   <p>{{value}}</p>//输入值如果有空格会自动将空格删去
</div>

2. 事件修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。

.stop

//由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。
<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。
<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>

.prevent

//用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
<form v-on:submit.prevent="onSubmit"></form>

.once

//只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。
//键盘按坏都只能shout一次
<button @click.once="shout(1)">ok</button>

3.表单修饰符
.left ，.right ，.middle

//分别绑定鼠标的左,右,中
<button @click.left ="shout(1)">ok</button>//左键触发
<button @click.right ="shout(1)">ok</button>//右键键触发
<button @click.middle="shout(1)">ok</button>//中键键触发

4.键值修饰符
.left ，.right ，.middle

//键盘触发
<input type="text" @keyup.keyCode="shout(4)">
//或,直接键码
<input type="text" @keyup.13="shout(4)">

5.v-bind修饰符

• .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
• .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
• .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

.sync
我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。我们通常的做法是

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

现在这个.sync修饰符就是简化了上面的步骤

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

这是关于VUE中对常用的修饰符中的补充，希望大家能看懂把