vue教程_教程及案例

Vue Class 与 Style 绑定-绑定内联样式-自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

Vue Class 与 Style 绑定-绑定内联样式-数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

Vue Class 与 Style 绑定-绑定内联样式-对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名

Vue Class 与 Style 绑定 HTML Class-用在组件上

当在一个自定义组件上使用 class property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

Vue Class 与 Style 绑定 HTML Class-数组语法

我们可以把一个数组传给 v-bind:class,以应用一个 class 列表

VueClass 与 Style 绑定 HTML Class-对象语法

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

Vue计算属性和侦听器-计算属性-侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

Vue计算属性和侦听器-计算属性-计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果

Vue计算属性和侦听器-计算属性-计算属性的 setter

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

Vue计算属性和侦听器-计算属性-计算属性 vs 侦听属性

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果