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

    2020-12-21 22:23:30
    vue修饰符 修饰符 修饰符可以分为: 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 表单修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 ...

    vue修饰符

    修饰符

    修饰符可以分为:

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

    表单修饰符

    .lazy

    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" >
    

    .number

    如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符

    <input v-model.number="age" type="number">
    

    效果:
    在这里插入图片描述

    .trim

    如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

    	<div id='other'>
    	        <input v-model.trim='trim'>
    	        <p ref='tr'>{{trim}}</p>
    	        <button @click='getStr'>获取</button>
    	</div>\
    
    	      var other = new Vue({
    	            el:'#other',
    	            data:{
    	                trim:''
    	            },
    	            methods:{
    	                getStr(){
    	                    console.log(this.$refs.tr.innerHTML)
    	                }
    	            }
    	
    	        })
    

    效果:
    在这里插入图片描述

    事件修饰符

    • stop 阻止事件继续传播
    • prevent 阻止标签默认行为
    • capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
    • self 只当在 event.target 是当前元素自身时触发处理函数
    • once 事件将只会触发一次
    • passive 告诉浏览器你不想阻止事件的默认行为
    	<!-- 阻止单击事件继续传播 -->
    	<a v-on:click.stop="doThis"></a>
    	
    	<!-- 提交事件不再重载页面 -->
    	<form v-on:submit.prevent="onSubmit"></form>
    	
    	<!-- 修饰符可以串联 -->
    	<a v-on:click.stop.prevent="doThat"></a>
    	
    	<!-- 只有修饰符 -->
    	<form v-on:submit.prevent></form>
    	
    	<!-- 添加事件监听器时使用事件捕获模式 -->
    	<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
    	<div v-on:click.capture="doThis">...</div>
    	
    	<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    	<!-- 即事件不是从内部元素触发的 -->
    	<div v-on:click.self="doThat">...</div>
    	
    	<!-- 点击事件将只会触发一次 -->
    	<a v-on:click.once="doThis"></a>
    	
    	<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    	<!-- 而不会等待 `onScroll` 完成  -->
    	<!-- 这其中包含 `event.preventDefault()` 的情况 -->
    	<div v-on:scroll.passive="onScroll">...</div>
    

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值。
    Vue 在以前允许为 v-on 在监听键盘事件时添加按键修饰符:

    比如 f2 的按键码为 113,那么我们可以通过 @keyup.113="…" 来使用该按键修饰符

    <!-- 只有在 `keyCode` 是 113 时调用 `vm.submit()` -->
    <input v-on:keyup.113="submit">
    

    其实,你还可以通过全局 config.keyCodes 对象,来实现:
    自定义键盘修饰符别名

    keyCodes
    类型:{ [key: string]: number | Array }
    用法:

    Vue.config.keyCodes = {
      v: 86,
      f1: 112,
      // camelCase 不可用
      mediaPlayPause: 179,
      // 取而代之的是 kebab-case 且用双引号括起来
      "media-play-pause": 179,
      up: [38, 87]
    }
    <input type="text" @keyup.media-play-pause="method">
    
    //1. 通过`Vue.config.keyCodes.名称 = 按键值`来自定义案件修饰符的别名:
    Vue.config.keyCodes.f2 = 113;
    //2. 使用自定义的按键修饰符:
    <input type="text" v-model="name" @keyup.f2="add">
    

    但是在官方文档中,已经明确提到:
    keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持
    所以,建议的是使用按键修饰符别名

    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
    常用的按键别名:

    • enter 回车键
    • tab tab 键
    • delete 删除(或退格)键
    • esc Esc 键
    • space 空格键
    • up ↑键
    • down ↓键
    • left ←键
    • right →键

    系统修饰键

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

    • ctrl
    • alt
    • shift
    • meta

    注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

    例如:

    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
    

    注意:

    请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。 仅在按下相应按键时才触发鼠标或键盘事件的监听器,简单地说就是,配合其他按键才能使用

    exact 修饰符

    exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

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

    2020-06-09 16:24:27
    Vue修饰符 事件修饰符 按键修饰符 系统修饰符 鼠标按钮修饰符 事件修饰符 事件 描述 .stop 可阻止事件冒泡 .prevent 可阻止事件的默认行为(如a标签点击后的跳转) .capture 可捕获内部事件并先处理,...

    Vue修饰符

    1. 表单输入修饰符
    2. 事件修饰符
    3. 按键修饰符
    4. 系统修饰符
    5. 鼠标按钮修饰符

    表单输入修饰符

    修饰符 藐视
    .lazy 焦点离开之后再触发
    .number 返回数字,而不是数字的字符串
    .trim 去除输入内容两端的空格

    用法

    <input type="text"   v-model.lazy="inputValue">
    <input type="number" v-model.number="inputValue">
    <input type="trim"   v-model.trim="inputValue">
    

    事件修饰符

    修饰符 描述
    .stop 可阻止事件冒泡
    .prevent 可阻止事件的默认行为(如a标签点击后的跳转)
    .capture 可捕获内部事件并先处理,再由内部事件处理
    .self 只有当前事件才触发,可用于父组件事件阻止冒泡行为
    .once 只触发一次事件
    .passive 提前告知浏览器该事件没有被阻止,优化移动端触屏性能,不能与(.prevent)一起使用

    用法

    1. 常规使用
      <button @click.stop="clickButton">click</button>
      
    2. 连续调用
      <a @click.stop.prevent="clickLink">百度</a>
      
    3. 仅修饰符
      <a href="https://www.baidu.com" @click.stop>百度</a>
      

    按键修饰符

    修饰符 描述
    .enter 捕获Enter键
    .tab 捕获Tab键
    .delete 捕获Backspace和Delete键
    .esc 捕获Esc键
    .space 捕获Space键
    .up 捕获上箭头键
    .down 捕获下箭头键
    .left 捕获左箭头键
    .right 捕获又箭头键

    用法

    <input type="text" @keyup.enter="enterEvent">
    

    系统修饰符

    • .ctrl
    • .alt
    • .shift
    • .meta
    • .exact(用于精确控制事件触发)

    可用于按键组合从而触发相应的事件,用法同上。

    鼠标按钮修饰符

    • .left
    • .right
    • .middle

    用法同上。

    展开全文
  • Vue 修饰符

    2020-04-25 23:22:46
    Vue提供了一些修饰符,这些修饰符在使用起来非常方便,比如阻止默认事件、冒泡等。 1. 表单修饰符 .lazy: v-modeil不用多说,输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据; <...

    Vue提供了一些修饰符,这些修饰符在使用起来非常方便,比如阻止默认事件、冒泡等。

    1. 表单修饰符

    .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">
    

    2. 事件修饰符

    .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:
    完整的事件机制是:捕获–目标–冒泡。
    默认的呢,是事件触发是从目标开始往上冒泡。
    当我们加了这个 .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>
    

    .passive:
    当我们在监听元素滚动事件的时候,会一直触发onscroll事件,在pc端是没问题的;
    但是在移动端,会让我们的网页变卡,我们使用这个修饰符的时候,相当于给 onscroll 事件整了一个 .lazy 修饰符

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

    .native:
    组件绑定事件是不会触发的,需要用native才能触发;
    可以理解为该修饰符的作用就是把一个 vue 组件转化为一个普通的 HTML 标签;
    注意:使用.native修饰符来操作普通HTML标签是会令事件失效的;

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

    3. 鼠标修饰符

    .left 左键点击
    .right 右键点击
    .middle 中键点击

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

    4. 键盘修饰符

    .keyCode:
    如果不用keyCode修饰符,那我们每次按下键盘都会触发shout。当我们想指定按下某一个键才触发这个shout的时候,这个修饰符就有用了,具体键码查看键码对应表;

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

    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
    

    我们从上面看到,键分成了普通常用的键和系统修饰键,区别是什么呢?
    当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发 keyup 事件的。
    我们需要将系统修饰键和其他键码链接起来使用;

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

    这样当我们同时按下 ctrl+c 时,就会触发 keyup 事件。
    另,如果是鼠标事件,那就可以单独使用系统修饰符。

    <button @mouseover.ctrl="shout(1)">ok</button>
    <button @mousedown.ctrl="shout(1)">ok</button>
    <button @click.ctrl.67="shout(1)">ok</button>
    

    不能单手指使用系统修饰键的修饰符(最少两个手指,可以多个)。
    可以一个手指按住系统修饰键一个手指按住另外一个键来实现键盘事件。
    也可以用一个手指按住系统修饰键,另一只手按住鼠标来实现鼠标事件。

    .exact:
    当我们像这样 <button type=“text” @click.ctrl=“shout(4)”> 绑定了 click 键按下的事件,我们同时按下几个系统修饰键,
    比如:ctrl shift 点击,也能触发,可能有些场景我们只需要或者只能按一个系统修饰键来触发(像制作一些快捷键的时候),而当我们按下ctrl和其他键的时候则无法触发。
    注意:这个只是限制系统修饰键的。
    像下面这样书写以后你还是可以按下ctrl+c,ctrl+v 或者 ctrl+普通键 来触发,但是不能按下 ctrl + shift +普通键 来触发。

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

    下面这个你可以同时按下 enter+普通键 来触发,但是不能按下 系统修饰键+enter 来触发。

    <input type="text" @keydown.enter.exact="shout('我被触发了')">
    

    5. v-bind 修饰符

    .sync
    在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。
    遗憾的是,真正的双向绑定会带来维护上的问题。因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
    我们通常的做法是:

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

    注意:

    1. 使用 sync 的时候,子组件传递的事件名必须为 update:value,其中 value 必须与子组件中 props 中声明的名称完全一致(如上例中的myMessage,不能使用my-message);
    2. 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如: v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是,只能提供你想要绑定的属性名,类似 v-model;
    3. 将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑;

    .prop
    区分:
    Property:节点对象在内存中存储的属性,可以访问和设置。
    Attribute:节点对象的其中一个属性( property ),值是一个对象。
    通过点访问法 document.getElementById(‘xx’).attributes 或者 document.getElementById(‘xx’).getAttributes(‘xx’) 读取,
    通过 document.getElementById(‘xx’).setAttribute(‘xx’,value) 新增和修改。
    在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。
    attribute 和 property 两个单词,翻译出来都是属性,但是《javascript高级程序设计》将它们翻译为特性和属性,以示区分

    // 这里的 id,value,style 都属于 property
    // index 属于 attribute
    // id、title 等既是属性,也是特性。修改属性,其对应的特性会发生改变;修改特性,属性也会改变
    <input id="uid" title="title1" value="1" :index="index">
    // input.index === undefined
    // input.attributes.index === this.index
    

    从上面我们可以看到如果直接使用 v-bind 绑定,则默认会绑定到 dom 节点的 attribute。
    为了:1.通过自定义属性存储变量,避免暴露数据;2. 防止污染 HTML 结构;
    我们可以使用这个修饰符,如下:

    <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>'
    })
    

    参考文章(侵删)

    展开全文
  • vue 修饰符

    2019-10-07 21:35:06
    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once ...

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

    Vue.js通过由点(.)表示的指令后缀来调用修饰符。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once

    1、事件修饰符

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- click 事件只能点击一次,2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>

    2、按键修饰符
    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13="submit">

    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">


    全部的按键别名:

    • .enter
    • .tab
    • .delete (捕获 "删除" 和 "退格" 键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
    • .ctrl
    • .alt
    • .shift
    • .meta

    lazy:在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)

    <input v-model.lazy="msg" >

     

    number:将输出字符串转为Number类型·(虽然type类型定义了是number类型,但是如果输入字符串,输出的是string)

    <input v-model.number="age" type="number">

     

    trim:自动过滤用户输入的首尾空格

    <input v-model.lazy.trim="msg" >
     

    转载于:https://www.cnblogs.com/yanyan1114/p/9203984.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,537
精华内容 2,214
关键字:

vue修饰符

vue 订阅