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

什么是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.mzph.cn/bicheng/25758.shtml

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

相关文章

MySQL事务,视图,用户管理学习笔记【事务概念 | 事务隔离级别 | 设置级别 | 视图 | 用户管理】

博客主页:花果山~程序猿-CSDN博客 文章分栏:MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习,一起进步,一起探索编程的无限可能吧!让我们一起努力,一起成长! 目录 一,事务初…

面试杂谈之clickhouse

clickhouse 之前定时任务读取binlog 批量同步clickhouse kafka 批量给clickhouse灌数据 clickhouse列式数据库,运行时创建库表,加载数据查询数据压缩,磁盘存储,向量化引擎,利用CPU多核并行处理缺少完整的update/del…

【SQL】牛客网SQL非技术入门40道代码|练习记录

跟着刷题:是橘长不是局长哦_哔哩哔哩_bilibili 6查询学校是北大的学生信息 select device_id, university from user_profile where university 北京大学 7查找年龄大于24岁的用户信息 select device_id, gender, age, university from user_profile where age…

开源低代码平台技术为数字化转型赋能!

实现数字化转型升级是很多企业未来的发展趋势,也是企业获得更多发展商机的途径。如何进行数字化转型?如何实现流程化办公?这些都是摆在客户面前的实际问题,借助于开源低代码平台技术的优势特点,可以轻松助力企业降低开…

设计模式-装饰器模式(结构型)

装饰器模式 装饰器模式是一种结构模式,通过装饰器模式可以在不改变原有类结构的情况下向一个新对象添加新功能,是现有类的包装。 图解 角色 抽象组件:定义组件的抽象方法具体组件:实现组件的抽象方法抽象装饰器:实现…

沐风老师3DMAX一键多孔结构建模插件Porous使用方法

​3DMAX一键多孔结构建模插件Porous使用教程 3dMax是大家熟知的3D建模软件之一,其功能非常的强大,在科研绘图领域有着非常广泛的应用,但是由于科研绘图的图形(模型)一般都属于异形结构,手工绘制建模&#x…

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

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

Docker核心架构原理的深入分析

一、前言 由于平常工作中对Docker使用还是比较频繁的,但是一般都是基础的功能使用,并未对其核心架构原理做梳理,因此抽空简单总结一下这玩意的一些核心概念点知识,以备后面求职工作时可以更为深入地了解这个容器化工具。 二、Do…

springboot与flowable(2):流程部署

一、创建项目 创建springboot项目添加相关依赖。 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.…

Upscayl:款利用人工智能技术,深度学习算法,实现图像无损放大和增强的强大工具。

Upscayl AI&#xff1a; Upscayl AI是一款基于先进的人工智能技术&#xff0c;特别是深度学习算法开发的图像增强工具。它能够智能地分析并改善图像质量&#xff0c;实现无损放大、细节重建和模糊消除&#xff0c;让老旧、低分辨率或模糊的照片焕发新生&#xff0c;达到高清画…

工程师 - VMware workstation pro个人版现已免费

May 13, 2024 VMware 桌面虚拟机管理程序(VMware Desktop Hypervisors) 使用行业标准桌面管理程序 VMware Workstation Pro for Windows 和 Linux 或 VMware Fusion for Mac 运行 Windows、Linux 和其他虚拟机。 Run Windows, Linux and other virtual machines with VMware Wo…

「51媒体」江苏媒体宣传报道,邀请媒体报道资源汇总

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 江苏作为中国东部的重要省份&#xff0c;拥有丰富的媒体资源&#xff0c;包括电视台、广播电台、报纸以及网络媒体。 电视台 江苏卫视&#xff1a;作为江苏省唯一的省级卫视台&#xff…

Java面试_数据库篇_优化,事务,Mysql

Java面试_数据库篇_优化,事务,Mysql 优化如何定位慢查询方案一: 开源工具方案二: Mysql自带慢日志 如何分析慢SQL语句索引介绍索引聚簇索引和非聚簇索引&#xff0c;回表查询覆盖索引&#xff0c;超大分页优化索引创建的原则索引失效 谈谈sql优化的经验 事务事务特性隔离级别un…

system 和 exec 的区别

在 linux 中&#xff0c;使用 system 和 exec 都可以执行一个程序或者执行一个命令。两者的区别如下&#xff1a; system 中创建了一个子进程&#xff0c;在子进程中执行用户的命令&#xff0c;子进程执行完毕之后&#xff0c;system 会返回。exec 不会创建子进程&#xff0c;…

跟着大佬学RE(六)

findKey 嗯&#xff0c;就是一个窗口程序&#xff0c;没有输入&#xff0c;flag 应该就藏在程序里面 第一遍自己直接莽做&#xff0c;在string窗口&#xff0c;找到 flag{} 看到标红直接 nop 然后&#xff0c;然后就不知道怎么搞了 这串字符提示不能随便 nop &#xff0c;重新…

虚幻引擎5 Gameplay框架(五)

Gameplay重要类及重要功能使用方法&#xff08;四&#xff09; DeveloperSetting DeveloperSetting是在虚幻引擎中是一个基类&#xff0c;主要用于创建和管理开发者设置相关的类。这类设置允许开发者自定义或调整项目中的各种配置选项&#xff0c;而无需直接修改代码或构建设置…

大模型应用开发框架LangChain

LangChain是什么&#xff1f; 它是针对大语言模型开发的一个开源的抽象框架。下图以github的流行度为例&#xff0c;可以看到langchain在很短的时间流行度达到Pytorch框架的高度&#xff0c;在AI燤火的当下&#xff0c;非常的流行。 上图&#xff0c;可以看到短短不到1年&…

AMD在行动:揭示应用程序跟踪和性能分析的力量

AMD in Action: Unveiling the Power of Application Tracing and Profiling — ROCm Blogs 导言 Rocprof是一款强大的工具&#xff0c;设计用于分析和优化基于AMD ROCm平台上运行的HIP程序的性能&#xff0c;帮助开发者找出并解决性能瓶颈。Rocprof提供了多种性能数据&#x…

每日一题——Python实现PAT乙级1099 性感素数(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 专业点评 时间复杂度分析 空间复杂度分析 综合点评 我要更强 优化点 …

人事信息管理系统(Java+MySQL)

一、项目背景 在现代企业中&#xff0c;管理大量员工的工作信息、薪资、请假、离职等事务是一项非常繁琐和复杂的任务。传统的手工管理方式不仅效率低下&#xff0c;而且容易出错。为了提高人事管理的效率&#xff0c;减少人工操作带来的错误&#xff0c;企业迫切需要一个高效…