Vue.js笔记第二波，Class 与 Style 绑定，条件渲染，列表渲染-CSDN博客

Vue.js笔记第二波，Class 与 Style 绑定，条件渲染，列表渲染

今天学了三个大的板块，学起来很快，但是整理笔记很浪费时间，后面把笔记补上，我的学习方法是先快速学习，然后整理笔记，充分消化，再学习新的，温故而知新。

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

绑定 HTML Class
尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}"，但是我们不推荐这种写法和 v- bind:class 混用。两者只能选其一！

       对象语法
       可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存，也可以直接绑定数据里的一个对象，也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。

       数组语法
       可以把一个数组传给 v-bind:class，以应用一个 class 列表，也可以用三元表达式，不过，当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中，可以在数组语法中使用对象语法

   绑定内联样式

       对象语法
       v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）

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

       自动添加前缀
       当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
       浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有：

        Trident内核：主要代表为IE浏览器
        Gecko内核：主要代表为Firefox
        Presto内核：主要代表为Opera
        Webkit内核：产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

        Trident内核：前缀为-ms
        Gecko内核：前缀为-moz
        Presto内核：前缀为-o
        Webkit内核：前缀为-webkit

        -moz代表firefox浏览器私有属性
        -ms代表IE浏览器私有属性
        -webkit代表chrome、safari私有属性

条件渲染

v-if
在 Vue.js，我们使用 v-if 指令实现功能，也可以用 v-else 添加一个 “else” 块

template v-if
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

   v-show
   另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样。不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。
   注意 v-show 不支持 <template> 语法。

v-else
可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”，v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

组件警告
将 v-show 用在组件上时，因为指令的优先级 v-else 会出现问题。因此不要这样做，用另一个 v-show 替换 v-else，这样就可以达到 v-if 的效果。

   v-if vs. v-show
   在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。 v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
   v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
   相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
   一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

列表渲染

v-for
可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名，在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，它是当前数组元素的索引，另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名），从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法。

template v-for
类似于 template v-if，也可以将 v-for 用在 <template> 标签上，以渲染一个包含多个元素的块。

数组变动检测

变异方法
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：

        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
        你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({         message: 'Baz' })。

       替换数组
       变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组
       可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。

track-by
有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

       track-by $index
       如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。
       这让数据替换非常高效，但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 <input> 元素的值）以及组件的私有状态。因此，如果 v-for 块包含 <input> 元素或子组件，要小心使用 track-by="$index"

       问题
       因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化
       1.直接用索引设置元素，如 vm.items[0] = {}。
       2.修改数据的长度，如 vm.items.length = 0。
       为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法
       至于问题 (2)，只需用一个空数组替换 items。
       除了 $set()， Vue.js 也为观察数组添加了 $remove() 方法，用于从目标数组中查找并删除元素，在内部它调用 splice() 。
       使用 Object.freeze()
       在遍历一个数组时，如果数组元素是对象并且对象用 Object.freeze() 冻结，你需要明确指定 track-by。在这种情况下如果 Vue.js 不能自动追踪对象，将给出一条警告。

   对象 v-for
   也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量 $key。
   也可以给对象的键提供一个别名。
   在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

值域 v-for
v-for 也可以接收一个整数，此时它将重复模板数次。

显示过滤/排序的结果
有时我们想显示过滤/排序过的数组，同时不实际修改或重置原始数据。有两个办法：
1.创建一个计算属性，返回过滤/排序过的数组。
2.使用内置的过滤器 filterBy 和 orderBy。
计算属性有更好的控制力，也更灵活，因为它是全功能 JavaScript。但是通常过滤器更方便，详细见API。

转载于:https://my.oschina.net/af666/blog/760788