目录
- 1.指令修饰符
- 2.v-bind对于样式控制的增强-操作class
- 3.v-bind 对于样式控制的增强–操作style
- 4.v-model应用于常见的表单元素
- 5.计算属性
- 6.watch侦听器（监视器)
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可以接收一个对象、一个数组或一个计算属性作为参数。
- 对象语法：
可以通过一个对象来动态地绑定多个class。对象的key是class名称，value是一个布尔值，用于控制是否添加该class。
例如，可以根据isActive的值来决定是否添加active这个class：
<div v-bind:class="{ active: isActive }"></div>
- 数组语法：
可以通过一个数组来动态地绑定多个class。数组中的每个元素都可以是一个字符串，或是一个对象。
例如，可以根据isActive和error的值来决定添加哪些class：
<div v-bind:class="[isActive ? 'active' : '', error ? 'error' : '']"></div>
- 计算属性：
可以使用计算属性来根据一些逻辑动态地计算出一个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实例的数据。这使得在样式控制方面具有更强的灵活性。
以下是一些示例：
- 绑定一个
类名：
<div :class="className"></div>
data: {
className: 'red'
}
- 绑定
内联样式：
<div :style="{ color: fontColor, fontSize: fontSize + 'px' }"></div>
data: {
fontColor: 'blue',
fontSize: 20
}
- 根据条件动态绑定样式：
<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应用于常见的表单元素
input元素：可以绑定到文本输入框（type=“text”、type=“password”、type="email"等）的v-model指令上，用于获取或设置文本框的值。
<input type="text" v-model="message">
textarea元素：可以绑定到文本区域的v-model指令上，用于获取或设置文本区域的值。
<textarea v-model="message"></textarea>
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>
checkbox元素：可以绑定到复选框的v-model指令上，用于获取或设置复选框的选中状态。
<input type="checkbox" v-model="isChecked">
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侦听器是一种非常有用的工具，可以帮助我们更好地响应数据的变化，并执行相应的操作。它们在现代的前端开发中被广泛使用。
