• 提高工作效率的Vue常用修饰符


    表单修饰符

    v-model.lazy="value"   当光标离开输入框的时候,它才会更新视图,相当于在onchange事件触发更新。

    v-model.trim="value"   过滤输入的空格,(首尾)

    v-model.number="value"  如果先输入数字,那它就会限制你输入的只能是数字。

    如果先输入字符串,那它就相当于没有加.number

    事件修饰符  (注意:修饰符可以同时使用多个,但是可能会因为顺序而有所不同,左往右判断

    @click.stop  一键阻止事件冒泡,相当于调用了event.stopPropagation()方法。

    v-on:submit.prevent  用于阻止事件的默认行为,例如,当点击提交按钮时阻止对表单的提交

    @click.self  只当事件是从事件绑定的元素本身触发时才触发

    @click.once 只能用一次,绑定了事件以后只能触发一次,第二次就不会触发。

     @click.capture  与事件冒泡机制反过来

     v-on:scroll.passiv  相当于给onscroll事件整了一个.lazy修饰符

    @click.native 一般用于组件上面,如果绑定在正常html上面会失效

    鼠标按钮修饰符

    @click.left  左键点击

    @click.right  右键点击

    @click.middle 中键点击

    键值修饰符

    @keyup.keyCode    //普通键.enter.tab.delete   //(捕获“删除”和“退格”键).space.esc.up.down.left.right  //系统修饰键.ctrl.alt.meta(vue给一些常用的键提供了别名 )

    v-bind修饰符

    .sync   (2.3+新增,一般用于子组件修改父组件参数,相当于简化了Vue 的$emit)

    //父组件<comp :myMessage.sync="bar"></comp>

    //子组件this.$emit('update:myMessage',params);

      .prop (自定义属性存储变量)

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

    startsWith()   判断是否以指定的字符串开头区分大小写,是返回true 不是返回false
    原文作者:https://segmentfault.com/a/1190000016786254 (更详细)

     
  • 相关阅读:
    用js实现双色球
    nodejs_理解Buffer
    nodejs_buffer.copy
    nodejs_buffer.concat
    nodejs_buffer.alloc
    Ant Design Pro v4 最新版安装(跳过所有坑)
    python eventlet详解
    python 超时重试方法
    pycharm配置react
    Python性能优化的20条建议
  • 原文地址:https://www.cnblogs.com/77yf/p/13375959.html
Copyright © 2020-2023  润新知