Day 2 of learning Vue

Class 与 Style 绑定

v-bind:class 绑定一个返回对象的计算属性。这是一个常用且强大的模式:

v-bind:style 直接绑定到一个样式对象通常更好,这会让模板更清晰.同样的,对象语法常常结合返回对象的计算属性使用。

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

<div v-bind:style="styleObject" ></div>
var vm = new Vue({
  el: document.querySelector('div'),
  data: {
    styleObject: {
      border: 'solid red',
      width: '140px',
      height: '60px',
      color: 'red',
      fontSize: '13px',
      transform: 'translate(30px, 20px) rotate(20deg)'
    }
  }
});

条件渲染

下面这段代码不知道有什么问题,都会显示出来?

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

key 管理可复用的元素

  • Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可.
  • <label> 元素仍然会被高效地复用,因为它们没有添加 key 属性。

v-show

  • 另一个用于根据条件展示元素的选项是 v-show 指令。用法与 v-if 大致一样。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意,v-show 不支持 <template> 元素,也不支持 v-else。

v-if vs v-show

避免 v-if 和 v-for 用在一起:永远不要把 v-if 和 v-for 同时用在同一个元素上。

列表渲染

key

  • 建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
  • 因为它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。

数组更新检测

替换数组

事件处理

事件修饰符

系统修饰键

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!