首页
所有分类
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 TO HTML 转换
Jun 26 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
Javascript的闭包
Dec 31 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
JavaScript Canvas实现验证码
Aug 02 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
泰国购物网站(30) 土耳其购物网站(10) 哥伦比亚购物网站(5) 斯洛伐克购物网站(7) 波兰购物网站(52) 新西兰购物网站(42) 智利购物网站(5) 阿联酋购物网站(26) 沙特阿拉伯购物网站(9) 奥地利购物网站(28)
You might like
PHP 手机归属地查询 api
2010/02/08 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python爬虫 requests-html的使用
2020/11/30 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
JINS眼镜官方网站：日本最大的眼镜邮购
2016/10/14 全球购物
Lee牛仔裤澳大利亚官网：美国著名牛仔裤品牌
2017/09/02 全球购物
美国汽车零部件和配件网站：CarParts
2019/03/13 全球购物
YSL圣罗兰美妆俄罗斯官网：Yves Saint Lauret RU
2020/09/23 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
大学生个人求职信范文
2013/09/21 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
毕业生自荐书模版
2014/01/04 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
四风问题查摆材料
2014/08/25 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年保管员工作总结
2015/04/30 职场文书
2016寒假假期总结
2015/10/10 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
OpenCV实现常见的四种图像几何变换
2022/04/01 Python