Vue内置指令Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，因此会出现乌龙，只会渲染变

v-cloak

解决页面加载时闪烁出现vue标签或者指令的问题（比如一闪而过的{{message}}）

和 [v-cloak] { display: none } 一起使用

<div v-cloak>{{msg}}</div>

也可以把它写在根元素上

<div id="app" v-cloak></div>

如果有的时候不起作用,可能是以下两种情况：

v-cloak的display属性被层级更高的给覆盖掉了，提高层级

 [v-cloak] {
    display: none !important;
}

样式放在了@import引入的css文件中（传统的开发方式） v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

v-once

只渲染元素和组件一次，可以用于性能优化

v-if

v-if后接的是等号,等号后必须是布尔值

v-if的基本用法 (逻辑与if 语句相同)

<div v-if="true">{{msg}}</div>       
<div v-else-if="false">{{divBorder}}</div>    
<div v-else>{{divBackground}}</div>

这是一个简单的点击按钮，切换用户名密码输入框的实例:

HTML:
<div v-if="type==='name'">      
    用户名: <input type="text" placeholder="请输入用户名" key="name">    
</div>    
<div v-if="type==='password'">      
    密码: <input type="text" placeholder="请输入密码" key="password">    
</div>    
<button v-on:click="toggleType">点击切换</button>

JS:
var app = new Vue({    
    el: '#app',    
    data: {      
        type: 'name'    
    },    
    methods: {      
        toggleType: function () {        
            this.type = (this.type === 'name' ? "password" : "name")      
        }    
    }  
})

我在输入框后面加入key值,这是因为v-if存在弊端

Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，因此会出现乌龙，只会渲染变化的元素，也就是说，input元素被复用了 (input输入框的值也会出现在password输入框内。)

解决方法：加key，唯一，提供key值可以来决定是否复用该元素

v-show

只改变了css属性display

v-if和v-show的比较：

v-if: 实时渲染 ,页面显示就渲染，不显示就移除

v-show: v-show的元素永远存在也页面中，只是改变了css的display的属性

v-for

当需要将一个数组遍历或枚举一个对象属性循环显示时，就会用到列表渲染指令v-for。

v-for的用法: v-for一定是卸载要遍历的元素上,v-for后接等号,类似于item in items

遍历多个对象一定是遍历数组

两种使用场景：

遍历多个对象

遍历一个对象的多个属性

遍历多个对象

<li v-for="item in fruits">{{item.name}}</li>
获取索引:
<br><li v-for="(item,index) in fruits">{{index}}--{{item.name}}</li>

fruits:[        
    {name: 'apple'},        
    {name: 'banana'},        
    {name: 'mango'}      
]

效果:

遍历一个对象的多个属性

遍历一个对象的多个属性:
<li v-for="value in fruits">{{value}}</li>      
获取对象的value,key,index      
<li v-for="(value,key,index) in fruits">{{index}}--{{key}}:{{value}}</li>

fruits:{       
    fruit1: 'apple',        
    fruit2: 'banana',      
    fruit3: 'mango'      
}

效果:

数组更新，过滤与排序

改变数组的一系列方法：

push() 在末尾添加元素，返回添加元素后数组长度

app.arr.push('pear')

pop() 将数组的最后一个元素移除，返回被删除的元素

app.arr.pop()

shift() 删除数组的第一个元素，返回被删除的元素

app.arr.shift()

unshift（）：在数组的第一个元素位置添加一个元素，返回添加元素后数组长度

app.arr.unshift('pear')

splice() ：可以添加或者删除

sort（）：排序
reverse() 翻转
filter() 过滤器

splice()方法:

三个参数：

第一个参数表示开始操作的位置
第二个参数表示：要操作的长度
第三个为可选参数

app.arr.splice(0,3)  // 从第零个元素开始,删除三个元素
app.arr.splice(0,1,'tom')  // 从第零个元素开始,删除1个元素,在改位置添加一个'tom'
app.arr.splice(1,0,'tom','jerry') // 从第1个元素开始,删除0个元素,在该位置插入'tom'，'jerry'

sort()方法示例:

<li v-for="item in arr">{{item}}</li>      
<button @click="sortArray">从大到小排序</button>

data: {         
    arr:['apple','banana','pear']    
},    
methods: {      
    sortArray:function(){        
        this.arr.sort(function(a,b){          
            //    从大到小排序(a-b从小到大)                    return b.length-a.length        
        })      
    }    
}

reverse()方法示例:

<li v-for="item in arr">{{item}}</li>      
<button @click="reverse">点我翻转数组</button>

data: {         
    arr:['apple','banana','pear']    
},    
methods: {      
    reverse:function(){        
        this.arr.reverse()      
    }    
}

两个数组变动vue检测不到:

改变数组的指定项
改变数组长度

解决方法:

改变指定项

Vue.set(app.arr,1,”car”) 
// Vue.set()第一个参数要改变的对象, 第二个参数是index或者key, 第三个参数是替换的值

改变数组长度 app.arr.splice(1)

filter() 过滤

含有pp字符串的是: {{matchpp}}     //  含有pp字符串的是: [ "apple" ]

data: {         
    arr:['apple','banana','pear']    
},    
computed:{      
    matchpp:function(){        
        return this.arr.filter(function(item){          
            return item.match(/pp/)        
        })      
    }    
}

方法和事件

v-on绑定的事件类似于原生的onclick等写法

methods:{ handle:function (count) { count = count || 1; this.count += count; } }

如果方法中带有参数，但是你没有加括号，默认传原生事件对象event

修饰符

在vue中传入event对象用 $event

向上冒泡

stop:阻止单击事件向上冒泡
prevent::提交事件并且不重载页面
self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法

可以监听键盘事件：

<input @keyup.13 ="submitMe"> ——指定的keyCode

vueJS为我们提供了：

.enter

.tab

.delete

......

Vue内置指令