cssvue内联_Vue学习笔记（三）

1 监听

在Vue.js中可以通过watch来监听数据的变化&＃xff0c;比如通过watch实现的简单计数器&＃xff1a;

效果如下&＃xff1a;

watch有两个参数&＃xff0c;一个是要监听的变量&＃xff0c;另一个是回调函数&＃xff0c;回调函数接受两个参数&＃xff0c;第一个参数是新值&＃xff0c;第二个参数是旧值。

下面再来看一下有关单位换算的例子&＃xff1a;

2 样式绑定

class与style是HTML元素的属性&＃xff0c;用于设置元素的样式&＃xff0c;可以利用v-bind来设置样式属性。v-bind在处理class以及style时专门增强了&＃xff0c;表达式的结果类型除了是字符串外&＃xff0c;还能是对象或者数组。

2.1 class绑定

可以为v-bind:class设置一个对象&＃xff0c;从而动态切换class&＃xff1a;

也可以传入多个属性来动态切换多个class&＃xff1a;

效果&＃xff1a;

也可以利用对象进行简化&＃xff1a;

2.2 计算属性

在v-bind:class中除了是一个对象还能绑定返回对象的计算属性&＃xff0c;比如&＃xff1a;

效果如下&＃xff1a;

2.3 数组

也可以传递给v-bind:class一个数组&＃xff0c;数组的元素为变量&＃xff0c;变量的内容为对应的CSS类名&＃xff1a;

也可以利用三元表达式来切换&＃xff1a;

3 内联样式

可以在v-bind:style中直接设置样式&＃xff08;注意前后带{}&＃xff09;&＃xff1a;

当然也可以像绑定class一样直接绑定到一个对象上&＃xff1a;

也可以使用数组进行绑定多个样式&＃xff1a;

另外当v-bind:style需要特殊前缀的CSS时&＃xff0c;比如transform&＃xff0c;Vue会自动侦测并添加相应前缀。

4 事件处理

4.1 v-on

事件监听可以使用v-on&＃xff1a;

通常来说单击按钮会触发一个方法调用&＃xff0c;在methods中指定即可&＃xff1a;

当然也可以使用内联的JS语句&＃xff1a;

4.2 事件修饰符

Vue为v-on提供了事件修饰符来处理DOM事件细节&＃xff0c;如event.preventDefault()或event.stopPropagation()&＃xff0c;通过.表示的指令调用修饰符&＃xff1a;

• .stop&＃xff1a;阻止事件冒泡
• .prevent&＃xff1a;提交事件不再重载页面&＃xff0c;如
• .capture&＃xff1a;事件捕获模式
• .self&＃xff1a;只当事件在该元素本身&＃xff08;而不是子元素&＃xff09;触发时回调
• .once&＃xff1a;事件只能点击一次

4.3 按键修饰符

Vue允许在v-on在监听键盘事件时添加按键修饰提示符&＃xff1a;

keyCode值对应ASCII表&＃xff0c;为了方便&＃xff0c;Vue为常用的按键提供了别名&＃xff1a;

• .esc
• .delete&＃xff08;删除&＃43;退格&＃xff09;
• .enter/.space/.tab
• .up/.down/.left/.right
• .ctrl/.alt/.shift/.meta

当然也可以进行按键的组合&＃xff0c;使用.连接即可。 例子如下&＃xff1a;