目录
- 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侦听器是一种非常有用的工具,可以帮助我们更好地响应数据的变化,并执行相应的操作。它们在现代的前端开发中被广泛使用。