1.指令修饰符

通过".”指明一些指令后缀，不同后缀封装了不同的处理操作→简化代码
①按键修饰符
@keyup.enter→键盘回车监听
②v-model修饰符
v-model.trim→去除首尾空格
v-model.number →转数字
③事件修饰符
@事件名.stop→阻止冒泡
@事件名.prevent →阻止默认行为

2.v-bind对于样式控制的增强-操作class

v-bind指令在Vue中用于动态地绑定属性或样式。在样式控制方面，可以使用v-bind:class指令来操作class属性。

v-bind:class可以接收一个对象、一个数组或一个计算属性作为参数。

1. 对象语法：

可以通过一个对象来动态地绑定多个class。对象的key是class名称，value是一个布尔值，用于控制是否添加该class。

例如，可以根据isActive的值来决定是否添加active这个class：

<div v-bind:class="{ active: isActive }"></div>

2. 数组语法：

可以通过一个数组来动态地绑定多个class。数组中的每个元素都可以是一个字符串，或是一个对象。

例如，可以根据isActive和error的值来决定添加哪些class：

<div v-bind:class="[isActive ? 'active' : '', error ? 'error' : '']"></div>

3. 计算属性：

可以使用计算属性来根据一些逻辑动态地计算出一个class字符串。

例如，可以根据isActive和error的值来计算出一个class字符串：

<div v-bind:class="computedClass"></div>

computed: {
  computedClass: function() {
    return this.isActive ? 'active' : (this.error ? 'error' : '');
  }
}

v-bind:class指令可以与普通的class属性结合使用。例如，可以给一个元素设置一个固定的class，并根据一些条件来动态添加其他class：

<div class="base" v-bind:class="{ active: isActive, error: error }"></div>

在上述例子中，元素会始终有一个base的class，并且根据isActive和error的值来添加active和error class。

总结：v-bind:class指令可以实现对样式的动态控制，可以根据布尔值、数组或计算属性来决定是否添加某个class。这种灵活的样式控制方式使得Vue在处理复杂的样式变化时非常方便。

3.v-bind 对于样式控制的增强–操作style

通过v-bind指令，可以动态地绑定CSS样式到Vue实例的数据。这使得在样式控制方面具有更强的灵活性。

以下是一些示例：

1. 绑定一个类名：

<div :class="className"></div>

data: {
  className: 'red'
}

2. 绑定内联样式：

<div :style="{ color: fontColor, fontSize: fontSize + 'px' }"></div>

data: {
  fontColor: 'blue',
  fontSize: 20
}

3. 根据条件动态绑定样式：

<div :class="{ active: isActive, 'text-danger': isError }"></div>

data: {
  isActive: true,
  isError: false
}

在上述示例中，className绑定了red类名，fontColor绑定了blue颜色，fontSize绑定了20像素的字体大小。另外，isActive绑定了active类名，isError绑定了text-danger类名。

通过使用v-bind和数据绑定，可以根据需要动态地改变样式，增强了样式控制的灵活性。

4.v-model应用于常见的表单元素

1. input元素：可以绑定到文本输入框（type=“text”、type=“password”、type="email"等）的v-model指令上，用于获取或设置文本框的值。

<input type="text" v-model="message">

2. textarea元素：可以绑定到文本区域的v-model指令上，用于获取或设置文本区域的值。

<textarea v-model="message"></textarea>

3. select元素：可以绑定到下拉列表的v-model指令上，用于获取或设置下拉列表的选中值。

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

4. checkbox元素：可以绑定到复选框的v-model指令上，用于获取或设置复选框的选中状态。

<input type="checkbox" v-model="isChecked">

5. radio元素：可以绑定到单选框的v-model指令上，用于获取或设置单选框的选中状态。

<input type="radio" value="option1" v-model="selectedOption">
<input type="radio" value="option2" v-model="selectedOption">
<input type="radio" value="option3" v-model="selectedOption">

总之，v-model可以用于绑定各种表单元素，使得数据的双向绑定更加方便和快捷。

5.计算属性

概念:基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
计算属性的语法如下：

computed: {
  属性名: function() {
    // 在这里进行计算并返回结果
  }
}

其中，属性名是计算属性的名称，可以在模板中使用。function是计算属性的函数，用来定义计算逻辑。

下面是一个简单的计算属性的示例：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

在上面的示例中，我们定义了一个计算属性fullName，它将firstName和lastName两个数据进行拼接，并返回拼接后的结果。

在模板中使用计算属性的语法如下：

{{ 计算属性名 }}

例如，在上面的示例中，我们可以在模板中通过{{ fullName }}来使用计算属性fullName。

需要注意的是，计算属性是基于依赖的数据变化来自动触发更新的。如果依赖的数据没有发生变化，计算属性的计算结果会被缓存，不会重复计算。只有当依 ·赖的数据发生变化时，计算属性会重新计算并返回新的结果。

6.watch侦听器（监视器)

作用:监视数据变化，执行一些业务逻辑或异步操作。

watch侦听器（也称为监视器）是一种用于监视数据变化的功能。当特定数据发生变化时，侦听器可以执行一些预定义的业务逻辑或异步操作。这可以用于实时更新用户界面、执行后端逻辑、发送通知等。

watch侦听器通常与数据绑定库（如Vue.js的watcher或React的state及Effect）结合使用。它们可以监视数据的变化，并在变化发生时触发相应的操作。

例如，一个watch侦听器可以监视用户的输入表单字段，当用户输入变化时，它可以执行验证输入的逻辑并更新界面中的错误消息。另一个例子是监视网络请求的状态，当请求成功或失败时，watch侦听器可以执行相应的操作（如更新UI、显示错误提示等）。

总的来说，watch侦听器是一种非常有用的工具，可以帮助我们更好地响应数据的变化，并执行相应的操作。它们在现代的前端开发中被广泛使用。