Vue学习笔记（二）

最新推荐文章于 2023-07-18 18:38:45 发布

langxiong_1009

最新推荐文章于 2023-07-18 18:38:45 发布

阅读量151

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_45899210/article/details/119334452

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、事件监听

1.1 v-on的使用

当我们需要监听用户操作时，如点击、拖拽、键盘事件等等，就需要使用到事件监听。

v-on的介绍：

作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event

1.2 v-on基础操作

计数器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>当前计数为： {{counter}}</h2>
    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter--;">-</button>-->
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <!--下面是语法糖写法-->
    <!--<button @click="increment">+</button>-->
    <!--<button @click="decrement">-</button>-->
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0,
        },
        methods: {
            increment: function () {
                this.counter++
            },
            decrement: function () {
                this.counter--
            }
        }
    })
</script>
</body>
</html>

1.3 v-on参数

情况一：一般来说，如果当调用方法时，不需要传入额外的参数，可以省略方法后的()，如<button @click="increment">+</button>

如果需要传递参数，但是实际上没有传参时，形参就会使用默认的undefined，如下：
在这里插入图片描述

如果传递了参数的话，如下：

在这里插入图片描述

但是如果既没有传递参数，甚至连()都不加上的话，点击按钮后传递的就是event事件对象。

虽然不传递参数时可以省略括号，但是方法本身是需要一个参数的，在这个时候，Vue会默认将浏览器生成的event对象作为参数传入方法中。

在这里插入图片描述

在方法定义时，我们既需要event对象，同时又需要其他参数时，如下：
在这里插入图片描述

在上图中，分别尝试了五种传参方式，由浏览器的控制台可以知道：

不加()仍然会默认输出event对象；

加了()而不传递参数时，默认均为undefined；

而按钮3中形参event报错，因为Vue默认去app对象中找event却没有找到，而不是当成浏览器的event事件来传递；

如果不穿第二个参数也是默认的undefined；

最后成功的情况是，如果需要在传递其他参数的同时传递event对象的话，需要通过$event来获取事件。

1.4 v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 阻止事件冒泡；

在这里插入图片描述

此时就产生了事件冒泡，也就是我点击了button按钮会同时打印div和button两个@click的监听，为了阻止这种情况，通常会使用.stop，如：

在这里插入图片描述

.prevent - 阻止对元素自身的点击；

在这里插入图片描述

在点击提交按钮之后立即就跳转了，没有任何方法中的内容产生，这时就需要阻止元素对自生的操作，如下：

在这里插入图片描述

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调；

在这里插入图片描述

当我键盘按下弹起时，事件监听就成功一次，但是如果我只是需要监听回车键，就只需要加一个.enter即可，如：

在这里插入图片描述

.native - 监听组件根元素的原生事件；

.once - 只触发一次回调。

1.5 v-if、v-else小案例

需要实现点击右侧按钮提示用户账号或邮箱两种情况的输入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="isUser">
    用户账号
    <label for="username"></label>
    <!--key的使用是为了防止Vue自动的复用情况，如果不加key，则是共用的虚拟DOM里面渲染好的内容，就可能会出现复用情况造成小问题-->
    <input type="text" id="username" key="username" placeholder="用户账号">
  </span>
  <span v-else>
    用户邮箱
    <label for="email"></label>
    <input type="text" id="email" key="email" placeholder="用户邮箱">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    }
  })
</script>
</body>
</html>

1.6 v-if和v-show的区别

在这里插入图片描述

v-if：当条件为false时，压根不会有对应的元素在DOM中。

v-show：当条件为false时，仅仅是将元素的display属性设置为none而已。

1.6.1 总结

当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

二、v-for与v-on共同使用小案例

需要实现点击数组所展示出来的某一条内容，内容就变成红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(item, index) in songs"
        :class="{active: currentIndex === index}"
        @click="liClick(index)">
      {{index+1}}.{{item}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      songs: ['小酒窝', '背对背拥抱', 'rap god', '你就不要想起我', '枫', '稻香'],
      currentIndex: -1
    },
    methods: {
      liClick(index) {
        console.log("第" + (index+1) + "首歌变成了红色")
        this.currentIndex = index;
      }
    }
  })
</script>
</body>
</html>

langxiong_1009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（二）

一、事件监听1.1 v-on的使用当我们需要监听用户操作时，如点击、拖拽、键盘事件等等，就需要使用到事件监听。v-on的介绍：作用：绑定事件监听器缩写：@预期：Function | Inline Statement | Object参数：event1.2 v-on基础操作计数器案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit
复制链接

扫一扫