Vue的内置指令

基本指令

1. v-cloak 用在加载缓慢的时候解决用户体验不好的问题，比如{{}}用法可能自渲染之前要一直显示为{{msg}}。会在Vue编译结束之后再去渲染{{msg}}，一般与display:none;结合使用。

[v-cloak]{
    display:none;
}
复制代码

<div v-cloak>{{msg}}{/div}
复制代码

2. v-once 指定的元素和组件只会渲染一次，在控制台进行更改其内容页面也不会发生改变。

条件渲染指令

1. v-if / v-else 只有在条件为真的时候才会进行渲染，在不满足条件的时候就不会被渲染。用法很简单，直接来一个栗子。

<div id="app">
    <p v-if='one>three'>{{one}}</p>
    <p v-else>{{two}}</p>
</div>
复制代码

var app = new Vue({
    el:'#app',
    data:{
        one:1,
        two:2,
        three:3
    }
})
复制代码

这样在页面上渲染出来的就是2啦。

v-if出于效率考虑，会尽可能的复用已有的元素而不是重新渲染，比如input框中的内容。为此需要给元素加上唯一的key。

2. v-show 其用法与v-if类似，不过v-show只是简单的切换css的display属性，即渲染之后一直存在。

具体区别点此查看。

列表渲染指令 v-for

1. 遍历数组的多个对象：

<ul>
    <li v-for="key in obj">
        {{key.value}}
    </li>
</ul>
复制代码

var app = new Vue({
    el:"app",
    data:{
        obj:[
            {value: 'one'},
            {value:'two'},
            {value:"three"}
        ]
    }
})
复制代码

我们还可以得到它的index值，具体写法为：

<ul>
    <li v-for="(key,index) in obj">
        {{index}} -- {{key.value}}
    </li>
</ul>
复制代码

渲染出的效果如图所示。

2. 遍历一个对象的多个属性：

<ul>
    <li v-for="key in obj">
        {{key}}
    </li>
</ul>
复制代码

var app = new Vue({
    el: '#app',
    data:{
        obj:{
            age1: 18,
            age2: 19,
            age3: 20
        }
    }
})
复制代码

结果如下：

同样的这种写法也可以获得key和index：

<ul>
    <li v-for="(value, key, index) in obj">
    {{index}} -- {{key}} -- {{value}}
    </li>
</ul>
复制代码

结果如图所示（value key index的顺序不能错哦）

数组更新，过滤与排序

1. push() 向数组末尾添加一个元素。
2. pop() 将数组的最后一个元素移除,返回值是被删除的元素。
3. shift() 将数组的第一个元素移除，返回的是被删除的元素。
4. unshift() 在数组的第一个位置添加设置的参数，其他元素依次后移。返回加入元素后的数组长度。
5. splice() 可以删除或添加，返回删除的元素。接受三个参数。
   • 第一个参数表示开始操作的位置。
   • 第二个参数表示要操作的长度。
   • 第三个参数为可选参数（可以有多个），在第二个参数为0时，将其作为添加项。位置为第一个参数设置的位置，此时返回值为空数组。
6. sort()
7. reverse()

---

过滤

在computed属性中添加如下代码，即可在arr数组中过滤出含有两个"oo"的元素。 {{matchOO}}

matchOO: function(){
  return this.arr.filter(function(arr){
    console.log(arr)
    return arr.match(/oo/)
  })
}
复制代码

方法与事件

基本用法

<button #click="handle()"></button>
复制代码

handle:function(count){
  count = count || 1
  this.count += count
  console.log(count)
}
复制代码

不带参数的方法再引用时可以不带括号。带参数的方法如果引用时不加括号，那么默认传递的值是原生事件对象的event。像上面的代码，如果没有加括号，那么传递的值就是 mouseevent。

修饰符

我们写了如下代码，发现点击按钮的时候div的click事件也被触发了，原因是button在div内，相当于同时点了两个区域，这时我们可以在button的click事件上加一个stop，就可以阻止冒泡事件。

<div @click='divclick' style="width: 100px;height: 100px;background: cyan;">
  <button @click='btnclick'>????</button>
</div>
复制代码

接下来认识一下 prevent,form表单在提交的时候总是会刷新页面，所以我们就需要这个像原生里的preventDefault()的修饰符--prevent.用法如下：

<form @submit.prevent>
    <button type='submit'></button>
</form>
复制代码

接下来再来认识一个self，其作用是让事件只作用在本身，而不是子元素被调用的时候。

<div @click.self="event">
    <button @click="event"></button>
</div>
复制代码

最后在来认识一下once同学，