精华内容
下载资源
问答
  • 2021-08-02 12:54:41
    1: 常见事件修饰符:
       1.1: .stop 等同于javaScript 中的event.stopPropagation();  防止事件冒泡;
       1.2: .prevent: 等同于javaScript 中event.preventDefault();  防止执行预设的行为。
    
       1.3: .capture: 与事件冒泡方向相反, 事件捕获由外到内。
       1.4: .self: 只会触发自己范围内的事件, 不包含子元素。
       1.5: .once() 事件 只会触发一次。
    ---------------------------------------------------------------------------
    v-if / v-show / v-html 的原理:
    v-if:会调用addifCondition方法, 生成vnode 的时候忽略对应的节点操作, render 的时候就不会渲染。
    v-show: 会生成vnode, render 的时候也会渲染真是的节点操作,  只是在 render的过程中会在节点的属性中修改成 show 属性值, 也就是常说的display 属性。
    
    v-html: 回先移除节点下的所有的节点, 调用html 方法,通过addProp 添加innnerHTML 属性, 归根结底还是设置了 innnerHTML 为 v-html 的值。
    
    
    v-if 和 v-show 的区别:
     1: 手段: v-if 是动态的向DOM树内添加或者删除DOM 元素; v-show: 是通过设置DOM 元素的display 样式属性控制显示与隐藏。
    
     2: 编译过程: v-if 切换一个局部编译/ 卸载的过程,  切换过程中合适的销毁和重建内部的事件监听和子组件, v-show: 只是简单的基于css 切换。
    
     3: 编译条件: v-if 是惰性的,  如果初始条件为假, 则什么也不做; 现在只有一次条件变为真时, 才会局部编译。 v-show: 是在任何条件下, 无论首次是否为真, 都会被编译, 然后被缓存。 而且DOM 元素会被保留。
    
    4: 性能消耗: v-if 有更高的切换消耗。 v-show: 有更高的初始渲染消耗。
    5: 使用场景:  v-if 适合条件不大可能改变;  v-show: 适合频繁切换。

    更多相关内容
  • 不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。 仓储地址: ...
  • 之前关于vue事件修饰符和按键修饰符的一点...为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once <div @click='doThis' style="widt
  • vue 阻止事件冒泡 默认行为

    vue事件对象

    <button @click="getEventDom(e);">getEventDom</button>  
    <script>  
        var vue = new Vue({  
            el: "#app",  
            methods: {  
                getEventDom: function(e) {  
                    event.preventDefault();  
                    console.log(e);  
                }  
            }  
        });  
    </script> 
    

    事件修饰符

    .stop
    .prevent
    .capture
    .self
    .once
    .passive
    

    1、事件冒泡(事件不会向上传递) 按上例中原生事件对象,要组织冒泡事件需要用到.preventDefault(),然而使用事件修饰符,仅需@click.stop即可。

    <div @click="say">
    parent
    <div @click.stop="say">child</div>//阻止冒泡
    </div>
    

    2、阻止默认事件(不触发默认事件)

    <a href="http://www.baidu.com" @click.prevent="say">百度</a>//阻止默认行为
    

    3、指定元素触发(不包括子元素)

    <a @click.stop.self.prevent="say" href="http://www.baidu.com" style="border: 10px s
    olid red">
      <span>2</span>
      <span>1</span>
    </a>
    

    4、事件捕获方式(父->子)

    <div @click='say'>parent
    <div @click='say1'>
        child
    </div>
    </div>
    

    5、绑定事件一次(触发后移除事件)

    <div @click.once='say'>say</div>
    

    6、.capture事件默认是双向的,先捕获,在冒泡

    (二).注意:

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

    (三).vue2.3 新增

    Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。

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

    注意:

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

    原文链接:https://blog.csdn.net/gao_xu_520/article/details/80363260

    展开全文
  • .native事件修饰符

    2022-03-10 09:19:23
    事件修饰符使用层次升级,写的高大上就显得更牛皮一些

    使用情况


    【注意】 普通组件绑定事件不能添加.native, 添加后事件失效

    当父组件调用自定义组件时,直接在自定义组件中使用原生事件,原生事件后就需要加上.native。
    还有一个方法,就是自定义组件$emit一个事件给父组件

    <div id="app">
        <child @click.native="handleClick"></child>
    </div>
    
    
    // 子组件
     Vue.component('child',{
               template: '<button><div>miya</div></button>', 
           })
    
    const app = new Vue({
        el: '#app',
    	methods: {
            handleClick: function() {
                alert("click")
            }
        }
    })
    

    当使用库组件中的form,提交submit也需要加.native

    组件
    <div>
    	<lost name="body"></slot>
    	<input type="submit" @click="handleOk"></input>
    </div>
    <--! .prevent 阻止默认提交事件 --->
    
    调用组件
    <my-model>
    	<Form slot="body" v-model="formDate" @submit.native.prevent>
    		<FormItem>...</FormItem>
    	</Form>
    </my-model>
    
    

    比如element,这个时候使用按键修饰符需要加上.native, 不然无效

    <el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search">
    </el-input>
    
    // 使用原生事件名只有加上.native才会其效果, 比如 mousedown, mouseenter, mouseleave等
    // 常用键盘事件名
    .enter
    .tab
    .delete (捕获 “删除” 和 “退格” 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    
    展开全文
  • vue事件修饰符

    2022-02-15 21:33:38
    事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件 prevent 阻止默认事件 <!-- 阻止默认事件 --> <a href=...
    • stop
      阻止事件冒泡
      给事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件
      在这里插入图片描述
    • prevent
      阻止默认事件
    <!-- 阻止默认事件 -->
    <a href="https://www.baidu.com" @click.prevent="aClick()">跳转到百度</a>
    
    • capture
      添加事件时使用捕获模式,即由外到内进行事件触发
      应用场景较少
    • self
      当事件在该元素本身触发使才触发回掉
    • once
      只触发一次回调
    展开全文
  • 事件修饰符native

    2020-09-25 11:26:27
    事件修饰符native 应用场景: 给按钮设置点击事件: <button @click="logout()">退出</button> <--! 事件操作成功 /--> ​ @click是vue事件绑定操作,具体是给普通的html标签使用的。 给...
  • 事件修饰符事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。 .stop 阻止单击事件传播 即阻止了事件冒泡,相当于调用了event.stopPropagation方法(通俗讲就是阻止事件...
  • vue 事件修饰符

    2022-03-21 13:46:34
    在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种: 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v...
  • 修饰符是由点开头的指令后缀来表示的。 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 ...
  • 在前端开发Vue.js中,关于事件和按键的使用也是比较常见的操作之一,那么与它们相关的事件修饰符和按键修饰符也是延伸的比较常用的操作。那么本篇博文就来分享一下关于Vue.js事件修饰符和按键修饰符的使用。 一...
  • Vue.js事件修饰符解释

    2018-03-20 18:38:02
    Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。·.stop.prevent.capture.self&lt;div id="app2"&gt; &lt;!-- 阻止单击事件冒泡 --&gt; &lt;a v-on:...
  • 事件修饰符2.按键修饰符 修饰符 1.事件修饰符 vue中提供的事件修饰符一共有4种 .stop:用来阻止事件冒泡(防止事件向父标签传递) .prevent:用来阻止标签的默认行为 .self:只监听自身标签触发的事件 .once:该...
  • Vue.js事件修饰符

    2019-12-08 15:28:43
    事件修饰符 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当时间在该元素本身(比如不是子元素)触发时触发回调 .once 事件只触发一次 代码案例 <!DOCTYPE html>...
  • [基础]Vue绑定事件详讲-事件修饰符通过修饰符解决冒泡事件stop修饰符self修饰符其它常用修饰符初始页面 绑定事件中的修饰符有很多种,这些修饰符各有各的用处。 本节课将讲解6种Vue中的事件修饰符,分别是; stop、...
  • 事件修饰符

    2021-04-15 20:34:07
    Vue.js为v-on提供了事件修饰符修饰符是由点开头的指令后缀来表示的。 事件修饰符有: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身...
  • 14.Vue的事件修饰符

    2022-03-30 13:48:14
    今天这一节,我们来讲讲Vue中的事件修饰符。下面我们用一个小例子来引入它。 1.Vue事件修饰符小例子 我们都知道一个a标签既有跳转链接,又有点击事件的时候,它会先执行点击事件,然后再跳转链接。就像下面这样 ...
  • 6种事件修饰符 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit....
  • Vue中的事件修饰符

    2022-02-02 12:19:40
    lazy修饰符作用是,改变输入框的值时value不会改变,当光标离开输入框时,v-model绑定的值value才会改变 <input type="text" v-model.lazy="value"> <div>{{value}}</div> data() { return { ...
  • 为了解决这个问题,Vue.js 为 v-on 提供了 事件修饰符修饰符是由 点开头的指令后缀来 表示的。  .stop :阻止事件冒泡到父元素  .prevent:阻止默认事件发生  .capture:使用事件捕获模式  .self:只有...
  • Vue事件修饰符

    2022-01-02 22:49:07
    在vue中为我们提供了六种修饰符,分别是: prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:只有event.target是当前操作的元素时才触发事件 ...
  • 获取事件对象 $event 有几点我们我们需要注意下 ...vue事件修饰符 .stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡; .prevent :等同于 JavaScript 中的 event.preventDefault()
  • vue事件绑定中的事件修饰符

    千次阅读 2022-03-20 20:48:51
    vue.js事件修饰符
  • .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行。 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,034
精华内容 24,813
关键字:

js事件修饰符