精华内容
下载资源
问答
  • 主要给大家介绍了关于Vue事件修饰符native、self的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue事件修饰符native 的作用

    千次阅读 2019-07-29 16:27:47
    转载: https://blog.csdn.net/qq_29468573/article/details/80771625 通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。 ...

    转载: https://blog.csdn.net/qq_29468573/article/details/80771625

    通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。

    可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

    展开全文
  • Vue 修饰符

    千次阅读 2018-04-03 16:52:19
    .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 鼠标按钮修饰符 表单输入绑定 .lazy .number .trim 组件上的修饰符 .native .sync 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀...

    目录

    修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

    事件处理


    1. 事件修饰符

    在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求. 尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
    为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    <!-- 阻止单击事件继续传播 -->
    <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>

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

    Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

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

    这个 .passive 修饰符尤其能够提升移动端的性能。

    不要把 .passive.prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

    2.按键修饰符

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

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

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

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

    全部的按键别名:

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

    可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

    你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符:

    <input @keyup.page-down="onPageDown">

    在上面的例子中,处理函数仅在 $event.key === 'PageDown' 时被调用。

    有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,它们的内置别名应该是首选。

    系统修饰键

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

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

    请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCode:keyup.17

    .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">A</button>
    
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">A</button>
    鼠标按钮修饰符
    • .left
    • .right
    • .middle

    这些修饰符会限制处理函数仅响应特定的鼠标按钮。


    表单输入绑定


    .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 修饰符:

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



    组件上的修饰符


    .native

    有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如:

    <my-component v-on:click.native="doTheThing"></my-component>

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

    当使用一个对象一次性设置多个属性的时候,这个 .sync 修饰符也可以和 v-bind 一起使用:

    <comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>

    这个例子会为 foo 和 bar 同时添加用于更新的 v-on 监听器。

    展开全文
  • vue之.native修饰符

    2019-01-03 18:18:00
    .native修饰符就是用来注册元素的原生事件而不是组件自定义事件的 比如:自定义Button.vue组件 <template> <button type="button" @click="clickHandler"><slot /></button> </...

    .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的

     

    比如:自定义 Button.vue 组件

    <template>
      <button type="button" @click="clickHandler"><slot /></button>
    </template>
    export default {
      name: 'button',
      methods: {
        clickHandler () {
          this.$emit('vclick') // 触发 `vclick` 事件
        }
      }
    }

    引用 Button.vue 组件

    <vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>
    import vButton from '@/components/Button'
    export default {
      components: { vButton },
      methods: {
        clickHandler () {
          alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
        },
        vClickHandler () {
          alert('onvclick') // 触发 `vclick` 自定义事件
        }
      }
    }

    如果将上面模版改成如下方式,那么两个事件都会执行。

    <vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>

     

    所以, .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的。

     

     

     

     

     

    转载于:https://www.cnblogs.com/catherLee/p/10216125.html

    展开全文
  • native修饰符 一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法。 使用过程中没有考虑@eventName作用标签的类型,因为一般将该语法用在html原生标签...

    native修饰符

    一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法。

    使用过程中没有考虑@eventName作用标签的类型,因为一般将该语法用在html原生标签,在组件标签上使用的时候,出现了@click="handler"无法触发handler事件。

    以下为事故现场:

    <my-component @click="handler"><my-component/>

    使用该组件的vue实例
    注:handler( )为ES6语法,等同于handler:function( )

        methods:{
            handler(){
                console.log('click me');
            }
        }

    经过面向搜索编程(百度)
    发现默认@eventName使用在组件上是表示绑定了组件自定义eventName
    要绑定原生DOM事件,需要使用.native来修饰@eventName,即 @eventName.native 语法

    那么自定义事件又是怎么一肥事呢?

    一般来说,自定义事件用于Vue自定义组件,用于内部DOM元素事件响应时,开放给组件外部的API。

    specially,他需要组件内部使用$emit('defineEventName',value)这个方法来触发,这也表明了一开始我的错误想法,以为是触发组件内部的原生DOM的click方法,这里指明了使用@evnetName作用在组件上,不会触发原生DOM事件,即一开始的无反应。

    这里完成了一个@click="handler",而不是用native修饰符的例子,基于Vue自定义事件

    my-component组件内部实现

        <template>
            <button @click="in">click me</button>
        </template>
        methods:{
            in(){
                this.$emit('click')
            }
        }

    这个例子在点击按钮click me之后能够通过$emit('click')触发组件自定义的click事件以调用使用该组件上的Vue实例上的handler方法,打印出click me。

    在组件上想要触发@click事件,组件内部需要有一个可以触发原生click事件的元素,并且这个原生click事件绑定一个用于提交emit('click')到组件上的@click函数

    转载于:https://www.cnblogs.com/sefaultment/p/9360646.html

    展开全文
  • 关于vue的.native修饰符

    2019-01-17 17:15:20
    问题起源:在使用...在度娘的帮助下,总算是找到了解决办法,即:加上.native修饰符 &lt;file-upload label="添加" @click.native="setId(item.id)" @fileUploaded="fileUpload...
  • vue .native修饰符

    2021-03-24 18:22:03
    比如 router-link 路由跳转,默认标签为a,但是他的click 事件却是无效的,这时候就可通过native修饰符来使click事件生效例如: <router-link class="list" tag="li" to="aboutUs" @click.native="getScroll">...
  • Vue修饰符前言表单修饰符.lazy.trim.number表单修饰符.stop.prevent.selt.once.capture.passive.native鼠标修饰符键值修饰符.keyCodev-bind 前言 测试:没有空格校验? 在实际工作中,有一些问题需要注意的问题,比如...
  • 事件修饰符native

    2020-09-25 11:26:27
    事件修饰符native 应用场景: 给按钮设置点击事件: <button @click="logout()">退出</button> <--! 事件操作成功 /--> ​ @click是vue事件绑定操作,具体是给普通的html标签使用的。 给...
  • Vue .native修饰符 .native - 监听组件根元素的原生事件。 即直接写到组件标签里 例如: 这样才能触发click事件 父子组件挂载顺序 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 ...
  • vm.$listener 包含了父组件中(除了 .native 修饰器以外的)事件监听器。 可以在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。 然后我们可以在子组件的this.$listeners可以...
  • 这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧。 .native修饰符 官方对.native修饰符的解释为:  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。...
  • vue中的.native修饰符

    2021-03-05 14:42:02
    )上绑定事件,直接使用 @click=’‘function’ 是不生效的,我们可以添加.native修饰符 @click.native=’‘function’’. native是什么? .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件...
  • vue修饰符

    2019-10-05 15:59:46
    Vue提供了很多修饰符来方便开发者使用,这里主要补充一个修饰符的大纲用作笔记。 目录 v-on修饰符 事件修饰符 .stop .prevent .capture .self .once .passive .native 按键修饰符 .enter|.tab...
  • 本博客编辑总监博主:博客链接 编辑人本博主:博客链接 v-on事件 ...v-on事件修饰符 prevent <!-- 阻止跳转行为 --> <div id="box"> <div @click="alert1()"> <a href="/
  • 在父组件中,如果想为子组件绑定一个点击事件,有可能这么写: <!... <... <head>...meta charset="UTF-8">...script src="vue.js"></script> </head> <body> <div id="app">
  • Vue.js中.native修饰符

    2018-04-24 13:45:00
    .native修饰符 官方对.native修饰符的解释为:  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用v-on的修饰符 .native。例如: <my-component v-on:click.native="doTheThing"></my...
  • vue中'. native'修饰符的使用

    万次阅读 多人点赞 2018-06-22 11:47:27
    可以使用 v-on 的修饰符 .native 。 通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。 此时点击页面中的按钮无任何反应。 ...
  • vue modifier 修饰符

    2019-08-30 14:38:01
    vue modifier 修饰符.native 将原生事件绑定在组件上用.native <base-input @:focus.native="onFocus"></base-input> .sync 真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件 和 .sync...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 279
精华内容 111
关键字:

vue修饰符native

vue 订阅