vue 修饰符

前言

为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~

一.表单修饰符

1.    .lazy

填写表单，最常用的是什么？input！v-model~而我们的修饰符正是为了简化这些东西而存在的

<div>
   <input type="text" v-model="value">
   <p>{{value}}</p>
</div>

从这里我们可以看到，我们还在输入的时候，光标还在的时候，下面的值就已经出来了，可以说是非常地实时。

但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。

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

这样即可~这样只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。

 

2.    .trim

在我们的输入框中，我们经常需要过滤一下一些输入完密码或者其他不小心多敲了一下空格的输入的内容。

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

需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的

 

二. 事件修饰符

1.stop

由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

2.prevent

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

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

注意：修饰符可以同时使用多个,但是可能会因为顺序而有所不同。

用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

也就是从左往右判断~

 

三.v-bind修饰符

1.sync(2.3.0新增)

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

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