Vue前端框架

 1.vue基本使用1

1.vue环境搭建

一般创建vue项目是在cmd命令中用:vue ui 命令,采用ui图形界面的方式直观创建项目。

2.vue基本使用方式:vue组件

3.文本插值

4.属性绑定

5.事件绑定

6.双向绑定

7.条件渲染

2.vue基本使用2

1.axios

安装axios命令:npm install axios

导入axios包

1.axios常用api

2.配置代理(解决跨域问题)

3.axios发送get和post请求的示例

4.axios统一发送请求的方式

2.小结

3.vuex

1.vuex的介绍

        2.对于vuex的理解(vuex和全局变量的比较)

Vuex 的概念和功能在某些方面确实与全局变量相似,但它们之间也存在一些关键的区别。我们可以从以下几个方面来比较:

  1. 目的和用途
    • 全局变量:通常用于在应用程序的任何地方存储和访问数据。它们没有明确的组织结构,也不提供数据变化追踪或响应式更新。
    • Vuex:是 Vue.js 的状态管理库,旨在提供一个可预测的状态容器,用于组织和管理组件之间的共享状态。它提供了结构化的存储、状态变更追踪、响应式更新以及与组件的集成。
  2. 作用域
    • 全局变量:通常在整个应用程序中都是可见的,可以在任何地方被访问和修改。
    • Vuex:状态被封装在一个单独的 store 中,并通过 Vuex 的 API 在组件中访问。虽然 Vuex 的状态可以在多个组件之间共享,但它不是全局可访问的,而是通过 Vuex 的方法来访问和修改。
  3. 状态管理
    • 全局变量:通常没有提供状态变更的追踪或管理。当你改变一个全局变量的值时,除非手动监听和更新,否则其他依赖这个变量的部分可能不会得到更新。
    • Vuex:通过 mutations 和 actions 来管理状态的变更,确保状态变更的可预测性和可追踪性。Vuex 还提供了 getters 来派生状态,以便在需要时进行计算。
  4. 响应性
    • 全局变量:通常不具备响应性,即当变量值改变时,依赖这个变量的部分不会自动更新。
    • Vuex:Vuex 的状态是响应式的,当状态改变时,依赖该状态的组件会自动重新渲染。
  5. 模块化
    • 全局变量:通常不容易模块化,尤其是在大型应用中,全局变量可能会变得混乱和难以管理。
    • Vuex:支持模块化,允许将 store 分割成多个模块,每个模块有自己的状态、mutations、actions 和 getters。这有助于在大型应用中保持代码的清晰和组织。

因此,虽然 Vuex 的某些功能(如集中存储和共享状态)与全局变量相似,但 Vuex 提供了更多高级的功能和最佳实践,如状态变更追踪、模块化、响应式更新等,这些功能使得 Vuex 成为 Vue.js 应用中状态管理的更好选择。

3.vuex的使用

1.定义和展示共享数据

在src/store/index.js文件中定义共享数据

在其他页面中就可以使用这个数据

2.修改数据

注:因为vuex状态是响应式的,所有修改数据,所有页面数据一起修改!

在mutations中定义函数,修改共享数据

为按钮绑定单击事件,调用修改共享数据的函数

3.在actions中定义函数,用于调用mutation

注:因为mutation中修改共享数据,必须是同步操作。而在action中可以进行异步操作,在action调用mutation从而达到异步操作修改共享数据的效果。

在action中定义setNameByAxios方法发异步请求,再在then方法中调用mutation中定义的setName函数

绑定单击事件,调用action的setNameByAxios方法

4.小结

4.TypeScript

1.介绍

2.ts增加类型支持的原因

3.TypeScript常用类型

1.常见类型

2.字面量类型

类是于Java中的枚举类型

3.接口类型

typescript中的接口类型和Java中的不太一样

4.class类的基本使用

5.类继承接口

6.类的继承

7.小结

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视频号小店遇到差评怎么办?怎么规避差评问题?有三种解决思路

大家好,我是电商花花。 我们做视频号小店的商家应该都会遇到品退、中差评这些问题,一个差评就可能影响到我们店铺的体验分,尤其是在订单不多的时候,一条差评很有可能让你的店铺的流量、转化率发生骤降,如果体验分太低…

用优先编码器①实现键盘编码电路

描述 请使用优先编码器①实现键盘编码电路,可添加并例化题目中已给出的优先编码器代码。 10个按键分别对应十进制数0-9,按键9的优先级别最高;按键悬空时,按键输出高电平,按键按下时,按键输出低电平&#xf…

计算机网络----第八天

真是交换机怎么操作使用 H3C路由交换产品连接方法: ①SSH |Telnet |console ②直连和间接连接方式 ③上手操作建议: 命令行使用基础: ① system-view #进入系统视图 user-interface vty 0 4 #vty就是用telnet/ssh远程进入交换机的界面(虚…

第十四讲:C语言字符函数和字符串函数

目录 1. 字符分类函数 2、字符转换函数 3. strlen的使⽤和模拟实现 4. strcpy 的使⽤和模拟实现 5. strcat 的使⽤和模拟实现 6. strcmp 的使⽤和模拟实现 7. strncpy 函数的使⽤ 8. strncat 函数的使⽤ 9. strncmp函数的使⽤ 10. strstr 的使⽤和模拟实现 11. strt…

