vue常见的指令有哪些

Vue常用的指令有15个，包括：v-model、v-for、v-show、v-hide、v-if、v-else/v-else-if、v-text、v-html、v-cloak、v-once和v-pre。

Vue.js 是一个用于构建用户界面的渐进式框架，它提供了一套简洁、灵活且易于使用的指令，在 Vue 中，指令是特殊的属性，它们以 v开头，后面跟着一个或多个字母，用于绑定 DOM 元素上的特殊属性，本文将介绍 Vue 中常见的指令，包括内置指令和一些常用的第三方指令。

内置指令

1、v-bind

v-bind 是 Vue 中最基础的指令，用于实现数据绑定，通过 v-bind,我们可以将数据绑定到 HTML 属性上。

<img v-bind:src="imageSrc" />

2、v-on

v-on 是用于处理事件的指令，通过 v-on,我们可以将事件监听器绑定到 HTML 元素上。

<button v-on:click="handleClick">点击我</button>

3、v-model

v-model 是用于实现表单输入双向绑定的指令，通过 v-model,我们可以实时地将输入框的值与数据对象中的属性进行双向绑定。

<input v-model="message" />

4、v-if、v-else-if、v-else

这三个指令用于条件渲染，v-if 用于根据条件判断是否渲染元素；v-else-if 用于在 v-if 条件不满足时，根据另一个条件判断是否渲染元素；v-else 用于在所有条件都不满足时渲染元素。

<div v-if="condition1">条件1满足时显示</div>
<div v-else-if="condition2">条件2满足时显示</div>
<div v-else>条件都不满足时显示</div>

5、v-for

v-for 是用于遍历数组或对象的指令，通过 v-for,我们可以方便地为数组或对象的每个元素生成对应的 DOM 元素。

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

常用第三方指令

1、vue-router.js/vue-router@next 提供的 v-route 和 v-link 指令

这两个指令用于实现路由跳转，v-route 用于匹配路由路径，当路径匹配成功时，执行对应的组件；v-link 则用于创建一个链接，点击链接时触发路由跳转。

<router-link to="/home">首页</router-link>
<router-view></router-view>

2、vuex.js/vuex@next 提供的 v-mapState、v-mapGetters、v-mapMutations、v-mapActions 指令

这些指令用于简化 Vuex store 的使用，通过使用这些指令，我们可以将 store 中的 state、getters、mutations、actions 直接绑定到组件的计算属性、侦听器和方法上。

<p>{{ count }}</p>
<p>{{ fullName }}</p>
<button @click="increment">+1</button>

3、element-ui/element-ui@2.15.6 提供的 v-model 和 el-select、el-option、el-checkbox、el-radio 指令

这些指令是 Element UI 组件库的一部分，主要用于实现表单输入和下拉选择框等组件的双向绑定和自定义样式。

<el-select v-model="selected" placeholder="请选择">
  <el-option label="选项1" value="1"></el-option>
  <el-option label="选项2" value="2"></el-option>
</el-select>

4、axios/axios@0.21.1 提供的 v-axios 指令 (已废弃)

这个指令用于简化 axios 的使用，通过使用这个指令，我们可以方便地发送 GET、POST、PUT、DELETE 等请求，并自动处理响应数据。

<button @click="fetchData">获取数据</button>