vue各种事件监听实例(小结)

2024-10-02 21:27:16

计算属性的Get方法和Set方法

看代码说话:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小练习</title>
</head>
<body>
  <div id="calc">
    <a v-cloak="">{{name}}</a>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      counter:0
    }
    ,methods:{
    }
    ,computed: {
      name: {
        get: function(){
          console.log("得值");
          return 'AAAa';
        },
        set: function(){
          console.log("设值");

        }
      }
    }

  })

</script>

运行后如下:

可以知道，在计算属性对象中，里面定义一个name，通过定义name的set和get方法来对其值进行设置和获取，name获得get函数return的值，name通过set函数进行设置其值，或者说改变他的值。从运行图可以看到，当页面加载的时候，当我用到name的变量的时候，他会默认执行get方法，当我在控制台中改变其值，他会默认执行set方法。

methods中函数执行和computer计算的对比

这两个方式都可以对值进行拼接或者进行复杂操作。那么哪个方法性能比较好呢？答案是computed,原因在于computed内部有缓存。看代码如下来计算分别调用了函数多少次:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小练习</title>
</head>
<body>
  <div id="calc">
    <a v-cloak="">{{name}}</a>
    <a v-cloak="">{{name}}</a>
    <a v-cloak="">{{name}}</a>
    <a v-cloak="">{{name}}</a>
    <hr>
    <a v-cloak="">{{a()}}</a>
    <a v-cloak="">{{a()}}</a>
    <a v-cloak="">{{a()}}</a>
    <a v-cloak="">{{a()}}</a>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      counter:0
    }
    ,methods:{
      a :function(){
        console.log("执行了一次函数");
        return 'AAAa';
      }
    }
    ,computed: {
      name: {
        get: function(){
          console.log("得值");
          console.log("执行了一次 计算属性的get方法");
          return 'AAAa';
        },
        set: function(){
          console.log("设值");

        }
      }
    }

  })

</script>

块级作用域

那什么时候改用let，什么时候用const呢。是变量则用let，静态常量则是const。

事件监听

上面已经数说了，标签点击事件，下面我们来说一下，v-on的语法糖，也就是类似v-bind的语法糖为:,, v-on的语法糖为@。代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
  <div id="calc">
    <a id="num">{{num}}</a>
    <button @click="add">+1</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 0
    }
    ,methods:{
      add: function(){
        this.num ++;
      }
    }
    ,computed: {
    }
  })

</script>

运行效果如下:

**传参情况，**代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
  <div id="calc">
    <a id="num">{{num}}</a>
    <button @click="add(num,$event)">*2</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(param,event){
        console.log(param);
        console.log(event);
        this.num = param * 2;
      }
    }
    ,computed: {
    }
  })

</script>

运行如下：

监听获得event对象，里面可以有点击事件详情，代码如下:

说明：

在上面的代码中，

<button @click="add(num,$event)">*2</button>

num则被vue解释成变量，$event带有美元符号的修饰的变量，则被视为是事件。就是说，当你在网页上对键盘或者鼠标有动作的时候，他会生成事件，这个事件可以被检测到，可以进行传递。

修饰符阻止冒泡

在vue中，我们如果没有组织冒泡，那么请看是下面这样:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
  <div id="calc" @click="adda">
    <button @click="add">点我</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(){
        console.log("点击了按钮")
      }
      ,adda: function(){
        console.log("点击了div")
      }
    }
    ,computed: {
    }
  })

</script>

运行结果如下:

那么vue的阻止事件冒泡方法很简答，代码修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
  <div id="calc" @click="adda">
    <a >我不是按钮</a>
    <button @click.stop="add" >点我</button>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(){
        console.log("点击了按钮")
      }
      ,adda: function(){
        console.log("点击了div")
      }
    }
    ,computed: {
    }
  })

</script>

运行如下:

vue回车事件获取输入框的值

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
  <div id="calc" @click="adda">
    <a >我不是按钮</a>
    <button @click.stop="add" >点我</button>
    <input type="text" @keyup.enter="console">
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      add: function(){
        console.log("点击了按钮")
      }
      ,adda: function(){
        console.log("点击了div")
      }
      ,console: function(event){
        console.log(event.target.value);
      }
    }
    ,computed: {
    }
  })

