Vue常用指令总结

由于Vue指令太多，常常记错指令的使用场景以及用法，现将常用指令总结出来，以便下次需要时查阅

1.v-on，缩写@

绑定事件监听（用于监听DOM事件）。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

比如我们常用的

        <!-- 方法处理器 -->
        <button @click="toDo">做一件事</button>
        <!-- 内联语句 -->
        <button @click="toDo1('hello', $event)">再做一件事</button>
        <!-- 停止冒泡，调用event.stopPropagation() -->
        <button @click.stop="doThis">做一件事</button>
        <!-- 阻止默认行为，调用event.preventDefault() -->
        <button @click.prevent="doThis">做一件事</button>
        <!-- 阻止默认行为，没有表达式 -->
        <form @submit.prevent>做一件事</form>
        <!-- 串联修饰符 -->
        <button @click.stop.prevent="doThis">做一件事</button>
        <!-- 键修饰符，键别名 -->
        <input @keyup.enter="onEnter">
        <!-- 键修饰符，键代码 -->
        <input @keyup.13="onEnter">
        <!-- 点击回调只会触发一次 -->
        <button @click.once="doThis">做一件事</button>
        <!-- 对象语法 -->
        <button v-on="{ mousedown: doThis, mouseup: doThat }">做一件事</button>

        <!-- 在子组件上监听自定义事件（当子组件触发“my-event”时将调用事件处理器） -->
        <mycomponent @myEvent="handleThis"></mycomponent>
        <!-- 内联语句 -->
        <mycomponent @myEvent="handleThis(123, $event)"></mycomponent>
        <!-- 组件中的原生事件 -->
        <mycomponent @click.native="onClick"></mycomponent>

2.v-bind，缩写:

动态的绑定一个或多个特性，或一个组件prop到表达式，在绑定class或style特性时，支持其他类型的值，如数组或对象。在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型

没有参数时，可以绑定到一个包含键值对的对象。

绑定Class

我们可以传给:class一个对象，以动态的切换class

<div :class="{ active: isActive }"></div>

上述代码表示active这个class存在与否将取决于数据属性isActive的值，为true即存在，false则不存在

当然，该对象中可以传入多个属性来动态切换多个class，v-bind:class也可以与普通的class属性共存

<div class="box" :class="{ active: isActive, red: isRed }"></div>

比如以上代码中，存在class="box"以及:class，其中isActive和isRed是需要在data中定义的

 data: {
                isActive: true,
                isRed: false
            }

最终渲染的结果为

当isActive或者isRed变化时，class将相应的更新，我们可以试试将isRed修改为true，结果为

可以看到red已经在列表中了。

我们也可以使用另外一种方式绑定数据对象

<div :class="classObject"></div>

data: {
                isActive: true,
                isRed: true,
                classObject: {
                    box1: true,
                    box2:true
                }
            },

结果为

由此可以看出，渲染的结果和上面的方法是一样的。

我们也可以在这里绑定一个返回对象的计算属性。这是很强大的也很实用的，我们一定要熟练使用！！！

<div :class="myClass"></div>

            computed: {
                myClass () {
                    return {
                        myBOx1: this.isActive && true,
                        myBOx2: false
                    }
                }
            }

以上的结果为

数组语法：我们可以把一个数组传给:class，以应用一个class列表

<div :class="[{ active: isActive }, borderRed]"></div>

数组中也推荐使用对象语法，这样会显得简洁明了。

绑定内联样式

             data: {
                styleObject: {
                    textAlgin: 'center',
                    color: '#333'
                }
            }

<div :style="styleObject"></div>

同样推荐绑定一个样式对象，会让模板更加清晰。

