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.rhkb.cn/news/345828.html

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

相关文章

Cinema 4D 2024 软件安装教程、附安装包下载

Cinema 4D 2024 Cinema 4D(C4D)是一款由Maxon开发的三维建模、动画和渲染软件,广泛用于电影制作、广告、游戏开发、视觉效果等领域。Cinema 4D允许用户创建复杂的三维模型,包括角色、场景、物体等。它提供了多种建模工具&#x…

调研管理系统的设计

管理员账户功能包括:系统首页,个人中心,管理员管理,基础数据管理,教师类型管理,课程类型管理,公告类型管理 前台账户功能包括:系统首页,个人中心,论坛&#…

系统架构设计师【补充知识】: 应用数学 (核心总结)

一、 图论之最小生成树 (1)定义: 在连通的带权图的所有生成树中,权值和最小的那棵生成树(包含图中所有顶点的树),称作最小生成树。 (2)针对问题: 带权图的最短路径问题。 (3)最小生成树的解法有普里姆(Prim)算法和克鲁斯卡尔(Kruskal)算法,我…

英伟达Docker 安装与GPu镜像拉取

获取nvidia_docker压缩包nvidia_docker.tgz将压缩包上传至服务器指定目录解压nvidia_docker.tgz压缩包 tar -zxvf 压缩包执行rpm安装命令: #查看指定rpm包安装情况 rpm -qa | grep libstdc #查看指定rpm包下的依赖包的版本情况 strings /lib64/libstdc |grep GLI…

如何稳定高效地进行 TiDB 数据导入导出?

对于在数据库行业中摸爬滚打多年的老鸟 DBA 来说,TiDB 可是一点也不陌生,作为 PingCAP 公司自主研发的真开源分布式数据库,其先进的设计理念以及丰富的生态工具,可算得上是业界自主创新和性能领先的代名词。 TiDB 是谁&#xff1…

powershell:使用IProgressDialog接口创建windows标准进度对话框。

禁止任何形式的抄录,转载请附上本文章地址 Add-Type using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Runtime.InteropServices; // 定义ProgressDialog类,实现IProgressDialog接口 …

【SpringCloud学习笔记】Docker(中篇)

Docker 1. 自定义镜像 前面我们都是使用docker pull拉取仓库中现成的镜像,但是如果我们想要将一个Java应用程序构建成镜像然后部署应该怎么做呢?这个时候我们就需要自定义镜像了 **镜像:**本质上就是一堆文件的集合,包含了应用程…

深入探讨5种单例模式

文章目录 一、对比总览详细解释 二、代码1. 饿汉式2. 饱汉式3. 饱汉式-双检锁4. 静态内部类5. 枚举单例 三、性能对比 一、对比总览 以下是不同单例模式实现方式的特性对比表格。表格从线程安全性、延迟加载、实现复杂度、反序列化安全性、防反射攻击性等多个方面进行考量。 …

淘宝扭蛋机小程序,扭蛋市场创新模式

扭蛋机作为潮玩市场的娱乐消费方式,成为了当下消费者的新宠。扭蛋机凭借自身性价比高、商品多样、惊喜性等特点,吸引了各个年龄层的消费者,不仅年轻人喜欢,不少小学生和老年人也非常喜欢,扭蛋机市场迎来了快速发展期。…

MySQL: 表的增删改查(基础)

文章目录 1. 注释2. 新增(Create)3. 查询(Retrieve)3.1 全列查询3.2 指定列查询3.3 查询字段为表达式3.4 别名3.5 去重: distinct3.6 排序: order by3.7条件查询3.8 分页查询 4. 修改 (update)5. 删除(delete)6. 内容重点总结 1. 注释 注释:在SQL中可以使用“–空格…

Spring Boot 集成 zxing 生成条形码与二维码

前面我们知道了怎么通过 使用 zxing 生成二维码以及条形码, 由于我们现在都是 web 端的项目了,那么我们看下怎么使用 Spring Boot 集成然后返回给前端展示: 工程源码 对应的工程源码我放到了这里:github源码路径,点击…

大模型Prompt-Tuning技术进阶

LLM的Prompt-Tuning主流方法 面向超大规模模型的Prompt-Tuning 近两年来,随之Prompt-Tuning技术的发展,有诸多工作发现,对于超过10亿参数量的模型来说,Prompt-Tuning所带来的增益远远高于标准的Fine-tuning,小样本甚至…

基于STM32的各种数学函数优化计算方法(代码开源)

前言:本文为手把手教学 STM32 的数学计算公式优化方法的教程,本教程的 MCU 使用 STM32F103ZET6 。本篇博客将使用非传统数学库计算手段进行各种数学函数的计算,优化的数学计算包括:sin()、cos()、arctan()、arcsin() 与 1/sqrt()。…

Python魔法之旅专栏(导航)

目录 推荐阅读 1、Python筑基之旅 2、Python函数之旅 3、Python算法之旅 4、博客个人主页 首先,感谢老铁们一直以来对我的支持与厚爱,让我能坚持把Python魔法方法专栏更新完毕! 其次,为了方便大家查阅,我将此专栏…

NetSuite精益实施 之 系统切换作业标准化

这个题目为近日所思,一直没有落笔。今天是端午假日,得空卸货。 标准化是精益实施的三个基础之一,在我们的项目实践中没有须臾忘记。在此我们不再赘述标准化为啥这么重要,更多来分享如何标准化。 在项目实施的各阶段中&#xff0…

冯喜运:6.10周一黄金原油行情趋势分析及独家操作建议

【黄金消息面分析】:上周全球金融市场惊现戏剧性大逆转,美国多项经济数据证实劳动力市场降温,9月降息重返视野令全球风险情绪几乎陷入狂热状态,全球股市接连创新高,但上周五意外“爆表”的非农令市场惊现大逆转&#x…

【LeetCode】39.组合总和

组合总和 题目描述: 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个…

c#未能加载基类System错误 这台计算机上缺少此项目引用的 NuGet 程序包

拷贝代码到另一台计算机运行,打开Form1.cs报错 首先确认package的框架 如果是472,则更换472的框架 打开项目->xx属性,进行修改 如果框架正确,就是未识别到程序包 可以参考: https://www.cnblogs.com/txwtech/p/1…

深入ES6:解锁 JavaScript 类与继承的高级玩法

个人主页:学习前端的小z 个人专栏:JavaScript 精粹 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! ES5、ES6介绍 文章目录 💯Class🍟1 类的由来🍟2 co…

一、Socket创建和连接

C网络编程(asio) 文章目录 C网络编程(asio)1、Asio概述2、网络编程基本流程2、创建socket3、创建监听socket4、绑定accpet监听套接字5、连接指定的端点6、服务器接收连接 点击查看代码 1、Asio概述 ​ Asio起源于Boost库&#xf…