Vue之内置指令

5.1基本指令

5.1.1 v-cloak

v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和css的display：none;配合使用：

<div id=”app” v-cloak>
{{message ))
</div>

[v-cloak]{
   display:none;
}

在一般情况下，对于简单的项目很实用router时，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的

5.1.2 v-once

v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，不常用

<div id=”app”>
<span v-once>{{ message }}</span>
<div v-once>
<span>{{ message }}</span>
</div>
</div>

5.2条件渲染指令

5.2.1 v-if，v-else-if，v-else

v-else-if要紧跟v-if，v-else要紧Rli！v-else-if或v-if，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被移除。如果一次判断的是多个元素，可以在Vue扣内置的<模板>元素上使用条件指令，最终渲染的结果不会包含该元素

5.2.2 v-show

v-show的用法与v-if基本一致，只不过v -show是改变元素的css属性di splay。当v-show表

达式的值为假时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display：none;

5.2.3 v-if与v-show的选择

v-if和v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁

或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素/组件并不会渲染，只

有当条件第一次变为真时才开始编译。

而v-show只是简单的css属性切换，无论条件真与否，都会被编译。相比之下，v-if更适合

条件不经常改变的场景，因为它切换开销相对较大，而vs如何适用于频繁切换条件。

5.3列表渲染指令v-for

5.3.1基本用法

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

式需结合in来使用，类似ite m in items的形式

<li  v-for ＝ ” book in books ” >{ { book.name } }</li>

与v-if一样，v-for也可以用在内置标签<template>上，将多个元素进行渲染：

除了数组外，对象的属性也是可以遍历的

遍历对象属性时，有两个可选参数，分别是键名和索引：

<li v-for =“（value，key，index）用户”>

{{index}} - {{key}}：{{value}}

</ li>

 

v-for 还可以迭代整数： <span v - for= ” n in 10” ＞｛{n}} </span>

5.3.2 数组更新

Vue 的核心是数据与视图的双向绑定，当我们修改数组时， Vue 会检测到数据变化，所以用v-for 渲染的视图也会立即更新。Vue 包含了一组观察数组变异的方法，使用它们改变数组也会触

发视图更新：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

使用以上方法会改变被这些方法调用的原始数组

下面方法不会改变原数组，它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组

• filter()

• concat()

• slice()

app.books = app.books.filter(function (item) {
return item.name.match(/JavaScript/);
});

Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM 元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。

需要注意的是，以下变动的数组中， Vue 是不能检测到的，也不会触发视图更新：

• 通过索引直接设置项，比如app.books[3] = { ... }

可以用两种方法实现同样的效果，第一种是使用Vue 内置的set 方法：
Vue.set(app.books,3,{
    name: ’css’，
    author ：’joe’
});

如果是在webpack 中使用组件化的方式，默认是没有导入Vue 的，这时
可以使用$set ，例如：
this.$set(app.books, 3 , {
name: ’css’，
author ：’joe’
})

• 修改数组长度，比如app.books.length = 1

app.books.splice(3 , 1 , {
name : ’css’，
author ： ’joe’
})
第二个问题也可以直接用splice 来解决：
app.books.splice(l);

5.3.3 过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组

computed:{
         filterBooks:function(){
             return this.books.filter(function(book){
                  return book.name.match(/Java/);
             })
         }
}

上例是把书名中包含JavaScript 关键词的数据过滤出来，计算属性filterBooks 依赖books ，但
是不会修改books 。实现排序也是类似的，比如在此基础上新加一个计算属性sortedBooks ，按照书
名的长度由长到短进行排序：
computed : {
    sortedBooks: function () {
        return this.books.sort(function (a, b) {
            return a.name.length < b.name.length;
        });
    }
}

5.4 方法与事件

5.4.1 基本用法

@click等同于v-on:click，是一个语法糖。在method中定义方法可以供@click调用，@click后面的方法可以不跟括号（）。如果该方法有参数，默认会将原生事件对象event传入。Vue提供了一个特殊变量$event，用于访问原生Dom事件，例如可以阻止链接打开。

<div id="app">
         <a href="www.baidu.com" @click="handleClick('禁止打开',$event)"></a>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   methods:{
                            handleClick:function(message,event){
                                     event.preventDefaulit();
                                    window.alert(message);
                            }
                   }
         })
</script>

5.4.2 修饰符

在上例使用的event.preventDefault（）也可以用Vue 事件的修饰符来实现，在＠绑定的事件后加

小圆点“．”，再跟一个后缀来使用修饰符。Vue 支持以下修饰符：

• .stop

• .prevent

• .capture

• .self

• .once

<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--提交时间不再重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件监听器-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身（而不是子元素）触发时触发回调-->
<div @click.self="handle">...</div>
<!--只触发一次-->
<div @click.once="handle">...</div>
<!--监听键盘-->
<input @keyup.13="submit">
也可以自己配置具体按键：
Vue.config.keyCodes.fl = 112;
／／全局定义后，就可以使用自keyup.fl

除了具体的某个keyCode 外， Vue 还提供了一些快捷名称，以下是全部的别名：

• .enter

• .tab

• .delete （捕获“删除”和“退格”键）

• .esc

• .space

• .up

• .down

• .left

• .right

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

• .ctrl

• .alt

• .shift

• .meta (Mac 下是Command 键， Windows 下是窗口键）

组合用法
<! -- Shift + S -- >
<input @keyup.shift . 83 =” handleSave”>
< !-- Ctrl + Click -- >
<div @click.ctrl=”doSomething”> Do something</div>