前端学习——指令

vue作为前端框架,为了简化或实现一些特定功能,提供了很多指令,那什么是指令呢?

所谓的指令就是能够完成特定功能的一些vue语法,比如属性绑定指令v-bind,事件绑定指令v-on,循环指令v-for等。在vue中,所有的指令都是v-开头的。

vue中最常用的指令有以下几种:

v-bind 属性动态绑定指令,通过v-bind可以实现html属性值的动态修改。如下图所示,a标签有href属性,就可以通过v-bind绑定动态数据,只需要修改data对象中的href的值,就可以实现修改超链接的跳转链接。并且v-bind指令由于使用频率比较高,所以可以使用其简写形式,也就是 冒号 :

v-on 事件绑定指令,

我们知识前端开发会有很多事件,比如点击事件,键盘事件等,之前使用js开发时,事件绑定是通过先获取dom节点,然后再给获取的节点绑定事件,也就是方法,而使用了v-on指令后,就可以直接在节点dom上绑定事件。

如下图所示,通过v-on绑定点击事件,当点击按钮时就会触发绑定的事件函数,而且由于v-on使用频率较高,所以也提供了简写形式 艾特符  @

v-for 循环指令

因为实际开发过程中会碰到很多循环遍历的需求,所以vue提供了v-for指令来遍历数据,遍历对象可以是数组,对象,字符串等。最常见的遍历就是数组,其次是对象。

v-for指令中提供了一个key属性,可能很多人认为key指令没什么用,或者说大部分时间都用不到key属性。但vue为什么提供了一个key属性呢?

那是因为vue是一款前端框架,它隔离了程序员之间操作dom的过程,按照vue的语法,vue框架自动实现操作dom的过程,但为了提升效率,vue使用了一个叫做虚拟dom的设计思想,既在vue的操作过程中,会先在内存中解析出一个虚拟dom,然后使用diff算法匹配虚拟dom和真实dom的区别,如果没有改变就不会修改真实dom ,如果不一样才会根据新的数据重新渲染dom节点。

说白了就是vue为了实现dom的复用,减少真实的dom操作,而用来进行diff算法时,所使用的一个key属性。

如果循环遍历的数据只是用来进行页面展示,那么使用key属性确实没什么用,但如果循环列表中的数据可能会被修改,这时使用key的作用就体现出来了。

key最好是使用唯一的数据标识,比如用户id,手机号,身份证号等,因为默认情况下key是使用索引作为唯一标识,但在数据修改和插入的过程中,数据的索引可能会被改变,比如在一个数组中的头部插入一条数据,这时之前索引为0的数据变成了索引为1的数据。

v-model 数据双向绑定

在一些表单项中,因为需要用户输入,所以可以v-model进行双向数据绑定。当给输入项设置v-model属性时,v-model设置的默认值就是输入项的值,如果用户输入新的值,那么v-model也能获取到最新的数据。

如下图所示,使用v-model 绑定给input输入框进行双向数据绑定,并设置默认值

默认值效果如下图:

当在输入框中重新输入新的值时,发现val的默认值已经被改变了,这就是数据的双向绑定。

如果不使用vue,使用原生js开发,那么输入框就要使用placeholder给输入框设置默认值,并且重新输入之后,需要重新根据数据框的id获取当前的值。

在text,checkbox,select这几种类型时,由于其属性不一样,所以vue引擎会根据不同的类型解析出不同的属性,正如官网所示:

所以,v-model在不同的html标签中有不同的效果,所以具体的使用需要多加注意,多学习,总结或者查看官方文档。

剩下其它的vue指令,相对来说用的就比较少,而且也比较简单,等使用的时候可以查看文档临时学习。

v-html,v-text,v-show,v-if,v-else-if

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/238506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Docker】升级docker或者docker到docker-ce完全保留镜像和容器,不影响原容器使用方法

升级docker或者docker到docker-ce完全保留镜像和容器,不影响原容器使用方法 一、介绍二、升级方法 三、遇到问题说明 以下是我的使用场景,docker升级到docker-ce,但对于docker-ce升级也通用!亲测! 一、介绍 CentOS自带…

AI中的强化学习是怎么做的呢?

1. 什么是强化学习 其他许多机器学习算法中学习器都是学得怎样做,而强化学习(Reinforcement Learning, RL)是在尝试的过程中学习到在特定的情境下选择哪种行动可以得到最大的回报。在很多场景中,当前的行动不仅会影响当前的rewar…

软文营销的重要性,媒介盒子为你解答

信息茧房环立且用户注意力稀缺的时代下,品牌方唯有在内容上精耕细作才能吸引用户。软文营销能够帮助公司吸引流量,建立与消费者的信任联系,同时增加转化并产生更多的业务。接下来媒介盒子就和大家聊聊:软文营销的重要性。 一、 可…

FFmpeg 版本gyan.dev和BtbN区别

在Windows系统上,Gyan.dev和BtbN都提供了FFmpeg的预编译版本。Gyan.dev通常使用MSVC编译器,而BtbN使用MinGW编译器。因此,Gyan.dev的版本可能会更符合Windows标准,而BtbN的版本可能会更加开放和跨平台。 各个版本的区别介绍 Gy…

