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


Posted in Javascript onJune 24, 2020

计算属性的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>

运行后如下:

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

可以知道,在计算属性对象中,里面定义一个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>

块级作用域

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

那什么时候改用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>

运行效果如下:

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

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

<!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>

运行如下:

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

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

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

说明:

在上面的代码中,

<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各种事件监听实例(小结)

那么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各种事件监听实例(小结)

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>

运行效果如下:

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

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

Vue的阻止表单提交的监听

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

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

我们有时候希望点击提交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 事件监听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 #Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
javascript实现评分功能
Jun 24 #Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
You might like
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
php简单中奖算法(实例)
2017/08/15 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python列表与元组详解实例
2013/11/01 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python实现分段线性插值
2018/12/17 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
文员个人求职自荐信
2013/09/21 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
研讨会通知
2015/04/27 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
周一给客户的问候语
2015/11/10 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python