<!-- 绑定一个属性 -->
        <img :src="imageSrc">
        <!-- 内联字符串拼接 -->
        <img :src="'/src/img'+imgName">
        <!-- class绑定 -->
        <div :class="{red :isRed}"></div>
        <div :class="[classA, classB]"></div>
        <div :class="[classA, { classB:isB, classC: isC }]"></div>
        <!-- style绑定 -->
        <div :style="{ fontSize: size + 'px' }"></div>
        <div :style="[styleObjectA,styleObjectB]"></div>
        <!-- 绑定一个有属性的对象 -->
        <div v-bind="{ id:someProp, 'data-id': dataId }"></div>
        <!-- 通过prop修饰符绑定DOM属性 -->
        <div :text-content.prop="text"></div>
        <!-- prop绑定。“prop”必须在my-component中声明 -->
        <my-component :prop="someThing"></my-component>
        <!-- 通过$props将父组件的props一起传个子组件 -->
        <child-component v-bind="$props"></child-component>
        <!-- Xlink -->
        <svg><a :xlink:special="foo"></a></svg>

上述为官网上列出的例子，可以参考一下

3.v-if

条件渲染

<div v-if="Math.random() > 0.5">
            now you see me
        </div>
        <div v-else>
            now you don't
        </div>

我们可以通过判断结果来控制显示哪些内容在页面上。

v-else-if，想想我们平时使用if...else if...，就能够理解了，都可以连续使用：

        <div v-if="type === 1">A</div>
        <div v-else-if="type === 2">B</div>
        <div v-else-if="type === 3">C</div>
        <div v-else>not 1/2/3</div>

              <template v-if="loginType === 'username'">
                <label>Username</label>
                <input placeholder="Enter your username">
              </template>
              <template v-else>
                <label>Email</label>
                <input placeholder="Enter your email address">
              </template>
              <button @click="toggle">选择登录方式</button>

看上述代码，上述代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input>不会被替换掉--仅仅是替换了它的placeholder

这样其实并不一定能够符合我们所有的需求，Vue提供了一种方式来表达“这两个元素是完全独立的，不要复用”。我们只需要添加一个具有唯一值得key属性即可

<template v-if="loginType === 'username'">
                <label>Username</label>
                <input placeholder="Enter your username" key="username-login">
              </template>
              <template v-else>
                <label>Email</label>
                <input placeholder="Enter your email address" key="email-login">
              </template>
              <button @click="toggle">选择登录方式</button>

现在，每次切换时，input框将会被重新渲染，注意，因为label并没有添加key属性，因此，label还是会被高效渲染。

最后v-if还值得我们注意的是，如果v-if和v-for一起使用，v-for比v-if具有更高的优先级。

4.v-show

v-show这个命令就跟v-if很像了，不同的是，带有v-show的元素始终会被渲染并保存在DOM中。v-show只是简单的切换元素的CSS属性display

 <div v-show="isShow">测试v-show</div>

v-show和v-if比较，v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次为真时，才会开始渲染条件块。

相比较之下，v-show不管初始条件是什么，元素总是会被渲染，并且只是简单的基于CSS进行切换。

一般来说，如果需要非常频繁的切换，使用v-show较好；如果在运行时条件很少改变，则使用v-if较好

5.v-for

基于源数据多次渲染元素或模板块。也就是我们平时见到的循环

items: [
                    {
                        txt: '1'
                    },
                    {
                        txt: '2'
                    },
                    {
                        txt: '3'
                    }
                ]

<div v-for="item in items">{{item.txt}}</div>

<div v-for="(item,index) in items">{{item.txt}}:{{index}}</div>
              <div v-for="(val, key) in items">{{val.txt}}:{{key}}</div>

当然，item in items我们也可以用item of items，使用of替代in作为分隔符，会更加接近Javascript迭代器的语法

<div v-for="item of items"></div>

v-for通过一个对象的属性来迭代

<div v-for="(value, key , index) of Object">{{index}}:{{key}}:{{value}}</div>

              Object: {
                    name: 'pob',
                    sex: '男',
                    age: '15'
                }

结果为：

在遍历对象时，是按照Object.keys()的结果遍历，不能保证它的结果在不同的JavaScript引擎下是一致的