Vue基础

最新推荐文章于 2024-07-23 11:18:48 发布

王赤脚

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量765

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45992725/article/details/135922703

版权

本文介绍了Vue中的指令修饰符（如@keyup.enter用于键盘事件处理），展示了按键修饰符与不使用修饰符的区别，以及事件修饰符如.prevent和.stop的作用。同时讲解了v-model修饰符（trim和number）和v-bind用于样式控制。最后，通过对比computed和methods，强调了计算属性的缓存性能优势。

摘要由CSDN通过智能技术生成

Vue基础

指令修饰符

所谓指令修饰符就是通过 . 指明一些指令后缀不同的后缀封装了不同的处理操作，目的就是为了简化代码

按键修饰符

@keyup.enter：他的意思就是当按下enter键的时候触发

代码演示：

 <div id="app">
    <h3>@keyup.enter → 监听键盘回车事件</h3>
    <h4>它的作用就是封装一个判断，只有按下回车才会触发</h4>
    <input @keyup.enter="fn" v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        fn() {
          console.log(this.username)
        }
      }
    })
  </script>

不用按键修饰符的写法

  <div id="app">
    <h3>@keyup.enter → 监听键盘回车事件</h3>
    <h4>它的作用就是封装一个判断，只有按下回车才会触发</h4>
    <input @keyup="fn" v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        fn(e) {
           if (e.key === 'Enter') {
             console.log(this.username)
           }
        }
      }
    })
  </script>

可以看出，二者的差距其实就是，按键修饰符帮助我们进行了判断，也就是分装好了一个判断方法，帮助我们简化代码。

事件修饰符和v-model修饰符

事件修饰符

@click.stop：阻止冒泡

@click.prevent：阻止默认行为

v-model修饰符

v-model.trim：去除字符串首尾空格

v-model.number：字符串转数字

v-bind样式控制

v-bind就是属性绑定指令，动态的绑定一些标签的属性，像src，url之类的，为了方便开发人员进行样式控制，就拓展了一下v-bind的使用，可以针对class类名和style行内样式进行控制。

语法：

对象语法

<div class="box" :class="{ pink:true, big:false }">黑马程序员</div>

对象中的键就是css中写的样式类名，值就是布尔值，true就是有这个类，false就是没有这个类，主要用于，一个类名来回切换

数组语法

<div class="box" :class="[ 'pink', 'big']">黑马程序员</div>

只要是数组里面有的类名，都会被添加上，主要用于：批量添加或者删除类

实战案例-Tap栏切换

思路：创建一个active类，设置背景颜色和字体颜色，当我们点击的时候，就给点击的那个地方加上这个类。

这个就是单个类名来回切换，所以可以使用对象语法来实现

具体代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }

    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }

    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }

    li a.active {
      background-color: #e01222;
      color: #fff;
    }
  </style>
</head>

<body>

  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
        <a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]

      }
    })
  </script>
</body>

</html>

利用v-for循环渲染咱们提供的list数组中的三个对象，这样就可以得到三个li标签，添加一个点击事件，点了就把当前的下标赋值，再通过这个:class="{ active: index === activeIndex }进行类名的控制。

computed计算属性

1.概念

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

2.语法

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

4.案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }

    th,
    td {
      border: 1px solid #000;
    }

    h3 {
      position: relative;
    }
  </style>
</head>

<body>

  <div id="app">
    <h3>礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }}个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 2 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount() {
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>
</body>

</html>