6bfaebf3e9f67b5202b8d6c1cdcd16f7b5ba01cd0c86fe46b43ae97bedd417e20ffbe7ccaedfb929a3928039ceb42c91ea9b48ffcf7e53e0be73254c360414108c295aa9f8825784695fe4466c742e56803ea9c45e2016513ffb23522adb2639d7a7d797c2f63928bcbc41e7edbc67daa5b994db099c0f03d692bc188cd033ab474ed30850f8b0e1621c3e82a98b48ffe6eab546cc06b976d5de571905ebcd5ffb68cea1b46f0cbee271d514540b88f932274260f23ebac2ce3ffc596b4711107d876d132b7bcdce1cbb4e1ed244335ae271e36d2cf70ea931f718257d15a3cb8553cd95bdb47be39cbcc41524ea5c9c19052aa38c5e92513 ...
eslint配置 eslint中文官网:http://eslint.cn/ ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具 首先安装eslint 1pnpm i eslint -D 生成配置文件:.eslint.cjs 1npx eslint --init .eslint.cjs配置文件 123456789101112131415161718192021222324252627282930313233343536373839module.exports = { //运行环境 "env": { "browser": true,//浏览器端 "es2021": true,//es2021 }, //规则继承 "extends": [ //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档 ...
不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。 比如:vue2组件通信方式 props:可以实现父子组件、子父组件、甚至兄弟组件通信 自定义事件:可以实现子父组件通信 全局事件总线$bus:可以实现任意组件通信 pubsub:发布订阅模式实现任意组件通信 vuex:集中式状态管理容器，实现任意组件通信 ref:父组件获取子组件实例VC,获取子组件的响应式数据以及方法 slot:插槽(默认插槽、具名插槽、作用域插槽)实现父子组件通信… props props 可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！ 示例 父组件 12345678910111213141516171819202122<template> <div class="box"> <h1>props:我是父组件曹操</h1> <hr /> <Child info=" ...
什么是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; ...
