本文详细介绍了Vue2.0中的修饰符，包括事件修饰符（如.stop、.prevent等）和键盘修饰符，以及表单修饰符在v-model中的应用。此外，还讲解了如何使用v-bind动态绑定class和style，包括字符串、对象和数组的写法。接着，深入探讨了计算属性的用法，包括getter和setter，以及它们在性能优化中的作用。最后，讨论了watch监听属性的变化，区分了简单侦听和深度侦听的使用场景。
一、修饰符
1.事件修饰符：事件修饰符是对事件捕获以及目标进行了处理（语法：@事件名.修饰符）
（1）stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法
（2）prevent：阻止了事件默认行为，相当于调用了event.preventDefault方法
（3）self：只有在event.target是当前元素自身时触发
（4）once：绑定的事件只能触发一次
（5）capture：让事件触发从包含这个元素的顶层开发往下依次触发（也就是捕获模式）
（6）passive：事件的默认行为立即执行，无需等待事件回调
（7）native：让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
2.键盘修饰符：键盘修饰符用来修饰键盘的事件（如：onkeyup、onkeydown等），键盘的事件触发需要相对应的keyCode。然而keyCode存在很多，因此为了使用方便Vue给我们提供了别名的修饰符
（1）普通按键（enter、delete、space、tab、esc…）
（2）系统修饰键（ctrl、shift、alt…）
（3）也可以直接用按键的代码来做修饰符（如：enter为13）
3.表单修饰符：这个修饰符主要是用在表单常用的指令上,v-model对表单的输入内容进行修饰。
（1）lazy：lazy跟懒加载类似，在表单上我们填写信息的时候不会触发v-model值的变化，只有光标离开的时候才会赋值
（2）trim：过滤掉输入内容的前后空格
（3）number： 会将输入的值转换为数值类型
二、绑定样式
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic{
width: 300px
最低0.47元/天 解锁文章
扫一扫
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
