首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

理想的亡命之徒

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 基础篇之运算符、语句（二）
Apr 07 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
JS实现横向轮播图（中级版）
Jan 18 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
win7(2) 鸿蒙(2) Sunmao(1) 滚动条(1) 声卡驱动(1) 输入法(2) 蓝屏(1) 鸿蒙3.0(1) svg(1) Sentry(1)
You might like
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
js中this的用法实例分析
2015/01/10 Javascript
基于JavaScript实现快速转换文本语言（繁体中文和简体中文）
2016/03/07 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
详解Django框架中的视图级缓存
2015/07/23 Python
浅析Python函数式编程
2018/10/06 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
基于python实现高速视频传输程序
2019/05/05 Python
python对csv文件追加写入列的方法
2019/08/01 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
文明家庭先进事迹材
2014/01/27 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
党员三严三实心得体会
2014/10/13 职场文书
财务整改报告范文
2014/11/05 职场文书