Vue基础（三）-阿里云开发者社区

3.6.3 事件修饰符

在事件处理函数中调用preventDefault()或 stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：

事件修饰符	说明
.prevent	阻止默认行为（例如:阻止a连接的跳转、阻止表单的提交等)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在event.target是当前元素自身时触发事件处理函数

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 阻止默认的跳转行为 -->
        <a href="https://www.baidu.com/?tn=44004473_27_oem_dg" @click.prevent="add">baidu</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                add(e) {
                }
            }
        })
    </script>
</body>
</html>

点击超链接不会跳转

3.6.4 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

<!-- 只有在按的键为enter时候调用submit方法 -->
<input @keyup.enter="submit">
<!-- 只有在按的键为esc时候调用clear方法 -->
<input @keyup.esc="clear">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.esc="clear">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                clear( e ) {
                    e.target.value = ''
                }
            }
        })
    </script>
</body>
</html>

按下esc键

3.7 双向绑定指令

vue提供了 v-model双向绑定指令 ，用来辅助开发者在 不操作DOM 的前提下，快速 获取表单数 据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 文本框的输入会实时更新到data中的username -->
        <input type="text" v-model="username">
        <!-- vue会把data中的username的数据实时绑定到标签中 -->
        <p>姓名：{{ username }}</p>
        <hr>
        <!-- 属性绑定，不能将文本框的输入实时更新到username中 -->
        <!-- 单向绑定 -->
        <!-- 只能vue实时把数据更新到标签中 -->
        <input type="text" :value="username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: ''
            }
        })
    </script>
</body>
</html>

输入123

注意：

v-model指令只能配合表单元素一起使用。

3.7.1 v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	`<input v-model.number="age" />`
.trim	自动过滤用户输入的首尾空白字符	`<input v-model.trim="msg" />`
.lazy	在“change”时而非“input”时更新	`<input v-model.lazy="msg" />`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      姓名：<input type="text" v-model.trim="username" />
      <hr />
      年龄：<input type="text" v-model.number="age" />
      <hr />
      地址：<input type="text" v-model.lazy="address" />
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // 姓名
          username: 'zs',
          // 年龄
          age: 1,
          // 地址
          address: '北京市',
        },
      })
    </script>
  </body>
</html>

3.8 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-if

v-show

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="flag = !flag">Toggle Flag</button>
      <p v-if="flag">请求成功 --- 被 v-if 控制</p>
      <p v-show="flag">请求成功 --- 被 v-show 控制</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // flag 用来控制元素的显示与隐藏
          // 值为 true 时显示元素
          // 值为 false 时隐藏元素
          flag: false,
        },
      })
    </script>
  </body>
</html>

初始值为false，不显示

点击按钮改变后为true

3.8.1

v-if 和 v-show 的区别

实现原理不同：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

性能消耗不同：

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

3.8.2 v-else v-else-if

v-if 可以单独使用，或配合 v-else 指令一起使用。

v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p v-if="num > 0.5">随机数 ＞ 0.5</p>
      <p v-else>随机数 ≤ 0.5</p>
      <hr />
      <p v-if="type === 'A'">优秀</p>
      <p v-else-if="type === 'B'">良好</p>
      <p v-else-if="type === 'C'">一般</p>
      <p v-else>差</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // 生成 1 以内的随机数
          num: Math.random(),
          // 类型
          type: 'A'
        },
      })
    </script>
  </body>
</html>

3.9 列表渲染指令

vue 提供了 v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。 v-for 指令需要使用item in items 的特殊语法，其中：

items 是待循环的数组

item 是当前的循环项

3.9.1 v-for 中的索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items。

v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(user, i) in list">索引是：{{i}}，姓名是：{{user.name}}</li>
      </ul>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // 用户列表的数据
          list: [
            { id: 1, name: 'zs' },
            { id: 2, name: 'ls' },
          ],
        },
      })
    </script>
  </body>
</html>

3.9.2 使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
  <div id="app">
    <!-- 添加用户的区域 -->
    <div>
      <input type="text" v-model="name">
      <button @click="addNewUser">添加</button>
    </div>
    <!-- 用户列表区域 -->
    <ul>
      <li v-for="(user, index) in userlist">
        <input type="checkbox" />
        姓名：{{user.name}}
      </li>
    </ul>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户列表
        userlist: [
          { id: 1, name: 'zs' },
          { id: 2, name: 'ls' }
        ],
        // 输入的用户名
        name: '',
        // 下一个可用的 id 值
        nextId: 3
      },
      methods: {
        // 点击了添加按钮
        addNewUser() {
          this.userlist.unshift({ id: this.nextId, name: this.name })
          this.name = ''
          this.nextId++
        }
      },
    })
  </script>
