前端学习——指令

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,一经查实,立即删除!

相关文章

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

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

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

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

BDD - Python Behave 入门

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

老师的责任和义务

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

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

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

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"…

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 朴素…

八:爬虫-MySQL基础

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

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

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

window10下载与安装Dubbo Admin,图文说明

0,前言 在学习这篇文章之前,可以先把zookeeper安装一下 安装教程指路:window10下载与安装zookeeper,图文说明 1,下载 拉取代码,一般教程都会让我去github官网拉取,但是因为该网站经常打不开…

如何在小程序中添加字符

随着移动互联网的普及,微信小程序已经成为众多商家的首选。通过微信小程序,商家可以展示产品、服务和品牌形象。那么如何在微信小程序中添加视频内容呢?本文将详细介绍操作步骤。 首先,商家需要登录乔拓云平台,进入门店…

MongoDB 单机安装部署

文章目录 说明1. 下载安装包2. 安装数据库3. 配置 systemctl4. 创建 root 用户 说明 本篇文章介绍 MongoDB 二进制安装的步骤,整个过程还是比较简单。 1. 下载安装包 进入 MongoDB 官网,获取安装包的下载链接: https://www.mongodb.com/tr…

安全运维是做什么的,主要工作内容是什么

安全运维,简称SecOps,是一种集成安全措施和流程到信息技术运维的实践。它的目的是确保在日常运维活动中,如网络管理、系统维护、软件更新等,均考虑并融入安全策略。安全运维的核心是实现安全和运维团队的密切协作,以快…

【自动化测试】selenium元素定位方式大全!

前言 当我们在使用selenium进行自动化测试工作时,元素定位是非常重要的一环,因为我们是借助脚本模拟我们通过鼠标和键盘对元素进行点击、输入内容和滑动操作的,所以准确的元素定位是我们执行测试脚本的重要一环。本文就来给大家介绍一下sele…

竞赛保研 基于CNN实现谣言检测 - python 深度学习 机器学习

文章目录 1 前言1.1 背景 2 数据集3 实现过程4 CNN网络实现5 模型训练部分6 模型评估7 预测结果8 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 基于CNN实现谣言检测 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐&am…