vue构建的七彩外衣

继第一章的vue入门http://blog.csdn.net/jerryjavacoding/article/details/77985464，接着学习的是vue在前端另一个重要领域：样式。传统基于dom的样式都是通过绑定class或者id来进行渲染，当我们需要根据业务动态修改样式的时候，很多时候只能依赖脚本去做逻辑替换，这个比较繁琐也容易出错。而vue通过其自身的数据双向绑定特性，应用于样式上，我们就可以根据这个来改变元素上的样式，简单易懂，非常方便。

Class 与 Style 绑定

• Style
  vue中要动态跟换元素的样式，使用class的话，就是将元素的Style特性与一个数据源对象进行绑定，这个数据源的key都是一些css文件中样式名称，如color，display等。比如

 <a :style="classObj" href="xxx"/><script>... vue.data(){    return{        classObj:{                          color:blue,                display:none,           }    }}</script>

这样我们就将a的“外衣”牢牢的与classObj对象绑定在一起，当我们需要更改样式的时候，只要修改classObj对应属性就可以了，元素a的样式就会实时更新。
这里我们注意到style绑定的是一个对象，而这个对象可以有众多的属性，所以一般一个对象就能应付上很多样式需求了，但是如果我们定义的style绑定对象要可以复用到其他元素上，或者需要一些公用的属性，每次都手动添加一份就显得不灵活且繁琐，这是style绑定的对象可以是一个数组，而数组中的对象就是上文中普通的数据源，比如

 <a :style="[classObj,publicObj]" href="xxx"/><script>... vue.data(){    return{        publicObj:{            color:blue,        },        classObj:{                                  display:none,           }    }}</script>

如今我们看到都是key-value的形式，一个键只有一个值，vue新版2.3中增加了一个称谓“多重值”的概念，就是一个键可以有多个不同的值，那浏览器到底会采用哪个值呢？嘿嘿这还真是浏览器的事情了，不同浏览器引擎不同，我们将所有情况都罗列一般，主要就是为了兼容不同浏览器，如果都支持的话，就会取最后一个。

---

• Class

class其实与上文的style类似，也有分数组和对象两种语法，还有数据与对象的结合。
这里的class跟style有啥不同？为什么会单独分出来？
style一般是我们自己定义的，k-v的v有n中可能，但是class只有两种可能，true or false

<div :class="classObject"></div>data: {  classObject: {    active: true,    'text-danger': false  }}

对嘛，我们选择class对象是，要么采用要么不要。这个要严格区分与style的不同。上文提到这里也可以是数组，如

<div :class="[activeClass, errorClass]"></div>data: {  activeClass: 'active',  errorClass: 'text-danger'}

数组语法，显示了的，当然是true了，没显示就是false，下面这种是对象语法与数组语法的结合体：

<div :class="[{ active: isActive }, errorClass]"></div>

这里还要强调一点是我踩过的坑，当我们的class作用在自定义的组件上时，如

ChildModal.vue:    <template>        <p class="classObj">Hello World!</p>        ...    </template>Parent.vue:    <ChildModal class="classObjParent"></ChildModal>

组件的父组件渲染的时候会将classObj也带到组件上来，而例子中我们看到父组件上已经定义了classObjParent了，这时候子组件定义的class就会追加在后面，而不是覆盖！

渲染

对于html元素的渲染，一般都会跟vue提供的指令挂钩

• 首先比较经典的就是v-if和v-show的区别，很多人知道v-if是根据属性然后选择性渲染，而show是全部渲染，然后依托display来显示和影藏。道理都懂，可以官方为什么这么费劲去搞出两套东西？那要根据其应用场景才能知道vue的意图。
  if的切换开销大，适用于页面不经常切换，改变的条件一般不太可能，而show是渲染的开销大，适用于页面经常切换
  不过show不能用于template元素，这个元素渲染后是不存在的，那么display就无意义了，只能通过if。
  条件渲染中，如下面的例子（下面这个也不能用show，因为show不支持v-else）

<template v-if="loginType === 'username'">  <label>Username</label>  <input placeholder="Enter your username"></template><template v-else>  <label>Email</label>  <input placeholder="Enter your email address"></template>

• key管理可复用的元素
  当我们根据loginType切换不同的页面的时候，会发现两个template其实里面的input是同一个，这样对于要切换来回的业务需求就不合理了，vue的解决方法就是通过给input添加key值，来区分他们。

<template v-if="loginType === 'username'">  <label>Username</label>  <input placeholder="Enter your username" key="username-input"></template><template v-else>  <label>Email</label>  <input placeholder="Enter your email address" key="email-input"></template>

• v-for与v-if
  两者同时存在的时候，for的优先级更高。当我们需要for遍历数组然后通过if来筛选的话，在一个元素上，两个可以同时存在，原因就是for优先级高，但是当我们要根据if判断后再来用for去遍历数组，这个显然就不对了，只能在元素的外层去使用if了

• 上文提到了v-for，很多人对于for指令的只是了解item in items，其实还有很多，比如

   item of items (item,index) in items

  for除了可以遍历数组，还能遍历对象，

   value in Object(value,key)  in object(value,key,index) in object

  for遍历如果是对象，对象的数据变动并不能触发到for去更改，只能通过vue实例的$set函数对象去修改，如果是数组，有以下情况，也不能更新，要跟对象一样处理：

  当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue                   当你修改数组的长度时，例如：vm.items.length = newLength

注：本文例子部分引用官网