什么是Pinia？ Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品 提供更加简单的API (去掉 了mutation ) 提供符合组合式风格的API (和 Vue3新语法统一) 去掉了modules的概念，每一个store都是一个独立的模块 搭配TypeScript -起使用提供可靠的类型推断 对比 Vuex Pinia 起源于一次探索 Vuex 下一个迭代的实验，因此结合了 Vuex 5 核心团队讨论中的许多想法。最后，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分功能，所以决定将其作为新的推荐方案来代替 Vuex。 与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。 Store 是什么？ Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter ...
Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。 传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。 Vue3 使用组合式 API 的地方为 setup。 在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API） 允许我们编写更有条理的代码。 对比以下两端代码： 1、传统组件 2、组合式 API 响应式基础 ref() 声明响应式状态 ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。 在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问。 在组合式 API 中，推荐使用 ref() 函数来声明响应式状态： 123import { ref } from 'vue'const count = ref(0) ref() 接收参数，并将其包裹在一个带 ...
Vue路由是用来管理页面切换或跳转的一种方式 Vue Router的安装与简单使用 Vue Router是Vue官方的路由管理器，与Vue框架本身深度契合，Vue Router主要包含以下功能： 路由支持嵌套 可以模块化地进行路由配置 支持路由参数、查询和通配符 提供了视图过度效果 能够精准地进行导航控制 Vue Router的安装 与Vue框架本身一样，Vue Router支持使用CDN的方式引入，也支持使用NPM方式的安装 1234# cdn引入https://cdn.jsdelivr.net/npm/vue-router@4.2.5/dist/vue-router.global.prod.js# 本节采用npm安装npm install vue-router@4 -s 安装完成后在项目package.json文件中查看是否添加 1234"dependencies": { ----- "vue-router": "^4.2.5"}, 一个简单的Vue Router使用示例 在工程的com ...
互联网有许多第三方API接口服务，使用这些我们可以很方便的开发个人使用的工具 使用vue-axios进行数据请求 axios本身是一个基于promise的HTTP客户端工具，vue-axios针对Vue对axios进行了一层简单的包装。 promise ES6特有的.then正常的回调函数 .catch发生错误时的回调函数 首先在vue项目工程下进行vue-axios模块的安装 1234# npm 安装npm install --save axios vue-axios# 使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 安装完成后，可以检查package.json文件中是否已经添加了vue-axios的依赖，我们还需要在main.js文件中对其进行导入和注册 1234567891011121314// 导入vue-axios模块import VueAxios from 'vue-axios'import axios fro ...
Element Plus入门 Element Plus可以直接使用CDN的方式进行引入，单独地使用其提供的组件和样式，这与渐进式风格的Vue框架十分类似；同样，也可以使用NPM和Vue CLI创建的模板工程中依赖Element Plus框架使用 Element Plus的安装与使用 Element Plus支持使用CDN的方式进行引入。如果我们在开发简单的静态页面时使用CDN的方式引入Vue框架，那么可以使用同样的方式来引入Element Plus框架。 新建一个名为element.html，示例如下： 12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal ...
构建工具Vue CLI Vue CLI是一个帮助开发者快速创建和开发Vue项目的工具，其核心功能是提供可交互的项目脚手架和运行时的服务依赖，对于开发者来说，使用其开发和调试Vue应用都非常方便。 Vue CLI的安装 Vue CLI是一个需要全局安装的NPM包，安装Vue CLI的前提是设备已经安装了node.js环境 Node.js 官网： Node.js (nodejs.org) 安装Node.js环境后，即可在终端使用npm相关指令来安装软件包。在终端输入如下命令可以检查Node.js环境是否正确安装完成： 12PS C:\Users\Jerry> node -vv18.14.2 使用npm安装Vue CLI工具，在终端输入如下命令并执行： 123npm install -g @vue/cli## 如果出现 Error permission denied 是因为系统登陆用户权限不足，开头+ sudo 提权即可sudo npm install -g @vue/cli 用以下命令检查Vue CLI工具是否安装完成，输出了工具的版本号，则表明已经安装完成。 1234PS C:\U ...
在前端网页开发中，动画是一种非常重要的技术。合理运用动画可以极大的提高用户的使用体验。 使用CSS3创建动画 CSS3动画的核心定义keyframes或transition，keyframes定义了动画行为，比如对于颜色渐变的动画，需要定义起始颜色和终止颜色，浏览器会自动帮助我们计算其间的所有中间态来执行动画。transition的使用更加简单，当组件的CSS属性发生变化时，使用transition来定义其过度动画的属性即可。 transition过度动画 首先新建一个名为transition.html的测试文件，在其中编写如下JavaScript、HTML和CSS代码： 123456789101112131415161718192021222324252627282930313233343536373839<body> <style> .demo{ width: 100px; height: 100px; background-color: red; ...
6bfaebf3e9f67b5202b8d6c1cdcd16f7c335a71d6c7deaa24d6b26da81a280921d610e90086fd2f24a72bcbcb39bf63d64654afa0535b5035ab2554f15e5037272bd97891ed6e2b6f4d88f89ea796b3ff2cf7223606e9e3bb2326070edaa4ef54b6292f86473024fa137deb6928bae2e715f09db51690a31c45cca7d8add1d480335ee7526770b0ae0d15472d53666460eed17d5a10b18dc5df042189f480a2f99dfe1b78537dd86f24a9a11f4d5d3e9d46ce187e7627e9683bf1339dad65d1f25dfcd4b3430656a9d58c2feb3e5ac8790503492db32704bcf350558964aff8b7cc1ebf1a0bb8fb4b150ce535862c744355b50cd2c63391a9 ...
6bfaebf3e9f67b5202b8d6c1cdcd16f7b5ba01cd0c86fe46b43ae97bedd417e2da7193a34e90beb2967062da4528a8f20dd772df94a21b11a19d9bd306ea5e01fe206ed3397a0e4d650ff56ca05abd1a951c37565efc398ba0ab7fa7a2fe169eeaae9d22680f06c052e7321b7a65fe7c50ce36f246bf48a792331196c7be17dee373088ad4ed6c4c8ad26ff5b792279e766818a68612890ac07511bf0eb6382f468379baac25f2576581c8906dee32d170f87cfa388164233af5b1de6bae82346b49b0349b80377fd250ed2f4c7f4856eb594ab556044d8c3ea3a630e8228063f44270c4eb1cf1c35db8bad79b86af8bd7fa2d5b8431a7040 ...
组件是Vue中强大的功能之一。 通过组件，开发者可以封装出复用性强，扩展性强的HTML元素，并且通过组件的组合可以将复杂的页面元素拆分成多个独立的内部组件，方便代码的逻辑分离与管理。 关于Vue应用与组件 Vue框架将常规的网页页面开发以面向对象的方式进行了抽象，一个网页甚至一个网站在Vue中被抽象为一个应用程序。 一个应用程序中可以定义和使用很多个组件，但是需要配置一个根组件，当应用程序被挂载渲染到页面时，此根组件会作为起点元素进行渲染. Vue应用的数据配置选项 使用Vue的createApp方法即可创建一个Vue应用实例，createApp方法会返回一个Vue应用实例。 1const App = Vue.createApp({}) createApp方法会返回一个Vue应用实例，我们可以传入一个javaScript对象来提供应用创建时数据相关的配置项，例如：data、methods data选项：需要配置为一个Javascript函数，此函数需要提供所需全局数据。 12345678910const appData = { count:0 ...