</script>

运行效果如下:

通过使用@Keyup.enter事件来进行对输入框input的事件监听。

Vue的阻止表单提交的监听

通常情况下，默认form的submit一点击提交，就立即跳转，情况如下:

我们有时候希望点击提交submit类型的input按钮的时候，不要立即跳转到action页面，那么我们可以通过如下代码来实现:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件监听练习</title>
</head>
<body>
  <div id="calc">
    <form action="www.erremall.top" @click.prevent="judge" >
      <input type="submit">
    </form>
  </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#calc'
    ,data: {
      num: 1
    }
    ,methods:{
      judge: function(){
        //在这里，对数据进行校验。不先提交
        console.log("来了这里，没有立即跳转");
      }
    }
    ,computed: {
    }
  })

</script>

运行效果如下:

到此这篇关于vue各种事件监听实例(小结)的文章就介绍到这了,更多相关vue 事件监听内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue程序化的事件监听器(实例方案详解)

某些第三方插件必须在当前组件卸载后清除该实例(比如说百度的富文本框UEditor 如果不清除再次在下个组件使用时会有bug, 类似于小程序的语音实例,必须离开页面的时候销毁当前语音实例,不然语音会一直播放) 方案1: data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器: this.timer = setIterval (() => { // 某些操作 }, 1000 最后在beforeDestroy()生命周期内清除定时器: beforeD
vue 实现移动端键盘搜索事件监听

1.首先注意,input的type="serch" <input @keypress="searchGoods" type="serch" placeholder="搜索商品"> 2.监听keypress事件 (1)KeyDown.KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的.(要解释 ANSI 字符,应使用 KeyPress 事件.) (
vue.js过滤器+ajax实现事件监听及后台php数据交互实例

本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v
vue.js绑定事件监听器示例【基于v-on事件绑定】

本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi
Vue.JS入门教程之事件监听

你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on
vue各种事件监听实例(小结)

计算属性的Get方法和Set方法看代码说话: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue小练习</title> </head> <body> <div id="calc"> <a v-cloak="">{{name}}</a> &l
JAVA用户自定义事件监听实例代码

JAVA用户自定义事件监听实例代码很多介绍用户自定义事件都没有例子,或是例子不全,下面写了一个完整的例子,并写入了注释以便参考,完整的实例源代码如下: package demo; import Java.util.EventObject; /** * Title: 事件处理类,继承了事件基类 * Description: * Copyright: Copyright (c) 2005 * Company: cuijiang * @author not attributable * @versi
ListView-添加item的事件监听实例

1. 点击事件(OnItemClickListener) onItemClick(AdapterView<?> parent, View view, int position, long id) parent:官方解释为:The AdapterView where the click happened,也就是用户所点击的AdapterView,这个参数一般不用. view:当前点击的列表项所对应的布局View对象,可通过这个参数获得相应的列表项内部的组件,进而对其进行操作.举个例子,假设有一个
JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

JavaScript事件监听完整实例(含注释) var oEventUtil = new Object(); oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler) { //IE和FF的兼容性处理 //如果是FF if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } //如果是IE else if(o
微信小程序实现拖拽事件监听实例详解

微信小程序拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="
Spring事件监听机制观察者模式详解

目录前言观察者模式观察者的角色定义 Java中的事件机制 Spring中的事件机制 Spring事件监听案例小结前言 Spring中提供了一套默认的事件监听机制,在容器初始化时便使用了这套机制.同时,Spring也提供了事件监听机制的接口扩展能力,开发者基于此可快速实现自定义的事件监听功能. Spring的事件监听机制是在JDK事件监听的基础上进行的扩展,也是在典型观察者模式上的进一步抽象和改进.所以,结合Spring的事件监听机制与观察者模式来学习,可以达到理论与实践的完美融合. 本
分享jQuery3种常见事件监听方式

目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>
分享jQuery的3种常见事件监听方式

目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

vue各种事件监听实例(小结)

相关推荐

随机推荐