前端学习——指令

news2025/1/18 11:49:34

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.coloradmin.cn/o/1331224.html

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

相关文章

题目基础算法蓝桥真题

真题《空间》 内容提取&#xff1a;1个字节等于8个比特 32位二进制中为32bits4Bytes&#xff0c;题目里的256MB256*2**20Bytes 所以化完单位后直接相除等于64*2**20Bytes。 代码 其中2的20次方可以用(1<<20)表示 蓝桥杯中一般不用pow函数有误差或时间长 endl也不用…

P2 H264码流结构分析——Annexb与MP4格式的区别 (中)

目录 前言 01 Annexb格式 02 RTP格式&#xff08;也叫MP4格式&#xff09; 前言 从本章开始我们将要学习嵌入式音视频的学习了 &#xff0c;使用的瑞芯微的开发板 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &am…

干洗店预约上门取货小程序与互联网洗鞋店小程序开发制作功能方案

干洗店预约上门取货小程序与互联网洗鞋店小程序开发制作功能方案 一、洗衣洗鞋店小程序功能 1. 预约订单&#xff1a;忙碌时&#xff0c;您可以使用预约功能轻松获取洗衣服务。 2. 在线下单&#xff1a;用户可直接通过小程序在线下单&#xff0c;享受专人上门取货与配送服务。…

钓鱼实战篇

之前说的只是一些点&#xff0c;真正的攻击是需要自己针对目标定制一套适用的钓鱼方式的。 这里提了提高成功率&#xff0c;我选取了我们班某位可爱的同学作为测试&#xff0c;首先通过一些话语让她产生好奇心。 然后制作一个类似的求爱视频的网站给她: 后面通过发送网址给她:…

【零基础入门Docker】什么是Dockerfile Syntax

✍面向读者&#xff1a;所有人 ✍所属专栏&#xff1a;零基础入门Docker专栏https://blog.csdn.net/arthas777/category_12455882.html 目录 编写Dockerfile和Format的语法 2. MAINTAINER 3. RUN 4. ADD 6. ENTRYPOINT 7. CMD 8. EXPOSE 9. VOLUME 11. USER 12. ARG …

【数据结构入门精讲 | 第十篇】考研408排序算法专项练习(二)

在上文中我们进行了排序算法的判断题、选择题的专项练习&#xff0c;在这一篇中我们将进行排序算法中编程题的练习。 目录 编程题R7-1 字符串的冒泡排序R7-1 抢红包R7-1 PAT排名汇总R7-2 统计工龄R7-1 插入排序还是堆排序R7-2 龙龙送外卖R7-3 家谱处理 编程题 R7-1 字符串的冒…

Unreal5.3 PCG 笔记

目录 ElectricDreams场景功能移动中间山体向周围随机生成倒下的树干树干上随机生成的植被 ElectricDreams场景功能 移动中间山体向周围随机生成倒下的树干 配置内容 中心山体Spline周围沟渠Spline&#xff08;土堆&#xff09;PCG规则 主要功能节点 SplineSample&#xff08;…

屏幕颜色吸取器

前言 屏幕颜色吸取器。 前端工程师的福音&#xff0c;获取全屏幕上所有位置的颜色。 运行在window上的软件 屏幕颜色吸取器 前言1 下载解压2 使用 1 下载解压 下载地址&#xff1a;https://download.csdn.net/download/qq_44850489/11943229 下载下来之后解压 如下图&#…

【SVN】centos7搭建svn--亲测能通

centos7.6搭建svn 1 知识小课堂1.1 CentOS1.2 SVN 2 搭建过程2.1 前期准备2.2 通过yum命令安装svnserve2.3 创建版本库目录2.4 创建svn版本库2.5 配置修改2.5 防火墙配置2.6 启动或关闭svn服务器2.6.1 进程守护2.6.2 检测svn端口3690是否已经监听&#xff1a;2.6.3 关闭SVN 2.7…

计算机组成原理——指令系统41-60

41、下列哪种指令不属于程序控制指令&#xff08;C&#xff09;。 A、 无条件转移指令 B、 条件转移指令 C、 中断隐指令 D、 循环指令 42、下列关于一地址运算类指令的叙述中&#xff0c;正确的是&#xff08;B&#xff09;。 A、 仅有一个操作数&#xff0c;其地址由指令…

