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

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+ 中，能够在数组语法中使用对象语法

        <div v-bind:class="[classA, { 'class-b': isB, 'class-c': isC }]">

    绑定内联样式
        
        对象语法
        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。