Vue指令总结

1.0     v-if&v-else&v-show

v-if 是指令中判断如果是true则会显示该Dom元素，如果不是，则不显示该Dom元素

v-else是v-if下的另一种情况v-if如果为false则会显示v-else的内容

v-show和v-if的效果是一样的，但是唯一的区别是v-show是不显示，但是dom元素还在,而v-if不显示，则是vue不加载该dom元素，并不存在

2.0  v-for

v-for是循环某一个元素的指令，基础模版是<li v-for="(item,index) in items">{{item}}</li>

可以循环纯数组，也可以循环数据对象也就是json对象，如果给数组里面的数组排序，就必须用到computed的对象里面重新定义一个对象，返回排过序的数组，因为data里面的原数组vue实例对象会保护，如果直接用的，会污染原来的数据源，所以才会重新定义对象来操作原数组。如果数组只是一个纯数字的数组，那么直接用sort()方法,里面用一个function(a,b){return a-b}的函数来处理数组。如果是一个json对象的话就要用到

//数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}这里的key一定要加引号，因为是键值，属性值

来返回该数组，这在工作会经常用到，所以一定得记住

3.0 v-text&v-html

v-text 效果其实和{{}}里面加vue实例对象的属性是一样的,但是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。v-html则会解析html相应的标签格式，有时候会很危险，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

4.0 v-on

v-on是绑定事件 需要在methods对象中添加事件 简写是@事件,事件后面还可以加键盘码，如图所示

5.0 v-model 

v-model双向数据绑定，一般用在表单元素中,可以加修饰码.lazy.number.trim,其中值得注意的是多选绑定一个数组

       <p>            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">            <label for="JSPang">JSPang</label><br/>            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">            <label for="JSPang">Panda</label><br/>            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">            <label for="JSPang">PanPan</label>            <p>{{web_Names}}</p>       </p>

注意这个value是关键

6.0 v-bind 

是绑定标签属性的指令，简写是:属性值 1.直接绑定class样式 :class="className"(className要在data里面设置)2.判断class样式 :class="{red:isOk}"(red是常量代表css的样式名,isOk则要在data里面设置)3.class里面设置数组 : class="[classA,classB]"（后面的都是属性名，css样式写在后面的会覆盖前面的，但是值得注意的是，我指的是style样式中的顺序,而不是这里的顺序）4.绑定class的三元运算符<div:class="isOk?classA:classB">绑定class中的三元表达式判断</div>

5.绑定style :class="{color:red,fontSize:font}"(这里键是常量，代表的是属性名,而后面的则是要在data里面设置)6.绑定style对象 :class="styleObj" 这里的styleObj则是要在data 里面设置styleObj对象 记住前面的键一定得符合标签样式的写法,比如backgroundColor,fontSize,后面的值则是要加引号,并加上值才能正常显示其对应的样式

7.0 v-pre&v-cloak&v-once

v-pre 在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

v-cloak 在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用[v-cloak]{display:none}可以解决闪烁问题

v-once 在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。