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.小结

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

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

相关文章

引领车载影像革命,全链路解决方案助力座舱创新升级

影像技术的创新与突破正在引领各行各业的飞速发展,尤其对于汽车行业来说,车载影像系统已成为衡量车辆智能化水平的重要指标。为了满足这一日益增长的需求,美摄科技凭借深厚的研发实力与创新精神,推出了全链路的车载影像解决方案&a…

uniapp开发小程序,实现堆叠卡片轮播图

一、实现堆叠卡片轮播图: 需求: 实现堆叠轮播图效果堆叠到后面的图片有虚化效果可以在堆叠图片上写文字或叠加图片等效果可以手动滑动&#xff0c;也可以定时自动轮播 二、代码实现&#xff1a; 1.封装一个组件myswiper.vue <!-- 折叠轮播图 组件--> <template>…

如何在SFTP工具中使用固定公网地址远程访问内网Termux系统

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;安全协议的文件传输协议。与FTP协议相比&#xff0c;SFTP使用了…

AD23原理图导入pcb是元器件位置错乱

1、原因是原理图和PCB没有进行连接导致的&#xff0c;可通过以下方法解决&#xff1a; 1>PCB返回到初始的形态&#xff0c;不可出现报错等问题&#xff0c;选择器件连结&#xff1b; 执行快捷键C --> K&#xff0c;将所有匹配组件进行回退&#xff0c;如下图&#xff1…

【Python】类和对象

类和对象 构造方法封装继承多继承 多态 类&#xff1a; 类是一个模板&#xff0c;描述一类对象的行为和状态。 有了模板我们就可以根据这个模板创建具体的对象。 对象&#xff1a; 对象是类的一个具体实例&#xff0c;有状态和行为。 class 类名称: 类的属性类的行为 # 其中 c…

如何在公网环境远程管理内网Windows系统部署的MongoDB数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 前言 MongoDB是一个基于分布式文件存储的数…

阿里面试总结 一

写了这些还是不够完整&#xff0c;阿里 字节 卷进去加班&#xff01;奥利给 ThreadLocal 线程变量存放在当前线程变量中&#xff0c;线程上下文中&#xff0c;set将变量添加到threadLocals变量中 Thread类中定义了两个ThreadLocalMap类型变量threadLocals、inheritableThrea…

数据知识产权登记前为何需要区块链存证_存储在国外的数据可以做数据资产登记证申请码

各地已公布的管理办法中&#xff0c;均把“数据区块链存证或公证”证明材料做为向各地数据知识产权登记部门提交登记申请表中必要材料之一。北京市数据知识产权登记管理办法要求&#xff1a;有下列情况之一的&#xff0c;不予登记&#xff1a;&#xff08;三&#xff09;登记前…

【SpringBoot】-- mapstruct进行类型转换时Converter实现类不能自动生成代码问题解决

问题描述 我的问题如下&#xff1a; 应该在红色区域生成对应的转换细节&#xff0c;但是这里只返回了一个空对象 问题解决 加入lombok-mapstruct-binding依赖,也要注意依赖引用顺序问题 <dependency><groupId>org.projectlombok</groupId><artifactId&…

uniapp项目引入组件

1、在项目新建文件uni_modules 2、通过uniapp官网查找组件 uni-app官网 3、下载组件 4、将下载好的组件放到步骤1创建的uni_modules目录下 5、在hbuilderX中重新运行小程序

LangFriend - 一款Long-Term Memory 的日历应用

文章目录 学术工作公司为什么要使用日记应用程序&#xff1f;定制总结 本文翻译整理自&#xff1a; https://blog.langchain.dev/langfriend/ (发布于2024 年 3 月 28 日) 在LangChain我们最感兴趣的概念之一就是内存。 每当我们对一个概念感兴趣时&#xff0c;我们都喜欢构建一…

子域名是什么?有什么作用?

在互联网世界中&#xff0c;域名是我们访问网站的关键。每一个公司的网站都需要拥有自己的域名&#xff0c;其中有些大型公司的网站还不止一个域名&#xff0c;除了主域名外还拥有子域名。有些人感到非常困惑&#xff0c;不知道子域名是什么。其实子域名也就是平时所说的二级域…

不可错过的3D建模素材网站,让设计更加丰富多彩!

3D建模已经渗透到了各个行业和领域&#xff0c;从游戏设计、室内设计到建筑设计&#xff0c;3D模型的使用越来越广泛。然而&#xff0c;创建出优秀的3D模型就需要大量的优质3D建模素材。幸运的是&#xff0c;有一些网站提供了大量的高质量3D建模素材&#xff0c;这些都是我们设…

C语言 | Leetcode C语言题解之第20题有效的括号

题目&#xff1a; 题解&#xff1a; char pairs(char a) {if (a }) return {;if (a ]) return [;if (a )) return (;return 0; }bool isValid(char* s) {int n strlen(s);if (n % 2 1) {return false;}int stk[n 1], top 0;for (int i 0; i < n; i) {char ch pair…

AI 对话完善【人工智能】

AI 对话【人工智能】 前言版权开源推荐AI 对话v0版本&#xff1a;基础v1版本&#xff1a;对话数据表tag.jsTagController v2版本&#xff1a;回复中textarea.jsChatController v3版本&#xff1a;流式输出chatLast.jsChatController v4版本&#xff1a;多轮对话QianfanUtilChat…

c++的友元函数,详细笔记,细说三种友元用法

解释友元 友元用通俗易懂的话来说&#xff0c;就是&#xff1a;当有人来到你家里&#xff0c;他就只能呆在客厅里面&#xff0c;你是不可能让他来到你的卧室之中的。但是如果这个人是你的朋友&#xff0c;那么你是默许他可以进入你的卧室的。 此时呢&#xff1f;我告诉你&…

SpringBoot+Vue,轻松实现网页版人脸登录与精准识别

目录 1、技术介绍 2、技术原理 2.1、人脸检测 ①参考模板法 ②人脸规则法 2.2、人脸跟踪 2.3、人脸比对 ①特征向量法 ②面纹模板法 识别过程 案例 一、springboot后端项目 1&#xff0c;拉取项目后&#xff0c;导入相关依赖jar包 2&#xff0c;执行sql文件夹下面…

智能运维场景 | 科技风险预警,能实现到什么程度?

[ 原作者&#xff1a;擎创夏洛克&#xff0c;本文略做了节选和改编 ] 每次一说到“风险预警”&#xff0c;就会有客户问我们能做怎样的风险预警。实际上在智能运维厂商来说&#xff0c;此风险非彼风险&#xff0c;不是能做银行的业务上的风险预警&#xff08;比如贷款风险等&a…

golang的引用和非引用总结

目录 概述 一、基本概念 指针类型&#xff08;Pointer type&#xff09; 非引用类型&#xff08;值类型&#xff09; 引用类型&#xff08;Reference Types&#xff09; 解引用&#xff08;dereference&#xff09; 二、引用类型和非引用类型的区别 三、golang数据类型…

深度学习500问——Chapter07:生成对抗网络(GAN)(1)

文章目录 7.1 GAN基本概念 7.1.1 如何通俗理解GAN 7.1.2 GAN的形式化表示 7.1.3 GAN的目标函数是什么 7.1.4 GAN的目标函数和交叉熵有什么区别 7.1.5 GAN的Loss为什么降不下去 7.1.6 生成式模型、判别式模型的区别 7.1.7 什么是mode collapsing 7.1.8 如何解决mode collapsing …