精华内容
下载资源
问答
  • vue常用修饰符

    2020-01-13 21:48:38
    在开发的过程中,如果我们能够熟练掌握vue修饰符,就可以大大提高我们的开发效率 分类 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 表单修饰符 .lazy <div> <input type="text" v-model="value...

    在开发的过程中,如果我们能够熟练掌握vue的修饰符,就可以大大提高我们的开发效率

    分类

    • 表单修饰符
    • 事件修饰符
    • 鼠标按键修饰符
    • 键值修饰符

    表单修饰符

    • .lazy
    <div>
        <input type="text" v-model="value">
        <p>{{value}}</p>
    </div>
    //每次数据改变,视图都会发生改变
    =======================
    <div>
        <input type="text" v-model.lazy="value">
        <p>{{value}}</p>
    </div>
    //只有光标离开之后,数据才会发生改变
    
    • .trim

    在进行传递参数或者登陆注册的时候,经常会出现空格耽误事的问题,这个修饰符就会很好的解决这一问题

    <input type="text" v-model.trim="value" />
    // 当输入`   name x  ` -> `name x`
    
    • .number

    可以限制输入框是数字类型,但是有问题!!! 不能先输入字母在输入数字,否则无效

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

    事件修饰符

    • .stop

    阻止冒泡事件

    <div>
        <p
            @click.stop="shunt(1)"
        ></p>
    </div>
    // 点击p的时候,就会阻止冒泡行为了
    
    • .prevent

    阻止默认事件

    <a href="#" @click.prevent="shunt(1)"></a>
    // 点击p的时候,就会默认的事件
    
    • .once

    触发一次,他的名字和他的用法一模一样

    <button @click.once="shunt(1)">触发</button>
    
    • .native

    当我们写小组件的时候,可能需要绑定一些事件,但是正常绑定可能是无效的,例如下面这样

    <my-demo @click="shunt(1)"></my-demo>
    ===========================
    <my-demo @click.native="shunt(1)"></my-demo>
    //才是有效的
    
    • .passive

    当我们监听滚动事件的时候,会一直触发onscroll事件,在pc端我们是没有任何问题的,但是如果在手机端,会变得很卡,那么passive相当于是给scroll添加了一个lazy事件,

    <div @scroll.passive="xxxx()">这里面内容很多</div>
    
    • .capture

    我们都知道事件的机制是: 捕获机制->目标阶段->事件冒泡,当我们设置了capture之后,我们就可以控制它的顺序,让他从顶级元素向下进行冒泡执行

    <div @click.capture="xx">1
        <div @click.capture="xx">2
            <div @click="xx">3
                <div @click="xx">4
                </div>
            </div>
        </div>
    </div>
    // 默认顺序是-> 4 3 2 1   设置了capture之后 -> 1 2 4 3
    

    鼠标按钮修饰符

    • .left 左键
    • .right 右键
    • .middle 中键
    <button @click.right="show(1)">点击我</button>
    

    键值修饰符

    • .keycode

    里面有vue提供的常用的按键别名,比如回车还有删除等等内容信息

    <input type="text" @keyup.enter="" />  // 代表回车之后执行的操作
    
    展开全文
  • vue 常用修饰符

    2020-05-09 10:01:03
    v-modeil输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据 <input type="text" v-model.lazy="value"> .trim: 输入框过滤首尾的空格 <input type="text" v-model.trim=...

    .lazy
    v-modeil输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据

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

    .trim:
    输入框过滤首尾的空格

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

    .number
    先输入数字就会限制输入只能是数字,先字符串就相当于没有加number,注意,不是输入框不能输入字符串,是这个数据是数字

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

    .stop
    > 阻止事件冒泡,相当于调用了event.stopPropagation()方法

    <button @click.stop="test">test</button>
    

    .prevent
    阻止默认行为,相当于调用了event.preventDefault()方法,比如表单的提交、a标签的跳转就是默认事件

    <a @click.prevent="test">test</a>
    

    .self
    只有元素本身触发时才触发方法,就是只有点击元素本身才会触发。比如一个div里面有个按钮,div和按钮都有事件,我们点击按钮,div绑定的方法也会触发,如果div的click加上self,只有点击到div的时候才会触发,变相的算是阻止冒泡

    <div @click.self="test"></div>
    

    .once
    只能用一次,无论点击几次,执行一次之后都不会再执行:

    <div @click.once="test"></div>
    

    .capture
    事件的完整机制是捕获-目标-冒泡,事件触发是目标往外冒泡

    <div @click="test(1)">  <button @click="test(2)">test</button></div>
    
    顺序是2 1,capture的作用就是让这个顺序相反:
    
    <div @click.capture="test(1)">  <button @click="test(2)">test</button></div>
    

    .passive
    官网解释说可以提升移动端的性能,查了查,大概解释就是每次滚动都会有一个默认事件触发,加了这个就是告诉浏览器,不需要查询,不需要触发这个默认事件preventDefault:

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> 
    
    <!-- 而不会等待 `onScroll` 完成 -->
    
     <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    
    <div v-on:scroll.passive="onScroll">...</div>
    

    .native
    组件绑定当前组件的事件是不会触发的,需要用native才能触发: 看不懂

    <My-component @click="shout(3)"></My-component>
    

    鼠标.left、.reight、.middle
    就是鼠标点击的时候就触发

    <button @click.right="test">test</button>
    

    .keyCode
    监听按键的指令,具体可以查看vue的键码对应表
    注意,只有你点击过一次或者聚焦到这个输入框才能使用键盘触发

    <input type="text" @keyup.enter="test(1)">
    
    <button @click.enter="test(1)">test</button>
    

    .exact
    系统修饰键,只有按着这个键然后用鼠标点击才会触发

    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    
     <button @click.ctrl="onClick">A</button>
    
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">A</button>
    

    .sync
    对prop进行双向绑定

    //父组件
    
    <fa-comp :fatest.sync="test"></fa-comp>
    
    //子组件
    
    this.$emit('update:fatest,sontest);
    

    官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
    示例代码如下

    <comp :foo.sync="bar"></comp>
    

    会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>
    

    当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue)
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,159
精华内容 8,463
关键字:

vue常用的修饰符

vue 订阅