文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue指令有哪些及怎么使用

2023-07-04 19:26

关注

今天小编给大家分享一下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最根本的区别在于显示和隐藏元素的方式。

示例:我们直接来看一下他们在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指令有哪些及怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