Linux多线程:线程池(单例),读写锁

目录 一、线程池&#xff08;单例模式&#xff09;1.1 makefile1.2 LockGuard.hpp1.3 log.hpp1.4 Task.hpp1.5 Thread.hpp1.6 ThreadPool.hpp1.7 main.cc 二、STL,智能指针和线程安全2.1 STL中的容器是否是线程安全的?2.2 智能指针是否是线程安全的? 三、其他常见的各种锁四、…

讲座思考 | 周志华教授:新型机器学习神经元模型的探索

12月22日&#xff0c;有幸听了南京大学周志华教授题为“新型机器学习神经元模型的探索”的讲座。现场热闹非凡&#xff0c;大家像追星一样拿着“西瓜书”找周教授签名。周教授讲得依旧循循善诱&#xff0c;由浅入深&#xff0c;听得我很入迷&#xff0c;故作此记。 周教授首先就…

大语言模型的三种主要架构 Decoder-Only、Encoder-Only、Encoder-Decoder

现代大型语言模型&#xff08;LLM&#xff09;的演变进化树&#xff0c;如下图&#xff1a; https://arxiv.org/pdf/2304.13712.pdf 基于 Transformer 模型以非灰色显示&#xff1a; decoder-only 模型在蓝色分支&#xff0c; encoder-only 模型在粉色分支&#xff0c; encod…

关于Triple DES(3DES)对称加密算法

一、引言 在网络安全领域&#xff0c;对称加密算法作为一种常见的加密手段&#xff0c;被广泛应用于保障数据传输的保密性和完整性。其中&#xff0c;DES&#xff08;Data Encryption Standard&#xff09;算法作为一种经典的对称加密算法&#xff0c;由IBM于1970年代开发&…

041_小驰私房菜_MTK平台添加支持通过原生Camera API接口调用UsbCamera

平台:MTK 问题:通过调用Android Camera API去调用UsbCamera,需要做哪些修改? Google官方文档,关于usbcamera的支持: 外接 USB 摄像头 | Android 开源项目 | Android Open Source Project 相关修改内容如下: 一、MTK平台支持通过标准接口打开USB Camera 1)device相…

铭飞CMS cms/content/list接口存在SQL注入 附POC

@[toc] 铭飞CMS cms/content/list接口存在SQL注入 附POC 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用…

OSI 七层参考模型及TCP/IP 四层模型

OSI 七层参考模型 七层模型&#xff0c;亦称 OSI &#xff08; Open System Interconnection &#xff09;参考模型&#xff0c;即开放式系统互联。参考模型是国际标准化组织&#xff08;ISO &#xff09;制定的一个用于计算机或通信系统间互联的标准体系&#xff0c;一般称为…

红队打靶练习:DIGITALWORLD.LOCAL: MERCY V2

目录 信息收集 1、arp 2、netdiscover 3、nmap 4、nikto 5、whatweb 6、总结 目录探测 1、gobuster 2、dirsearch WEB enum4linux枚举工具 smbclient工具 knock工具 CMS 文件包含漏洞 Tomcat 提权 系统信息收集 本地提权 get root 信息收集 1、arp ┌──…

解决用Fiddler抓包,网页显示你的连接不是专用/私密连接

关键&#xff1a;重置fiddler的证书 在Fiddler重置证书 1、Actions --> Reset All Certificates --> 弹窗一路yes 2、关掉Fiddler&#xff0c;重新打开 3、手机删掉证书&#xff0c;重新下载安装。 &#xff08;如果还不行&#xff0c;重新试一遍&#xff0c;先把浏览器…

stable diffusion工作原理

目录 序言stable diffusion能做什么扩散模型正向扩散逆向扩散 如何训练逆向扩散 Stable Diffusion模型潜在扩散模型变分自动编码器图像分辨率图像放大为什么潜在空间可能存在&#xff1f;在潜在空间中的逆向扩散什么是 VAE 文件&#xff1f; 条件化(conditioning)文本条件化&am…