vue.js指令补充以及一些数组变异的方法

vue.js指令补充
前面在学习vue的指令的时候，在简书上看到一篇vue指令的总结，比较全面，转载到了自己的博客vue.js指令总结。
但是自己在学习的过程中也总结了一些文章里没有的，记录在这里！
1、v-clock
v-clock不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用.

<div id="app" v-cloak>
                    {{message}}
            </div>

但是在这里虽然已经加了指令v-cloak,但其实并没有起到任何作用，当网速较慢、vue.js文件还没有加载完时；在页面上还是会显示{{message}} 的字样，直到vue创建实例、编译模板时，DOM才会被替换，所以这个过程中屏幕是有闪动的，只要加上一句display:none;就可以解决了！像这样

[v-cloak]{
                display:none;
            }

嘿嘿嘿，是不是很简单~

注意：一般情况下，v-clock是一个解决初始化慢导致页面闪动的最佳实践。对于简单的项目来说很实用，但是在具有工程化的项目里，比如有webpack和vue-router时，项目的html结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要使用v-clock。
2、v-for
为了优化代码，可以将v-for用在内置的template上，将多个元素进行渲染，不会构建多个容器，从而优化代码。


more：数组变异更新方法
①push()
向数组末尾添加一个或者多个元素，并返回新的长度。接收任意数量的参数

例：arr.push(1);
arr.push([2,3,4]);

②pop()
和push()方法相反。pop()方法删除数组的最后一个元素，返回它被删除元素的值；
如果数组变为空，则该方法不改变数组，返回undefine值。
③shift()
把数组的第一个元素从其中删除，并返回被删除的值。
如果数组是空的，shift()方法将不进行任何操作，返回undefined的值。
④unshift()
向数组的开头添加一个或多个元素，并且返回新的长度。
⑤splice()
从数组中添加/删除项目，然后返回被删除的项目。
splice的几个功能与使用
⑥sort()
⑦reverse()
将数组中的元素的顺序进行反转，在原数组上操作，然后返回原数组。
注意：reverse方法不能在null与undefined上运行，会报错；空数组上运行reverse方法得到空数组；
以上七个方法会改变被这些方法调用的原数组，下面三个不会，他们返回的是一个新数组。
⑧filter()
js 数组filter 总结及其用处
⑨concat()
⑩slice()
从已有的数组中返回选定的元素
数组slice方法各个参数情况的总结
3、v-if
(1) 条件指令可以根据表达式的值在DOM中渲染或销毁元素、组件； v-if是真正的条件渲染
(2) Vue在渲染元素时，会尽可能地复用已有的元素而非重新渲染，如果不希望这样做，可以增加key属性，key的值必须是唯一的。
例子如下：

        <template v-if="type === 'name'">
            <label>姓名</label>
            <input placeholder="输入姓名">
        </template>
        <template v-else>
            <label>手机号</label>
            <input placeholder="输入手机号">
        </template>
        <button @click="keyTest">点一下</button>

data: {
        type:'name'
    },
methods: {
        keyTest:function(){
            this.type = this.type === 'name' ? 'phone' : 'name'; 
        }
    }

运行出来的效果：

点击一下按钮切换之后

可以看出，切换了之后，虽然DOM变了，但是之前在输入框里键入的内容并没有改变，只是替换了placeholder的内容，因为input元素被复用了。
解决方法：使用key属性

此时，input元素不会被复用，切换类型时键入的内容也会被删除，不过lable元素仍然是被复用的，因为没有key属性！

4、v-show
(1) v-show只是简单的CSS切换，无论条件真与否都会被编译；当值为false时，元素隐藏，查看DOM结构显示display：none。
(2) v-show不能在template上使用