BDD - Python Behave 入门

BDD - Python Behave 入门 Behave 是什么Behave 的主要特点和组成部分Behave 实践安装 BehaveBehave 项目目录结构创建项目创建 Feature 文件创建步骤定义文件 执行用例执行全部用例执行部分用例 生成报告生成 Json report生成 HTML 报告生成 Junit report生成 Cucumber report…

老师的责任和义务

作为一名老师,我们的责任和义务是重大的。在教育领域,我们扮演着至关重要的角色,肩负着培养下一代人才的重任。下面,我将以知乎的口吻,从几个方面谈谈老师的责任和义务。 确保学生获得高质量的教育。这包括制定合理的教…

广州华锐互动:船舶安全事故3D虚拟还原系统模拟海上事故发生,帮助员工提高安全意识

随着科技的不断发展,人们对于安全问题的关注度越来越高。在船舶行业中,由于船舶的特殊性和复杂性,船舶事故的发生往往会造成严重的人员伤亡和财产损失。为此,船舶安全事故3D虚拟还原系统应运而生,为船舶安全管理和培训…

AAAI2024 | 论文接受列表,含全部论文下载(持续更新......)

来源: AINLPer公众号(每日干货分享!!) 编辑: ShuYini 校稿: ShuYini 时间: 2023-12-22 引言 AAAI2024将在2024年2月22日召开,目前接受论文正不断的被公布出来。 下面是作者整理的论文接受列表,因平台限制不…

GPTs | Actions应用案例

上篇文章说道,如何使用创建的GPTs通过API接口去获取外部的一些信息,然后把获取的外部信息返回给ChatGPT让它加工出来,回答你的问题,今天我们就来做一个通俗易懂的小案例,让大家来初步了解一下它的使用法! …

其实,BI数据分析远比你想象的简单

BI数据分析远比你想象中的简单。以前的数据分析要IT取数开发报表,现在的BI数据分析,业务人自己就能在平台上精准取数并开发报表,甚至奥威BI大数据分析工具还能提供标准化BI方案,0开发,开箱即得百张BI报表,完…

Go语言基础:深入理解结构体

Go语言基础:深入理解结构体 引言:Go语言与结构体的重要性结构体的定义与声明结构体与方法结构体的嵌入与匿名字段结构体的继承与多态性结构体与性能优化结论:结构体在Go中的应用场景 引言:Go语言与结构体的重要性 在当今迅速发展…

FreeRTOS之任务状态查询

1、相关API函数的使用 uxTaskPriorityGet(Task1Task_Handler);//传入task1的任务句柄,获取任务优先级 vTaskPrioritySet(Task1Task_Handler,30);//改变任务优先级 task_num uxTaskGetNumberOfTasks();//获取任务数量 #include "sys.h" #include "delay.h"…

chatgpt的apikey(openai apikey)如何获取

话不多说,上链接 https://platform.openai.com/api-keys

mysql SQL执行超时问题

show variables like max_execution_time 使用这个命令查看了,没有设置sql执行超时时间,那么大概率问题就出在阿里的Druid数据库连接池出了问题 尝试着socketTimeout由60000毫秒改成10000毫秒,果然执行了十几秒就超时报错了 socketTime…

做软件开发,谨防天上掉馅饼

今天来讲讲普通人眼里的软件开发。 我是一家软件开发公司的部门负责人,专注软件开发五年。经我手过的客户也有个百八十。有时候真的挺纳闷的,有些人准备话几百块甚至不到一千块就想做个系统,到底是怎么想的咱也不清楚。 就简单的说现在招两个…

BWS2000倾角传感器c++测试代码_时间延迟与时间同步问题【3】

详见昨天做的测试代码,代码网址:BWS2000倾角传感器c测试代码【2】-CSDN博客文章浏览阅读268次,点赞7次,收藏8次。倾角传感器测试与编写思路https://blog.csdn.net/m0_47489229/article/details/135128748 问题一:新的…

NVIDIA NCCL 源码学习(十二)- double binary tree

上节我们以ring allreduce为例看到了集合通信的过程,但是随着训练任务中使用的gpu个数的扩展,ring allreduce的延迟会线性增长,为了解决这个问题,NCCL引入了tree算法,即double binary tree。 double binary tree 朴素…

windows 动态库和静态库 介绍

在Windows平台上,动态库和静态库都是用于组织和共享代码的方式。这些库文件的扩展名和用途有一些区别。 1. 静态库和动态库 静态库(Static Library): 文件扩展名:.lib在编译链接时,静态库的代码被直接嵌入…

八:爬虫-MySQL基础

一:MySQL数据库基础 1.MySQL数据库介绍 MySQL是一个[关系型数据库管理系统],由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Rela…

数据结构 | 北京大学期末试卷查漏补缺

目录 顺序存储 优点 缺点 适用于: 链式存储 优点 缺点 适用于: 折半查找为什么要使用顺序存储结构 树的存储结构​编辑 对于一个数据结构,一般包括 DFS&BFS 什么是递归程序 C语言不带头结点的单链表逆置 检测字符…