一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

前言

上一篇文章讲了vue自带的指令，包括以下这些

v-model
v-html
v-text
v-if/v-else-if/v-else
v-for

今天把剩下的指令一起总结了。

指令

v-on

绑定事件的指令。后面跟着绑定的事件名。

如果绑定在原生dom上，只能绑定原生事件（比如click，input，mouseenter等等）。

如果绑定在上组件，可以绑定原生事件（需要加 .natvie 修饰符，绑定在组件的根元素上）

还可以绑定自定义事件，子组件可以通过$emit触发。

例子：

// 原生dom
<input v-on:input="inputFn" />

inputFn () {
 console.log('我是input事件')
}

// father.vue  组件
<my-component v-on:customEevent="customEevent" />

// my-component.vue
// 通过$emit触发，后面可以跟着参数，传给父组件
this.$emit('customEvent', 'args1', 'args2',....)

v-on可以简写，简写是@。还可以跟着修饰符，比如上面的.native修饰符。

还有以下修饰符

.stop（阻止冒泡）
.prevent（阻止默认事件），
.self（自身触发）
.once（只触发一次）
键值或者键的别名（比如：.13（.enter）代表enter键）

// 简写
<input @input="inputFn" />

// 阻止事件冒泡
<button @click.stop="inputFn" />

// 监听enter键，也可以写成@keydown.13
<button @keydown.enter="inputFn" />

// 原生click事件
<my-component @click.native="clickFn" />

v-bind

传递属性的指令。可以在原生dom或者组件上使用。

如果用在原生dom上，可以传原生属性，比如class/style等。可以跟对象或者数组。

如果用在原生props上，除了传原生属性，还可以传自定义属性，自定义属性需要在子组件里通过props定义。

// 最终渲染的div，class只有a
<div v-bind:class="{a: true, b: false}"></div>
<div v-bind:class="['a']"></div>

// 最终渲染的div，color是red
<div v-bind:style="{color: 'red', fontSize: '18px'}"></div>
<div v-bind:style="[{color: 'red', fontSize: '18px'}]"></div>

v-bind也可以简写，简写是:。 v-bind也可以不跟参数，然后通过对象传值。但是此时不能简写。

// 简写
<div :class="['a']"></div>

// 不跟参数, 最终渲染的div id和class都是a
<div v-bind="{id: 'a', class: 'a'}"></div>

// fahter.vue
<my-component :a="a" />

//my-component.vue
{
  props: {
    a: {}
  }
}

v-slot

这个作用在的插槽的指令。

后面可以跟着参数，跟着参数就是具名插槽。不跟就是默认插槽(default),可以简写#。

也可以接受子组件传的prop数据。

    // 具名插槽  等同于#name
    <HelloWorld>
      <template v-slot:name>答案cp3</template>
    </HelloWorld>
    
    //  HelloWorld.vue
    <div>
     <slot name="name"></slot>
    </div>

渲染成<div>答案cp3</div>

    // 具名插槽 + 传参
    <HelloWorld>
      <template v-slot:name="obj">{{obj.myName}}</template>
    </HelloWorld>
    
    //  HelloWorld.vue
    <div>
     <slot name="name" myName="答案cp3"></slot>
    </div>

渲染成<div>答案cp3</div>

v-pre

不需要解析任何内容，直接原样显示。

    <div v-pre>
     {{name}}
    </div>

渲染成<div>{{name}}</div>

v-once

只渲染一次的指令。后面数据如果重新更新，不会再更新。

    <div v-once>{{name}}</div>
    <button @click="name ='a'">设置</button>
    
    name: '答案cp3'

name只会渲染一次，是答案cp3，按钮点击不会改变成a。

v-cloak

这个指令会保存在绑定的元素上，直到实例编译完成。

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

学习下vue的指令（2）

前言

指令