Vue中常用的修饰符-CFANZ编程社区

修饰符可以同时使用多个,但是可能会因为顺序而有所不同。
用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击。也就是从左往右判断。


（1）、表单修饰符
1、.lazy
<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>


只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。
2、.trim
<input type="text" v-model.trim="value">


过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的。
3、.number
<input type="text" v-model.number="value">


如果你先输入数字，那它就会限制你输入的只能是数字。
如果你先输入字符串，那它就相当于没有加.number。
（2）、事件修饰符:
<!-- 只打印1 -->
<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>


由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。
一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。
5、.prevent
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>


用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
6、.self
<div class="blue" @click.self="shout(2)">
  <button @click="shout(1)">ok</button>
</div>


只当事件是从事件绑定的元素本身触发时才触发回调。
7、.once
<!-- 只能shout一次 -->
<button @click.once="shout(1)">ok</button>


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

8、.capture
<!-- 打印顺序 1 2 4 3 -->
<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为事件冒泡，从内向外。
事件触发从包含这个元素的顶层开始往下触发，也就是事件捕获。
9、.passive
<div v-on:scroll.passive="onScroll">...</div>


监听元素滚动事件的时候，会一直触发onscroll事件，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。
10、.native
<My-component @click.native="shout(3)"></My-component>


自定义组件必须使用.native来修饰这个click事件（即），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签
注意：使用.native修饰符来操作普通HTML标签是会令事件失效的。
（3）、鼠标按钮修饰符
.left左键点击
.right右键点击
.middle 中键点击
<button @click.right="shout(1)">ok</button>


（4）、键值修饰符
11、.keyCode
注意：这里的.keyCode代表键值
<input type="text" @keyup.keyCode="shout(4)">


指定按下某一个键才触发这个shout的时候，这个修饰符就有用了。keyCode码如下：
keyCode 按键
48-57 0-9
65-90 a-z/A-Z
112-135 F1-F24
8 BackSpace（退格）
9 Tab
13 Enter（回车）
20 Caps_Lock（大写锁定）
32 Space（空格键）
37 Left（左箭头）
38 Up（上箭头）
39 Right（右箭头）
40 Down（下箭头）
vue给一些常用的键提供了别名：
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right


//系统修饰键
.ctrl
.alt
.meta
.shift

全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112


--------------------------------------------------------------------------------

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


将系统修饰键和其他键码链接起来使用，这样当我们同时按下ctrl+c时，就会触发keyup事件。
12、.exact
有些场景我们只需要或者只能按一个系统修饰键来触发。
注意：这个只是限制系统修饰键的。
<button type="text" @click.ctrl.exact="shout(4)">ok</button>


可以按下ctrl+普通键 来触发，但是不能按下ctrl + 系统修饰键 +普通键来触发。
13、.sync
更方便的使用prop进行“双向绑定”。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            margin: 10px auto;
            width: 200px;
            height: 200px;
        }

        input {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            outline: none;
        }

        .show {
            width: 200px;
            height: 200px;
            background: orange;
            border: 1px solid red;
            border-top: none;
        }
    </style>
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <costum-show :is-show1.sync="isShow"></costum-show>
        <div class="show" v-show="isShow"></div>
    </div>
    <script>
        Vue.component('costum-show', {
            props: ['isShow'],
            template: `
             <div>
                  <input type="text" val="" @click="showHandle">
             </div>
        `,
            methods: {
                showHandle() {
                    this.$emit("update:is-show1", !this.isShow);
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: false
            }

        })
    </script>
</body>

</html>


1、使用.sync的时候，子组件传递的事件名必须为update:value，其中value与父组件绑定属性的值必须一致(如上例中的is-show1)
2、注意带有.sync修饰符的 v-bind不能和表达式一起使用 (例如v-bind:title.sync='yy=0?1:0' 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似v-model。
3、将 v-bind.sync用在一个字面量的对象上，例如v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
14、.prop
通过自定义属性存储变量，避免暴露数据
防止污染 HTML 结构
<input id="uid" title="title1" value="1" :index.prop="index">


15、.camel
<svg :viewBox="viewBox"></svg>


实际上会渲染为
<svg :viewbox="viewBox"></svg>


SVG标签只认 viewBox，却不知道 viewbox 是什么?
.camel修饰符，那它就会被渲染为驼峰名。
使用字符串模版，则没有这些限制。