vue指令有哪些及怎么使用

今天小编给大家分享一下vue指令有哪些及怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联公司专注于安康企业网站建设,成都响应式网站建设公司,成都做商城网站。安康网站建设公司,为安康等地区提供建站服务。全流程按需求定制设计，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

vue指令以“v-”开头。在Vue中，指令是作用于HTML元素的带有“v-”前缀的特殊特性；指令的作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，因此可以将指令看作特殊的HTML特性（attribute）。

vue.js指令是什么？作用是什么？

Vue.js指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。

Vue.js作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

指令的作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

每个指令都有自己的用途，当其绑定的表达式发生改变的时候，会响应式的影响dom的变化。而变化的具体则是看每个指令其本身的用途。比如v-bind指令是绑定属性值，当绑定的表达式发生改变，dom上属性的值也会发生对应的改变。

指令的语法是：v-指令:参数="表达式"（参数并不是绝对需要的）

参数

:后面跟着的就是参数，但并不一定所有的指令都会有参数，只有特定的指令会需要参数，这是由于指令的性质决定的。这里的参数和函数的参数是类似的，就好比我这个指令需要对应的参数才能使功能生效。

拿v-bind:type="type"来说，v-bind指令用于绑定属性值，那么需要绑定什么属性呢，光靠这个指令无法确定，所以需要参数来进一步确定。也就是v-bind:type，冒号后面跟着的type就是传入指令中的参数。告诉指令，我要绑定属性type和表达式的关联。

上面我们也说了，并不是所有的指令都需要参数。比如v-html指令，这个指令是绑定元素内部的html，功能点已经非常明确，不需要额外的参数去确定，只需要指令和表达式即可完成指令的功能。

表达式

""引号内的值就是表达式，表达式一般可以是一个可执行的js表达式。它与指令本身是有绑定关联的，类似传入指令的值。并且当表达式内的响应式数据发生变化，也会引发dom的变化。

常用的指令

指令一般都是vue内嵌实现的，我们只需要用就可以了。vue中是可以自定义指令的，但这不是我们本节的重点。接下来主要说说一些常用指令的用法和注意点。

v-bind

描述：绑定dom属性，绑定表达式与dom属性

语法：v-bind:属性="表达式" or :属性="表达式"

示例： 绑定输入框的类型为数值类型且禁用

data: {
    type: 'number',
    disabled: true
}

v-on

描述：绑定事件，监听dom上的事件，并绑定回调函数

语法：v-on:事件名="回调函数" or @事件名="回调函数"。事件绑定指令的表达式一般是回调函数，且该函数接受一个参数$event。当绑定的事件被触发就会执行绑定的函数

示例：当点击按钮的时候弹出对话框

有种你点我

methods: {
    alert($event) {
        alert('有种你打我呀！')
    }
}

事件绑定的函数一般是在methods中定义的函数，但这边并不是绝对的。对于实例上存在的函数，都可以作为事件绑定的回调函数。

v-if

描述：dom元素显示判断，当表达式为真的时候，显示dom元素，否则销毁dom

语法：v-if="表达式"。只要表达式不一定必须是true，只要能判断为真即显示dom元素

示例：

{{title}}


data: {
    show: true
    title: 'v-if的用法'
}

除此之外，v-if还可以和v-else-if、v-else搭配使用，其逻辑和js中的if、else if、else是类似的，都是由上至下的执行指令，当指令的表达式为真的时候则该指令生效，显示该dom操作，然后不再执行后续的判断

示例：

lili

mingming

hanhan

无


data: {
    student: 'mm'
}

当判断到第二个条件成立后，即显示dom元素，并不再继续向下执行，v-else不需要表达式判断，若以上情况都不满足该指令执行。

这里需要注意的是，这里的显示更像是初始化，当每次判断为真后都会初始化该元素，而判断为假则会销毁该元素。所以使用v-if类的指令对dom的操作开销较大，会在一定程度上影响性能。

v-show

描述：dom元素显示判断，当表达式为真的时候，显示dom元素，否则隐藏dom。 看到这里，是不是发现和v-if很相似呢？从功能上看是的，但从实现原理来说这两个则完全不同，这个我们后面在讨论。

语法：v-show="show"

示例：

{{title}}


data: {
    show: true
    title: 'v-if的用法'
}

当表达式为真的时候则显示元素，否则则隐藏元素。

v-show和v-if的区别

v-show和v-if最根本的区别在于显示和隐藏元素的方式。

• v-show是采用样式的方式控制元素的显示和隐藏，也就是我们常用的display: none，此时虽然元素是隐藏状态，但在html代码中还是存在的。

• v-if则是通过直接控制元素代码的方式在控制显示和隐藏。也就是说当元素隐藏的时候，该元素本身在html是不存在的。所以v-if的显示和隐藏，我更喜欢用初始化和销毁来描述。

示例：我们直接来看一下他们在html中的表现形式，因为在显示的情况下，他们几乎看不出区别，所以这里我们隐藏来看看他们之间的差异。

{{title}}

{{title}}


data: {
    show: false
    title: 'v-if的用法'
}

为了更直观，我为两个元素打上标识

可以看到v-if的html代码是通过注释符替代现隐藏元素，而v-show则是通过css样式display: none来隐藏元素。

这两种控制元素显隐方式各有优劣，适用于不同的场景。这里暂时不详细说，大家有兴趣也可以去了解一下，后面我也会针对这点去展开说说。

v-model

描述：数据双向绑定，这个指令多用于需要绑定值和修改值的操作，比如输入框

语法：v-model="value"

示例：绑定input的值为value，并当改变input的值的时候改变value的值

    
{{value}}