Vue事件处理原理及过程详解

2024-10-20 11:06:15

Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难，使用v-on有以下好处：

1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法。

2、无须在JS里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。

3、当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，无须担心自己如何清理它们。

事件处理步骤

1. 绑定监视

2. 事件修饰符

3. 按键修饰符

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
<!--列表过滤与排序-->
<div id="demo">
  <h2>绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2(123)">test2</button>
  <button @click="test3">test3</button> <!-- 无参函数，实际上是传了$event对象-->
  <button @click="test4(1234,$event)">test4</button>

  <h2>事件修饰符</h2>
  <!--存在事件冒泡的情况-->
  <h3>阻止事件冒泡</h3>
  <div style="width: 200px; height: 200px; background: red" @click="test5">
    <!--@click.stop 停止事件冒泡 -->
    <div style="width: 100px; height: 100px; background: blue" @click.stop="test6"></div>
  </div>

  <br>
  <h3>阻止事件的默认行为</h3>
  <a href="http://www.baidu.com" rel="external nofollow" @click.prevent="test7">去百度</a>

  <br>
  <h2>按键修饰符</h2>
  <!-- <input type="text" @keyup="test8">--> <!--原始写法-->
  <!--<input type="text" @keyup.13="test8">--> <!--13就是enter键的keyCode码-->
  <input type="text" @keyup.enter="test8"/>  <!--直接写名字-->

</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script>
  new Vue({
    el: "#demo",
    methods: {
      test1(){
        alert('test1');
      },
      test2(number){
        alert(number);
      },
      test3(event){
        alert(event.target.innerHTML);
      },
      test4(number, event){
        alert(number + '----' + event.target.innerHTML);
      },
      test5(){
        alert('out')
      },
      test6(){
        alert('inner')
      },
      test7(){
//        event.preventDefault()  //原生的方式阻止事件的默认行为
        alert('点击，但是通过@click.prevent阻止事件的默认行为，不会跳转到百度去了')
      },
      test8(event){
//        原始写法;
//        if (event.keyCode === 13){ // Enter键
//          alert(event.target.value)
//        }
        alert(event.target.value)

      }

    }
  });
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue 按键修饰符处理事件的方法

按键修饰符在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修饰符时, 我们可能会去监听键盘事件, 根据 keyCode 的值加以判断 Vue 新增按键修饰符和系统修饰符来处理类似事件 /** 提交表单 */ <template> <div class="demo"> 电话号码: <input type="text" placeholder="请输入电话号码" v
浅谈Vue.js中的v-on(事件处理)

Vue.js的事件处理监听事件我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div class="box"> {{msg}} <input type="button" value="按钮" v-on:click="msg+=1"/> </div> var vm = new Vue({ el:".box", data:{ msg
Vue的click事件防抖和节流处理详解

函数防抖定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event === 'click') { newFunc = function () { clearTimeout(timer) timer = s
基于vue中对鼠标划过事件的处理方式详解

鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&
详解vue.js的事件处理器v-on:click

用 v-on 指令监听 DOM 事件注意:HTML5中不能使用v-on,换为@ (1)html代码: <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> (2)js代码: var vm = new Vue
VueJS事件处理器v-on的使用方法

本文介绍了VueJS事件处理器v-on的使用方法,分享给大家,具体如下: 事件监听可以使用 v-on 指令. v-on:click表达式 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootc
Vue 事件处理操作实例详解

本文实例讲述了Vue 事件处理操作.分享给大家供大家参考,具体如下: 1 监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. html: <div id="app1"> <button v-on:click="counter +=1">递增</button> <p>按钮已被点击 {{ counter }} 次.</p> </div> js: va
Vue事件处理原理及过程详解

Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难,使用v-on有以下好处: 1.扫一眼HTML模板便能轻松定位在JS代码里对应的方法. 2.无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试. 3.当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,无须担心自己如何清理它们.
Vue插槽原理与用法详解

本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 它允许你像这样合成组件: <div id="app1"> <navigation-link url="/profile"> Your Profile </navigation-link>
java虚拟机原理:类加载过程详解

目录一.Java 类加载过程 1.字节码编译 2.加载 3.连接 4.初始化总结一.Java 类加载过程 1.字节码编译编写好 Java 源码 Student.java , 使用 javac 将上述 Java 源码编译成 Class 字节码文件 Student.class , 2.加载加载 : 通过 " 类加载子系统 " 将该字节码文件 , 加载到 Java 虚拟机内存中的方法区 , 然后开始执行 " 连接 " 操作 , 类加载时机 : Java 程序
Vue分页组件实现过程详解

目录组件的一些规定和条件创建分页数组切换页码 CSS HTML代码 <template> <div class="paging" v-if="count"> <ul> <li class="pre" v-show="page > 1" @click="jian()"> <span>上一页</span> </li>
Java操作Zookeeper原理及过程详解

ZooKeeper 是一个典型的分布式数据一致性解决方案,分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知.集群管理.Master 选举.分布式锁和分布式队列等功能. Zookeeper 一个最常用的使用场景就是用于担任服务生产者和服务消费者的注册中心. 服务生产者将自己提供的服务注册到Zookeeper中心,服务的消费者在进行服务调用的时候先到Zookeeper中查找服务,获取到服务生产者的详细信息之后,再去调用服务生产者的内容与数据.如
Jenkin邮件收发实现原理及过程详解

一.配置 Jenkins 邮箱的全局配置检查是否已安装插件Email Extension Plugin 获取 qq 邮箱授权码进入 qq 邮箱 ---> 设置 ---> 账户配置 jenkins 邮箱的全局配置:系统管理 - 系统设置 - 完成邮箱配置 - 测试是否配置正确 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>${ENV,
Vue响应式原理的示例详解

Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v
基于vue cli重构多页面脚手架过程详解

官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程步骤一改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.
vue+element树组件实现树懒加载的过程详解

一.页面样式二.数据库三.前端页面代码 <template> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree> </template> <script> export default { data () { return { props: { label: 'name', children: 'zones',
使用vue cli4.x搭建vue项目的过程详解

cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

Vue事件处理原理及过程详解

相关推荐

随机推荐