vue中常用的指令和自定义指令

在Vue中，常用的指令有v-bind、v-on、v-for、v-if、v-show等。自定义指令可以通过Vue.directive()方法来创建。

下面是常用指令和自定义指令的代码示例：

1. v-bind：用于动态绑定HTML属性

<div v-bind:class="{'active': isActive}"></div>

1. v-on：用于监听DOM事件

<button v-on:click="onClick">Click me</button>

1. v-for：用于循环渲染列表

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

1. v-if：用于条件渲染

<div v-if="show">This will be rendered if show is true</div>

1. v-show：用于根据条件展示或隐藏元素

<div v-show="show">This will be displayed if show is true</div>

自定义指令的代码示例：

Vue.directive('highlight', {
  bind: function (el, binding) {
    el.style.backgroundColor = binding.value;
  }
});

<div v-highlight="'yellow'">This will have yellow background color</div>

以上代码示例中，v-highlight是自定义的指令，它会将元素的背景颜色设置为指令的参数值。