前端学习——指令

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Amazon 实验②】使用Amazon WAF做基础 Web Service 防护之自定义规则

文章目录 1. 自定义规则1.1 介绍 2. 实验步骤2.1 测试2.2 输出 上一篇章介绍了使用Amazon WAF做基础 Web Service 防护中的Web ACLs 配置 & AWS 托管规则的介绍和演示操作 【Amazon 实验①】使用Amazon WAF做基础 Web Service 防护,本篇章将继续介绍关于自定义…

2009-2022年31省细分产品出口数据/按hs码分的22类细分产品的出口数据

2009-2022年31省细分产品出口数据/按hs码分的22类细分产品的出口数据 1、时间:2009-2022年 2、指标:时间、流向名称、商品编码、商品名称、伙伴名称、主题编码、方式名称、金额(美元) 3、来源:海关贸易统计数据/海关…

智能优化算法应用:基于骑手优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于骑手优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于骑手优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.骑手优化算法4.实验参数设定5.算法结果6.…

[SQL]实验 视图和索引的应用

实验目的: [实验目的和要求] 1、掌握视图的创建、修改和重命名的方法 2、掌握视图中数据的操作 3、了解索引的作用 4、掌握索引的创建方法 实验步骤: 1、在销售管理数据库中,创建一个女职工视图,包括员工的编号、姓名、性别、雇佣…

多标签分类中常用指标和可视化例子

多标签分类中常用指标 1. 准确率(Accuracy) 准确率计算的是正确预测的标签比例。对于多标签分类,这通常是一个较为严格的指标,因为要求每个实例的所有标签都预测正确。 Accuracy 正确预测的标签数 总标签数 \text{Accuracy} \…

Qt前端技术:5.QSS

这个是表示QFrame中的pushButton中的子类和它子类的子类都将背景变为red 写成大于的时候表示只有直接的子类对象才会变 这个图中的QGroupBox和QPushButton都是QFrame的直接的子类 这个中的QGroupBox是QFrame的直接的子类但是QPushButton 是QGroupBox的子类,QPushB…

3. 结构型模式 - 组合模式

亦称: 对象树、Object Tree、Composite 意图 组合模式是一种结构型设计模式, 你可以使用它将对象组合成树状结构, 并且能像使用独立对象一样使用它们 问题 如果应用的核心模型能用树状结构表示, 在应用中使用组合模式才有价值。 …

基于JavaWeb的个人健康信息管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本个人健康信息管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据…

laravel 对接支付,本地穿透问题

本地穿透有好多工具,参考链接:https://zhuanlan.zhihu.com/p/339923535 我这边是用的 NATAPP 官网:https://natapp.cn/ 客户端下载:https://natapp.cn/# NATAPP1分钟快速新手图文教程:https://natapp.cn/article/n…

打造完美有声书体验,Audiobook Builder for Mac助您一键生成

在快节奏的生活中,有声书成为越来越多人追求放松与娱乐的方式。然而,找到合适的有声书却不容易,而Audiobook Builder for Mac正是为解决这个问题而诞生的完美解决方案。 Audiobook Builder for Mac是一款专业的有声书生成工具,它…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)ChannelMap 模块的实现

(三)ChannelMap 模块的实现 这个模块其实就是为Channel来服务的,前面讲了Channel这个结构体里边它封装了文件描述符。假如说我们得到了某一个文件描述符,需要基于这个文件描述符进行它对应的事件处理,那怎么办呢&…

【分布式技术专题】「授权认证体系」深度解析OAuth2.0协议的原理和流程框架实现指南(授权流程和模式)

深度解析OAuth2.0协议的原理和流程框架实现指南 背景介绍OAuth1.0协议访问令牌案例分析 OAuth2.0OAuth2.0与OAuth1.0 OAuth2.0协议体系的Roles角色OAuth定义了四个角色资源所有者资源服务器客户端授权服务器 传统的客户机-服务器身份验证模型的问题协议流程 认证授权类型授权码…

Spring中你应该要知道的initMethod

文章目录 功能源码 功能 之前的文章中由解析过PostConstruct/PreDestroy,他们也是initMethod的一种形式,注解方式是后来才加入的,在源码中他们的命名都是一样的名字,都叫initMethod,不过他们却是有着很大的差别&#…

Java期末复习题之GUI

点击返回标题->23年Java期末复习-CSDN博客 第1题. 一、利用Swing包创建一个窗口,窗口位置为(220,160)、大小为320240,并在窗口(20,80)、(120,80)、(220,80)处各设置一个按钮,按钮大小为80 X 40。 点击左按钮将窗口背景的红色分量增加10&am…

C++哈希表的实现

C哈希表的实现 一.unordered系列容器的介绍二.哈希介绍1.哈希概念2.哈希函数的常见设计3.哈希冲突4.哈希函数的设计原则 三.解决哈希冲突1.闭散列(开放定址法)1.线性探测1.动图演示2.注意事项3.代码的注意事项4.代码实现 2.开散列(哈希桶,拉链法)1.概念2.动图演示3.增容问题1.拉…

互联网+建筑工地源码,基于微服务+Java+Spring Cloud +Vue+UniApp开发

一、智慧工地概念 智慧工地就是互联网建筑工地,是将互联网的理念和技术引入建筑工地,然后以物联网、移动互联网技术为基础,充分应用BIM、大数据、人工智能、移动通讯、云计算、物联网等信息技术,通过人机交互、感知、决策、执行和…

【YOLOV8预测篇】使用Ultralytics YOLO进行检测、分割、姿态估计和分类实践

目录 一 安装Ultralytics 二 使用预训练的YOLOv8n检测模型 三 使用预训练的YOLOv8n-seg分割模型 四 使用预训练的YOLOv8n-pose姿态模型 五 使用预训练的YOLOv8n-cls分类模型 <

序列化和反序列化对比分析,序列化和反序列化输出十个学生信息截图

序列化和反序列化是数据处理中的两个相对的概念&#xff0c;通常用于对象的存储和传输。下面是对这两个过程的对比分析&#xff1a; 序列化&#xff08;Serialization&#xff09; 定义 目的&#xff1a; 将对象的状态信息转换成可以存储或传输的形式&#xff08;如XML, JSO…

算数平均数、调和平均数、几何平均数的计算方法与应用场合

一 定义 1、算数平均数&#xff1a;又称均值&#xff0c;是统计学中最基本&#xff0c;最常用的一种平均指标&#xff0c;分为简单算术平均数、加权算术平均数。 2、调和平均数&#xff1a;又称倒数平均数&#xff0c;是总体各统计变量倒数的算数平均数的倒数。分为数学调和平…

Yolov5水果分类识别+pyqt交互式界面

Yolov5 Fruits Detector Yolov5 是一种先进的目标检测算法&#xff0c;可以应用于水果分类识别任务。结合 PyQT 框架&#xff0c;可以创建一个交互式界面&#xff0c;使用户能够方便地上传图片并获取水果分类结果。以下将详细阐述 Yolov5 水果分类识别和 PyQT 交互式界面的实现…