Qwen-WisdomVast (千问-智瀚)

介绍 Qwen-WisdomVast是以Qwen1.5-7B为底座,使用 DORA LORA 的训练方法,在100w高质量中文多轮SFT数据 20w英文多轮SFT数据 2000单轮自我认知数据训练而来的大模型,数学能力相比Qwen1.5-7B-Chat提升了5.16%,在HumanEval数据集上…

12 nacos 一系列 403 的构造

前言 最近 生产环境环境出现了 一系列的 nacos 403, 然后 这里来大致看一下 各种可能得情况 首先 nacos 服务器需要开启认证配置 这里 nacos 调试版本为 2.0.4 case1 用户无角色关联导致 403 报错的信息如下 2023-06-28 13:05:11.448 ERROR 10279 --- [ mai…

JR-D401 UHD 4K超高清音视频解码器

详细介绍: JR-D401 UHD 4K超高清解码器,AVS2.0/AVS/H.265HEVC/H.264/MPEG2解码,支持RF/ASI/IP输入,支持4K/1080P/1080I/720P/576I/480I多种分辨率,支持DRA/AC3/EAC3/AAC/MPEG等音频,支持4x3G SDI 4K输出。 产品特点 支持多种输入…

图解WebGLThree.js工作原理

一、WebGL背后的工作原理是什么? 以Three.js为例,讲述框架在背后扮演什么样的角色? 二、我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可…

Conductor 项目的编译启动

本节主要是将Conductor进行启动,观察基本项目的基本能力。 Conductor 后端的编译启动 Conductor是基于17开发的(代码中展示11可运行),依赖管理是通过Gradle完成的,要对项目进行编译通过,至少要满足环境如…

Ant Design 组件中文名称大全

整理Ant Design 中主要组件的中英文名称,加深对组件的印象,为后续使用时更容易想起和查找、与团队成员或其他开发者交流时,使用中文名称能够更加清晰地表达自己的意图,有助于沟通交流、可以更好地理解每个组件的功能和适用场景,有助于加深对 Ant Design 组件库的理解…

数据库提权_攻防(1),2024年最新缓存架构技术

第二个组件显示成功,但是没有回显,我们使用dnslog看一下。命令执行成功。 第三个也成功提权,第四个经过测试,提权失败。 三:mysql提权_UDF提权 MOF提权的条件为小于win2008的机型,所以不作研究。 条件&am…

查询category的id存在于项目表中category_id_list的json array字段中

表category 表project 查询category的id存在于项目表中category_id_list的json array字段中。

使用tomcat里的API - Servlet

Servlet 是一组api,操作http协议的,tomcat提供的。 写网站,接收前端传来的http请求,根据请求计算出一个http响应,并把http响应返回到浏览器这边 一、创建一个新的Maven空项目 首次创建maven项目的时候,…

【上海大学计算机组成原理实验报告】三、微指令系统实验

一、实验目的 了解译码器、微指令结构的基本工作原理。学习设计微指令的方法。 二、实验原理 根据实验指导书的相关内容,本实验所用的实验箱的微指令系统控制总线宽度为24位,每个地址单元宽度也为24位,其中微指令存储器由3片8位存储器按照…

PlantUML 实战示例(使用 PlantUML 画用例图、类图、活动图、时序图)

目录 前言 需求场景 用例图 类图 活动图 时序图 前言 在软件开发的生命周期中,需要先进行设计,最后才是进行具体的编码和测试。设计时就需要画各种 UML 图,有专业的 UML 画图软件,也有很多在线的 UML 画图网站可以来画图&a…

k8s部署nacos集群

部署环境: ubuntu20.04docker version 20.10.12k8s version 1.23.1kubeadm 一主两从 本篇主要参考nacos官方k8s配置文档的配置顺序,配置文件。 废话不多说直接开肝。 虚拟机上需要nfs 安装nfs #本篇所有执行的命令都是在root用户下操作 #安装命令&am…

用 ElementPlus 的日历组件 Calendar 自定义渲染

文章目录 需求分析1. 英文改为中文2. 修改样式3. 自定义头部4. 增删改功能接入 需求 使用 ElementPlus中的 Calendar 组件完成自定义渲染 分析 1. 英文改为中文 转为中文的方式&#xff1a;用 ElementPlus的日历组件如何改为中文 2. 修改样式 附源码 <template><…

Flask项目如何在测试环境和生产环境部署上线

前言 最近在使用Flask框架&#xff0c;写一个小项目&#xff0c;在项目部署启动后&#xff0c;出现了以下这段提示&#xff0c;这段提示的意思是&#xff0c;该启动方式适用于开发环境中&#xff0c;生产环境要使用WSGI服务器。 WARNING: This is a development server. Do no…

Redis(Windows版本下载安装和使用)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

共享IP和独享IP如何选择,两者有何区别?

有跨境用户在选择共享IP和独享IP时会有疑问&#xff0c;不知道该如何进行选择&#xff0c;共享IP和独享IP各有其特点和应用场景&#xff0c;选择哪种方式主要取决于具体需求和预算。以下是对两者的详细比较&#xff1a; 首先两者的主要区别在于使用方式和安全性&#xff1a;共…