温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue指令有哪些及怎么使用

发布时间:2022-12-13 09:44:43 来源:亿速云 阅读:118 作者:iii 栏目:互联网科技

今天小编给大家分享一下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 :属性="表达式"

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

<input :type="type" :disabled="disabled" />

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

v-on

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

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

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

<button @click="alert">有种你点我</button>

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

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

v-if

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

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

示例:

<p v-if="show">{{title}}</p>

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

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

示例:

<p v-if="student === 'll'">lili</p>
<p v-else-if="student === 'mm'">mingming</p>
<p v-else-if="student === 'hh'">hanhan</p>
<p v-else>无</p>

data: {
    student: 'mm'
}

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

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

v-show

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

语法:v-show="show"

示例:

<p v-show="show">{{title}}</p>

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

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

v-show和v-if的区别

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

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

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

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

<p v-if="show" class="if">{{title}}</p>
<p v-show="show" class="show">{{title}}</p>

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

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

vue指令有哪些及怎么使用

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

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

v-model

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

语法:v-model="value"

示例:绑定input的值为value,并当改变input的值的时候改变value的值

<div id="app">
    <p>{{value}}</p>
    <input type="text" v-model="value">
</div>

<script>
let config = {
  el: '#app',
  data: {
    value: '我是初始值'
  }
}
let vm = new Vue(config)
</script>

vue指令有哪些及怎么使用

value的值会与输入框的值绑定,且当编辑输入框的内容的时候也会修改value的值,这就是双向绑定。

双向绑定其实是一种语法糖,它主要有两个操作来实现:<input type="text" :value="value" @input="value=$event.target.value">

它基本的原理就是,先绑定元素的value值,然后监听input事件,当触发input事件后,改变value(data中)的值,从而实现双向绑定。但需要注意,这里只是说简单的实现,真实情况可能比这个复杂,不同的类型所使用的监听事件类似是不同的,但他们中心原理都是类似的,理解基础实现原理即可。

v-for

描述:用于循环列表。v-for指令最基本的功能就是用于渲染一些样式相对重复的dom,最常使用的就是列表

语法:v-for="item in list" :key="item.id"。v-for指令的表达式与普通表达不同,它基本是确定的,list是需要循环的数组,item则是list遍历的子元素。且不同其他指令,v-for还要搭配key来使用,这主要是为了做唯一标识的作用。item和list都是可以自定义的。比如你也可以写成v-for="data in datas" :key="data.id"

我们除了可以接收遍历的子元素的值,还可以接收遍历的序号:v-for="(item, i) in list" :key="i"

要点:将v-for指令绑定到需要循环渲染的元素中,有点类似js的 for in 的用法。并指定好key值。key一般是数据中的唯一值,如果实在没有唯一值,也可以用序号索引

示例:渲染名称列表,

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

<script>
let config = {
  el: '#app',
  data: {
    list: [{
      id: 1,
      name: 'lili'
    }, {
      id: 2,
      name: 'mingming'
    }]
  }
}
let vm = new Vue(config)

</script>

vue指令有哪些及怎么使用

以上就是“vue指令有哪些及怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI