vue修饰符

表单修饰符
.lazy
光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新
.trim
过滤首尾的空格！首尾，中间的是不会过滤的
.number
限制输入数字或者输入的东西转换成数字
事件修饰符
.stop
相当于调用了event.stopPropagation()方法。
由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。
.prevent
用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
.self
只当事件是从事件绑定的元素本身触发时才触发回调。
.once
只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。
.capture
事件的冒泡，其实完整的事件机制是：捕获阶段–目标阶段–冒泡阶段。
默认的呢，是事件触发是从目标开始往上冒泡。
当我们加了这个.capture以后呢，我们就反过来了，事件触发从包含这个元素的顶层开始往下触发。

 <div @click.capture="shout(1)">
      obj1
      <div @click.capture="shout(2)">
        obj2
        <div @click="shout(3)">
          obj3
          <div @click="shout(4)">
            obj4
          </div>
        </div>
      </div>
    </div>
    // 1 2 4 3 

从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~
.passive
当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
.native
直接在组件的上面添加事件是不起作用的，可以在组件上面添加该修饰符就可以起作用

鼠标按钮修饰符
.left 左键点击
.right 右键点击
.middle 中键点击

键值修饰符
.keyCode
点击指定键值时触发、

<input type="text" @keyup.keyCode="shout(4)">

.exact
绑定了click键按下的事件，惊奇的是，我们同时按下几个系统修饰键，比如ctrl shift点击，也能触发，可能有些场景我们只需要或者只能按一个系统修饰键来触发（像制作一些快捷键的时候），而当我们按下ctrl和其他键的时候则无法触发。那就这样写。
注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

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

v-bind修饰符
.sync

//父亲组件
<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);

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源，用。sync简单
注意：使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)
简单来说就是简化父子组件之间传值时出现要手动对变量就行赋值的情况
.prop

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

index是一个attribute（特性），既可以通过attributes.index拿到，input.attributes.index === this.index
这可以用.prop这个属性来改变，增加安全性

<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined

.camel
由于HTML 特性是不区分大小写的。

<svg :viewBox="viewBox"></svg>

实际上会渲染为

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

这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
另，如果你使用字符串模版，则没有这些限制。

new Vue({
  template: '<svg :viewBox="viewBox"></svg>'
})