Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios

news2024/11/13 15:05:08

什么是Vue?

Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/

Vue快速入门

打开页面,可以看到输入框中内容即为绑定的vue对象中的message内容,输入框外的内容为message内容,如果改变输入框中内容,相应的后面的内容也会改变,即完成双向绑定

常用指令

指令:HTML标签上带有 V-前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for...
常用指令

v-bind

为HTML标签绑定属性值,如设置href,css样式等

将a标签中的地址href绑定上vue对象中url的值

v-model

在表单元素止创建双向数据绑定,案例即上述快速入门中的案例

v-on

为HTML标签绑定事件

v-if、v-else-if、v-else、v-show

v-if

v-show

将一个输入框的内容与vue对象的age值双向绑定,然后根据这个值判断,为年轻人,还是中老年人去渲染内容显示。

输入框中此时为20,则渲染出年轻人的文本内容。更改文本框的年龄,会对应的显示出不同的内容

v-show也是类似的操作,不过该方式条件不成立时在页面源码中还有相应的文本内容,只不过是通过display属性为none而让相应的文本不显示,v-if是条件不符合直接不渲染,页面源码中就没有相应内容

v-for

列表渲染,遍历容器的元素或者对象的属性

v-for可以把vue中addrs数组遍历一下,每个用addr接并显示在文本中

遍历的时候索引也可以接住,顺便显示出每个元素的索引

案例:通过Vue完成表格数据的渲染展示

表格html代码

要渲染的数据在vue对象中的users对象中

表格未渲染数据前的样子

在tr标签中对users数据进行遍历

渲染完数据后的表格

生命周期

生命周期:指一个对象从创建到销毁的整个过程。。
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。

mounted:挂载完成,Vue初始化成功,HTML页面染成功。(发送请求到服务端,加载数据)

Ajax

概念:Asynchronous JavaScript And XML,异步的JavaScript和XML.

●作用:
数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。

原生Ajax
1.准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
2.创建XMLHttpRequest对象:用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据

用该网址制造一些服务器能提供的数据,当请求这个网址时,可以模拟对后端相应接口请求后获取到相应数据。

Axios

介绍:Axios 对原生的Ajax进行了封装,简化书写,快速开发。
官网:https://www.axios-http.cn/

Axios入门

也可用一种更简化的方式发送请求

案例:基于Vue及Axios完成数据的动态加载展示

1.数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list

2.在页面加载完成后,自动发送异步请求,加载数据,染展示页面(性别:1代表男,2代表女)。

先把vue和axios的js文件引入页面

创建一个vue对象与该表格进行绑定

原始表格

在钩子函数中用axios发送数据请求,结果用emps对象接着,该请求在vue完成绑定时就发起了

遍历emps内容,将相应信息填到表格中去

请求到数据后,表格被渲染后的样子

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

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

相关文章

rce漏洞试试看 buuctf的pingpingping 试试ctf的rce怎么样

打开靶机开始操作 然后我们先知道一些知识点:下面这些是常用的 |这个管道符也就是上一条的命令的输出结果作为下一条命令的输入;这个是跟sql的堆叠注入是一样的|| || 当前面的执行出错时(为假)执行后面的 & 将任务置于后台执…

R语言绘图 --- 桑基图(Biorplot 开发日志 --- 5)

「写在前面」 在科研数据分析中我们会重复地绘制一些图形,如果代码管理不当经常就会忘记之前绘图的代码。于是我计划开发一个 R 包(Biorplot),用来管理自己 R 语言绘图的代码。本系列文章用于记录 Biorplot 包开发日志。 相关链接…

从Log4j和Fastjson RCE漏洞认识jndi注入

文章目录 前言JNDI注入基础介绍靶场搭建漏洞验证注入工具 log4j RCE漏洞分析漏洞靶场检测工具补丁绕过 Fastjson RCE漏洞分析漏洞靶场检测工具补丁绕过 总结 前言 接着前文的学习《Java反序列化漏洞与URLDNS利用链分析》,想了解为什么 Fastjson 反序列化漏洞的利用…

如何制定工程战略

