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 相关文章推荐
网上抓的一个特效
May 11 Javascript
Javascript !!的作用
Dec 04 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
react-router中的属性详解
2017/06/01 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
开始着手第一个Django项目
2015/07/15 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
pytorch构建多模型实例
2020/01/15 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
Python LMDB库的使用示例
2021/02/14 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
标准自荐信范文
2014/01/29 职场文书
安全生产月演讲稿
2014/05/09 职场文书
物业消防安全责任书
2014/07/23 职场文书
岗位说明书标准范本
2014/07/30 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书