Vue-修饰符

熟悉Vue中的一些修饰符。

v-on 中的修饰符

案列

        <div @click="click('click parent')">
            parent
            <div @click="click('click child')">
                child
                <div @click="click('click son')">
                    son
                </div>
            </div>
        </div>
        //点击 son 触发顺序 son --- child ---- parent 
        //vue默认事件冒泡。

.stop

阻止事件向上传递。
适用场景：不想触发上级事件。

    //如想在点击 son 的时候 不想触发 child parent 的事件。
       <div @click="click('click parent')">
            parent
            <div @click="click('click child')">
                child
                <div @click.stop="click('click son')">
                    son
                </div>
            </div>
        </div>
         on: {
                  click: function($event) {
                  // 阻止事件冒泡
                    $event.stopPropagation()
                    return _vm.click("click son")
                  }
                }

.pervent

阻止一些DOM自带的功能事件
如：a跳转，button 提交 等...

        <div>
            <a href="www.baidu.com" target="_blank" @click.prevent>百度一下就入坑</a>
        </div>
        on: {
            click: function($event) {
              $event.preventDefault()
            }
          }

.capture

事件捕获，被绑定的父级事件，如果子触发了，必定先调用父级。
.stop也无法阻止。

      <div @click.capture="click('click parent')">
            parent
            <div @click="click('click child')">
                child
                <div @click.stop="click('click son')">
                    son
                </div>
            </div>
        </div>
        // 点击son 顺序 parent --- son

.self

事件触发首先判断是否自身。

            <div @click.self="click('click self parent')">
            parent
            <div @click="click('click child')">
                child
                <div @click="click('click son')">
                    son
                </div>
            </div>
            // 点击 parent 才会触发 事件
             on: {
                click: function($event) {
                // 里面做了是否自身的比较
                        if ($event.target !== $event.currentTarget) {
                            return null
                        }
                    return _vm.click("click self parent")
                }
            }
          

.native

组件根元素事件绑定。
只对组件生效。

        <div @click.native="click('click native ')">
            native
        </div>
        // 无效
        <my-component @click.native="click('click native ')"></my-component>
        // 绑定在组件根节点

.once

事件只执行一次

.left .right .middle

鼠标事件，分别是 左击，滚轮，右击。
冒泡事件。

        <div @mousedown.left="click('mousedown left')">
            left
            <div @mousedown.right.prevent="click('mousedown right')">
                right
                <div @mousedown.middle="click('mousedown middle')">
                    middle
                </div>
            </div>
        </div>

键盘事件

       <input type="text" @keydown.tab="click('1')">

修饰符可以用链式写法，会把每种方法都结合

v-bind的修饰符

.prop

使用 property 获取最新的值；
attribute 设置的自定义属性会在渲染后的 HTML 标签里显示，property 不会。
并且不会传递进props中。

     <test-prop :data.prop="name" :name="name"></test-prop>

.camel

DOM 模板时将 v-bind 属性名称驼峰化。

.sync

添加一个侦听器

      <test-prop :data.prop="name" @moveName="nameFn" :user-name.sync.camle="name" :names="name"></test-prop>

this.$emit('update:userName','传入的值来进行修改'),on是回调函数，bind是直接修改参数值。
例如：v-model 也有一个侦听器 'input'.

v-model的修饰符

.lazy

取代 input 监听 change 事件

.number

输入number类型的数值，内部使用的是parseFloat 转换，并且之后再失去焦点的时候才会更新。

.trim

首尾空格过滤
同上.number修饰符一样，都是在焦点移除的时候强制更新。