本文介绍了领导者如何有效制定工程战略,包括理解战略核心、如何收集信息并制定可行的策略,以及如何利用行业最佳实践和技术债务管理来提升团队效能和产品质量。原文: How to Build Engineering Strategy 如果你了解过目标框架(如 OKR&#xf…

引人入胜的教育视频

对于一家专注于数字自动化和能源管理的跨国公司,我们制作了引人入胜的教育视频,帮助房主选择适合他们需求的电气产品。我们的团队审查并定稿文本,录制并编辑配音,选择背景音乐,设计图形,并制作了演示如何安…

MPB | 葛体达组-原位酶谱法高分辨率实时检测土壤微界面酶活分布

原位酶谱法高分辨率实时检测土壤微界面酶活分布 High resolution real-time detection of soil enzyme activity distribution by in situ zymography 魏晓梦1, 2、魏亮1, 2、郝存抗1, 2、祝贞科1, 2、吴金水1, 2、葛体达1, 2, * 1中国科学院亚热带农业生态研究所,中…

04-认识微服务-SpringCloud

04-认识微服务-SpringCloud 1.SpringCloud: 1.SpringCloud是目前国内使用最广泛的微服务框架。官网地址:https://spring.io/projects/spring-cloud 2.SpringCloud集成了各种微服务功能组件,并基于SpringBoot实现了这些组件的自动装配&…

Vue3学习记录第三天

Vue3学习记录第三天 背景说明学习记录Vue3中shallowReactive()和shallowRef()Vue3中toRaw()和markRaw()前端...语法Vue3中readonly()和shallowReadonly()函数 背景 之前把Vue2的基础学了, 这个课程的后面有简单介绍Vue3的部分. 学习知识容易忘, 这里仅简答做一个记录. 内容都很…

10-Feign-最佳实践分析

10-Feign-最佳实践分析 1.Feign的最佳实践: 方式一(继承):给消费者的FeignClient和提供者的controller定义统一的父接口作为标准。 ​ 服务紧耦合 ​ 父接口参数列表中的映射不会被继承下来 Spring官方不推荐这种方式: ​ 我们一般不推荐去共享接口在服务端和客户端…

【web性能】什么是图层?图层创建的条件?

CSS图层 浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。在渲染DOM的时候,浏览器所做的工作实际上是: 获取DOM后分割为多个图层;对每个图层的节点计算样式结果…

数据结构和算法之数组和链表

一、数组 数组是一种线性数据结构,它是由一组连续的内存单元组成的,用于存储相同类型的数据。在JavaScript中,数组可以包含任意类型的数据,不只限于基本数据类型。 1.存储方式 在内存中,数组的元素是连续存储的&…

Java 期末复习 习题集

💖 单选题 💖 填空题 💖 判断题 💖 程序阅读题 1. 读代码写结果 class A {int m 5;void zengA(int x){m m x;}int jianA(int y){return m - y;} }class B extends A {int m 3;int jianA(int z){return super.jianA(z) m;} …

【内存管理】页表映射

页表的一些术语 现在Linux内核中支持四级页表的映射,我们先看下内核中关于页表的一些术语: 全局目录项,PGD(Page Global Directory) 上级目录项,PUD(Page Upper Directory) 中间目…

Python openpyxl 库使用详解

大家好,当谈论处理 Excel 文件时,Python 的 openpyxl 库无疑是一个强大而灵活的工具。无论是在数据分析、报告生成还是自动化任务中,openpyxl 都展现出了其独特的价值。本文将详细介绍 openpyxl 库的各种功能和用法,帮助读者掌握如…

在idea中创建Scala项目教程

1.下载Scala支持插件 文件-设置-插件-marketplace 搜索Scala 下载 2.创建项目 文件-新建-项目-新项目-构建系统maven 3.创建Scala目录 Scr-main(右键)-新建-目录(Scala回车键)-scala(右键)-将项目标记为-源代码根目录 4.对当前项目引入Scala支持 未添…

mysql设置允许外部ip访问,局域网IP访问

(支持MYSQL8版本) 1. 登录进入mysql;mysql -uroot -p输入密码进入 2. 输入以下语句,进入mysql库,查看user表中root用户的访问 use mysql; select host,user from user; 3. 更新user表中root用户域属性&#xff0c…

CST Studio Suite 2020 软件安装教程、安装包下载

CST Studio Suite 2020 安装教程 安装包下载 复制链接在浏览器打开 https://www.qqres.com/3150.html CST Studio Suite 是由Dassault Systmes公司开发的一套电磁场仿真软件。它应用于电子、通信、天线设计、射频与微波、电磁兼容性 (EMC)、电磁干扰 (EMI) 等领域。 CST St…

C++笔试-剑指offer

剑指offer 文章目录 剑指offer数组[数组中重复的数据 ](https://leetcode.cn/problems/find-all-duplicates-in-an-array/description/)将元素交换到对应的位置 二维数组中的查找二叉搜索树 旋转数组的最小数字二分查找 数组中出现次数超过一半的数字相互抵消 连续子数组的最大…

【Python Cookbook】S02E03 fnmatch 模块做字符串匹配

目录 问题解决方案讨论 问题 在不同的操作系统下,怎样做字符串匹配? 解决方案 fnmatch() 模块提供两个函数,fnmatch() 以及 fnmatchcase() 可以用来执行做这样的匹配。 from fnmatch import fnmatch, fnmatchcasematch_res fnmatch(foo.…

TikTok Shop账号需要防关联吗?

在TikTokShop作为新兴的电商销售渠道中,保护账号的安全和隐私,防止账号关联成为了重要的任务。为了更好地理解为何需要防关联以及如何进行防范,让我们深入探讨一下这个问题。 为什么要防关联? 1. 账号异常风险:防关联…