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…

头歌-机器学习 第14次实验 主成分分析PCA

第1关:维数灾难与降维 任务描述 本关任务:根据本节课所学知识完成本关所设置的选择题。 相关知识 为了完成本关任务,你需要掌握维数灾难与降维的相关基础知识。 维数灾难 在机器学习中,我们不仅需要学习怎样进行分类、回归或者聚类,我们更要学习怎样对数据进行更好的…

如何在公网环境远程管理内网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…

深度学习八股文

Bert旨在通过联合左侧和右侧的上下文&#xff0c;从未标记文本中预训练出一个深度双向表示模型。因此&#xff0c;BERT可以通过增加一个额外的输出层来进行微调&#xff0c;就可以达到为广泛的任务创建State-of-the-arts 模型的效果&#xff0c;比如QA、语言推理任务。Bert的构…

【ROS2笔记二】使用colcon构建ROS2工作空间

2.使用colcon构建ROS2工作空间 2.1一个构建的示例 在ROS1中&#xff0c;我们使用catkin_make 、catkin_tools、和catkin_make_isolated作为ROS的构建工具&#xff0c;但在ROS2中&#xff0c;我们使用colcon来作为构建工具&#xff0c;具体的原因可以参考该文档A universal bu…

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

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

mashgrid函数到底有啥作用?好处究竟在哪?

在用matlab的时候经常看到mashgrid函数这个函数&#xff0c;但是即使看过很多遍其底层源码&#xff0c;也难以理解他到底好在哪&#xff0c;有啥具体作用。今天终于搞明白了&#xff0c;现在记录一下。 mashgrid函数到底有啥作用&#xff1f;好处究竟在哪&#xff1f; 先说结…

LeetCode-热题100:32. 最长有效括号

题目描述 给你一个只包含 ( 和 ) 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 示例 1&#xff1a; 输入&#xff1a; s “(()” 输出&#xff1a; 2 解释&#xff1a; 最长有效括号子串是 “()” 示例 2&#xff1a; 输入&…

【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;我们都喜欢构建一…

理解 Nginx 的多站点配置:为每个网站单独配置

Nginx 是一个高性能的 Web 服务器&#xff0c;广泛用于托管和管理网站。它之所以受欢迎&#xff0c;部分原因在于它的灵活性和强大的配置能力。特别是对于管理多个网站&#xff0c;Nginx 提供了一种高效且组织良好的方法。让我们逐步了解如何使用 Nginx 配置多个网站&#xff0…

【Android】【root remount】【2】如何判断设备是否remount

前言 高版本的android设备&#xff0c;在remount之后&#xff0c;如果再进行ota升级&#xff0c;会产生异常&#xff0c;从而无法升级成功。 如何判断设备是否remount 当前已android 10 平台为例 当我们执行 adb remount 时&#xff0c;系统调用会调用到system/core/adb/dae…

1024编程

关于编程和信息学&#xff0c;常常有一些讨论&#xff1a;“课内数学好没用&#xff0c;小学奥数没学过不能先学信息学”。这个说法有道理吗&#xff1f; 其实&#xff0c;“小学奥数”不是必须&#xff0c;只要课内语文、数学学得不错&#xff0c;四年级左右就可以学信息学。我…

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

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