vue2技能树（4）-插值、动态参数、指令修饰符、计算属性、侦听器

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

Vue 2插值详解

Vue.js 2 提供了强大的模板语法，允许你在HTML模板中插入动态数据，这部分通常被称为插值。插值是Vue模板语法的核心，用于将数据绑定到DOM中，实现动态渲染。以下是对Vue 2模板语法的插值部分的多方面详细介绍。

文本插值

文本插值是Vue 2中最常见的插值方式，它使用双大括号{{ }}将数据绑定到模板中。

<p>{{ message }}</p>

在这个示例中，message 是一个数据属性，它将在模板中动态渲染出来。

原始HTML

如果你需要渲染原始的HTML代码，而不是纯文本，你可以使用v-html 指令。

<p v-html="rawHtml"></p>

在这个示例中，rawHtml 数据属性包含HTML代码，它会被解析并渲染为DOM元素。

表达式

在插值中，你也可以使用JavaScript表达式，以便对数据进行处理。表达式在双大括号内使用，Vue会在编译时将它们解释为JavaScript代码。

<p>{{ message.toUpperCase() }}</p>

在这个示例中，toUpperCase() 方法将 message 数据属性的值转换为大写字母。

过滤器

Vue 2允许你使用过滤器来格式化数据输出。过滤器可以在插值中使用，以便在显示数据之前对其进行处理。

<p>{{ message | capitalize }}</p>

Vue.filter('capitalize', function(value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

在这个示例中，capitalize 过滤器用于将 message 数据属性的值首字母大写。

计算属性

计算属性允许你在模板中使用计算后的属性值，而不是直接使用原始数据属性。计算属性在Vue实例中定义，并根据它们的依赖值自动更新。

<p>{{ reversedMessage }}</p>

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});

在这个示例中，reversedMessage 计算属性用于在模板中显示 message 数据属性的反转版本。

数据绑定

Vue 2的插值部分提供了灵活的数据绑定方式，允许你将数据直接绑定到模板中，以实现动态渲染和交互性。无论是显示纯文本、渲染HTML、处理表达式还是使用过滤器，Vue的插值功能都能满足各种渲染需求。这使得Vue成为一个强大的前端框架，用于构建动态和响应式的用户界面。

Vue.js 2 的指令具有丰富的功能，包括动态参数、修饰符和缩写，使其非常灵活和强大。以下是对Vue 2指令的动态参数、修饰符和缩写的多方面详细介绍。

Vue 2指令的动态参数、修饰符和缩写

动态参数

Vue 2 允许你使用动态参数来将指令应用到不同的DOM元素或属性。动态参数是以方括号 [] 包裹的JavaScript表达式，用于动态设置指令的目标。

<div v-bind:[attributeName]="value"></div>

在这个示例中，attributeName 是一个动态参数，它的值将动态确定要绑定的属性。

修饰符

修饰符是在指令后以点号 . 形式添加的额外选项，用于修改指令的行为。Vue 2 提供了多种修饰符，用于不同的指令。

v-on 修饰符

• .stop: 阻止事件冒泡。
• .prevent: 阻止默认事件。
• .capture: 事件侦听会在捕获阶段进行。
• .self: 只在触发事件的元素上触发处理程序。
• .once: 只触发一次。
• .passive: 表示事件处理函数永远不会调用 preventDefault()。

<button v-on:click.stop="doThis"></button>

v-bind 修饰符

• .prop: 绑定为DOM属性而不是属性。
• .camel: 驼峰命名绑定到DOM属性。

<input v-bind:value.prop="message">

v-model 修饰符

• .lazy: 取代默认的 input 事件为 change 事件。
• .number: 将输入值转换为数字类型。
• .trim: 自动过滤输入的首尾空格。

<input v-model.lazy="message">

缩写

Vue 2 为一些常用的指令提供了缩写，以减少模板中的冗余。以下是一些常见的指令缩写：

• v-bind 缩写：使用 : 表示，例如 :src="url"。
• v-on 缩写：使用 @ 表示，例如 @click="doSomething"。

这些缩写使得模板更加简洁和易读，同时保持了代码的可读性和维护性。

动态参数、修饰符和缩写是Vue 2指令功能的一部分，它们使Vue模板变得更加强大和灵活。通过使用这些特性，你可以更好地控制DOM元素的行为和属性，以满足各种需求。

Vue 2 计算属性和侦听器详解

Vue.js 2 提供了计算属性（Computed Properties）和侦听器（Watchers）两种机制，用于处理和响应数据的变化。这些机制允许你以声明式的方式定义数据的衍生、响应和副作用。以下是对Vue 2计算属性和侦听器的多方面详细介绍。

计算属性 (Computed Properties)

计算属性是基于Vue实例的数据属性计算得出的属性。它们依赖于其他属性，并且只有在依赖的属性发生变化时才会重新计算。计算属性具有以下特点：

1. 声明方式：在Vue实例的computed选项中声明计算属性。

   new Vue({
     data: {
       message: 'Hello, Vue!',
     },
     computed: {
       reversedMessage: function() {
         return this.message.split('').reverse().join('');
       },
     },
   });
   

2. 缓存：计算属性是惰性的，只有在相关依赖发生变化时才会重新计算。在多次访问计算属性时，Vue会缓存计算结果，不会重复计算。

3. 响应性：计算属性是响应式的，当依赖的数据属性发生变化时，计算属性会自动重新计算并更新相关视图。

4. getter和setter：计算属性有一个getter函数用于获取属性值，也可以有一个setter函数用于修改属性值。

   computed: {
     fullName: {
       get: function() {
         return this.firstName + ' ' + this.lastName;
       },
       set: function(value) {
         var names = value.split(' ');
         this.firstName = names[0];
         this.lastName = names[1];
       },
     },
   }
   

计算属性通常用于将复杂的逻辑封装为属性，以便在模板中使用。它们有助于使模板简洁、可读性高，并提高了代码的可维护性。

侦听器 (Watchers)

侦听器允许你在数据发生变化时执行自定义逻辑。与计算属性不同，侦听器不会返回一个新的属性值，而是执行一些副作用操作。侦听器具有以下特点：

1. 声明方式：在Vue实例的watch选项中声明侦听器。

   new Vue({
     data: {
       message: 'Hello, Vue!',
     },
     watch: {
       message: function(newValue, oldValue) {
         console.log('Message changed from ' + oldValue + ' to ' + newValue);
       },
     },
   });
   

2. 监听属性：侦听器可以监听一个或多个数据属性的变化。

   watch: {
     'person.age': function(newValue, oldValue) {
       console.log('Age changed from ' + oldValue + ' to ' + newValue);
     },
   }
   

3. 异步操作：侦听器可以执行异步操作，如发送HTTP请求或触发动画。

   watch: {
     message: {
       handler: 'doAsyncOperation',
       deep: true,
     },
   }
   

4. Immediate 选项：你可以使用 immediate 选项立即执行侦听器的回调函数。

   watch: {
     message: {
       handler: 'doSomething',
       immediate: true,
     },
   }
   

侦听器通常用于处理异步或副作用操作，如数据的持久化、API调用、路由导航等。它们为你提供了更多的灵活性，以响应数据的变化，并执行相应的操作。

在实际应用中，你可以根据需求选择使用计算属性或侦听器，或者同时使用两者。计算属性通常用于处理基于数据的衍生属性，而侦听器用于处理与数据变化相关的副作用操作。这两种机制共同构建了强大的数据响应系统，使Vue成为一个灵活和高效的前端框架。