</body>
</html>

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
  <div id="app">
    <!-- 添加用户的区域 -->
    <div>
      <input type="text" v-model="name">
      <button @click="addNewUser">添加</button>
    </div>
    <!-- 用户列表区域 -->
    <ul>
      <li v-for="(user, index) in userlist" :key="user.id">
        <input type="checkbox" />
        姓名：{{user.name}}
      </li>
    </ul>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户列表
        userlist: [
          { id: 1, name: 'zs' },
          { id: 2, name: 'ls' }
        ],
        // 输入的用户名
        name: '',
        // 下一个可用的 id 值
        nextId: 3
      },
      methods: {
        // 点击了添加按钮
        addNewUser() {
          this.userlist.unshift({ id: this.nextId, name: this.name })
          this.name = ''
          this.nextId++
        }
      },
    })
  </script>
</body>
</html>

3.9.3 key 的注意事项

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

4 过滤器(Vue3弃用)

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。例如：hello -> Hello

过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

4.1 过滤器的定义

在创建 vue 实例期间，可以在 filters 节点中定义过滤器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p :title="info | capitalize">{{message | capitalize}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
        filters: {
          capitalize(str) {
            return str.charAt(0).toUpperCase() + str.slice(1)
          }
        }
      })
    </script>
  </body>
</html>

4.2 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器。

<script>
      // 全局过滤器
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
      })
    </script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p :title="info | capitalize">{{message | capitalize}}</p>
    </div>
    <div id="app2">
      <p>{{abc | capitalize}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 全局过滤器
      //全局过滤器–独立于每个vm实例之外
      // Vue.filter()方法接收两个参数:
      //第1个参数，是全局过滤器的"名字“
      //第2个参数，是全局过滤器的"处理函数“
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
      })
    </script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
        // 私有过滤器，只能被当前 vm 所控制的区域所使用
        filters: {
          capitalize(str) {
            return str.charAt(0).toUpperCase() + str.slice(1)
          },
        },
      })
    </script>
    <script>
      const vm2 = new Vue({
        el: '#app2',
        data: {
          abc: 'abc'
        }
      })
    </script>
  </body>
</html>

4.3 连续调用多个过滤器

过滤器可以串联地进行调用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 把message 的值，交给filterA 进行处理-->
    <!-- 把 filterA处理的结果，再交给filterB进行处理-->
    <!--最终把 filterB处理的结果，作为最终的值渲染到页面上，-->
      <p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 全局过滤器
      // 首字母转大写的过滤器
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
      })
      // 定义控制文本长度的过滤器
      Vue.filter('maxLength', (str) => {
        if(str.length <= 10) return str
        return str.slice(0, 10) + '...'
      })
    </script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
      })
    </script>
  </body>
</html>

4.4 过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      // 全局过滤器
      // 首字母转大写的过滤器
      Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
      })
        // 定义控制文本长度的过滤器
        // 过滤器处理函数的形参列表中:
    // 第一个参数:永远都是"管道符“前面待处理的值
    // 从第二个参数开始，才是调用过滤器时传递过来的arg1 和arg2参数
      Vue.filter('maxLength', (str, len = 10) => {
        if(str.length <= len) return str
        return str.slice(0, len) + '...'
      })
    </script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js',
          info: 'title info',
        },
      })
    </script>
  </body>
</html>

4.6过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能

如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：

Vue基础（三）

3.6.3 事件修饰符

3.6.4 按键修饰符

3.7 双向绑定指令

3.7.1 v-model 指令的修饰符

3.8 条件渲染指令

3.8.1

3.8.2 v-else v-else-if

3.9 列表渲染指令

3.9.1 v-for 中的索引

3.9.2 使用 key 维护列表的状态

3.9.3 key 的注意事项

4 过滤器(Vue3弃用)

4.1 过滤器的定义

4.2 私有过滤器和全局过滤器

4.3 连续调用多个过滤器

4.4 过滤器传参

4.6过滤器的兼容性

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue基础（三）

3.6.3 事件修饰符

3.6.4 按键修饰符

3.7 双向绑定指令

3.7.1 v-model 指令的修饰符

3.8 条件渲染指令

3.8.1

3.8.2 v-else v-else-if

3.9 列表渲染指令

3.9.1 v-for 中的索引

3.9.2 使用 key 维护列表的状态

3.9.3 key 的注意事项

4 过滤器(Vue3弃用)

4.1 过滤器的定义

4.2 私有过滤器和全局过滤器

4.3 连续调用多个过滤器

4.4 过滤器传参

4.6过滤器的兼容性

热门文章

最新文章

相关课程

相关电子书

相关实验场景