示例目录： 1.跑马灯效果 2.简单计数器 3.品牌案例（添加、删除、搜索） 4.过滤器的基本使用 5.全局过滤器与自定义过滤器 6.自定义按键修饰符和获取焦点 7.结合node手写JSONP服务器 1.跑马灯效果 代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<me
转载
2024-10-21 13:10:03
267阅读
slot内置组件的使用说明:slot的意思是插槽，vue中用来做内容的分发，接下来具体来说明slot的作用与分类首先定义一个slot.vue的子组件，代码如图:接着在父组件App.vue页面中引入并注册slot.vue组件，我们就能在App.vue父组件中使用slot.vue组件了，如图:渲染结果为:可以看到我是插值这四个字并没有渲染，要想这个四个字渲染，就要使用slot，我只需将slot.vue
$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄
先上图 如何在我们切换tab标签的时候，缓存标签最后操作的内容，简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样。看看keep-alive是如何实现该功能的。首先我们要了解keep-alive的基本使用。具体介绍请查看官方文档（https://cn.vuejs.org/guide/built-ins/keep-alive.html#ba
转载
2023-12-25 19:32:53
447阅读
Promise主要用于解决深层嵌套的问题promise 提供了简洁的API 使得异步操作更加容易<script type="text/javascript">
/*
1. Promise基本使用
我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操
除了一些Vue中自带的核心指令（v-model以及v-show）以外，Vue也可以自定义注册指令就可以使用directives选项来注册指令下面将用全局和局部的方式使用v-focus，来实现页面加载时自动获得焦点的功能这里只用到了inserted和el参数即可实现 第一种全局写法：<!DOCTYPE html>
<html lang="en">
<head&
在使用element-plus的loading加载组件时,发现了这么一个方法 引发思考:第一行代码很好懂,创建一个ElLoading的实例,其中options时启动loading的配置项第三行代码很好懂,关闭这个loading实例,那么第二行这个nextTick是干什么用的呢 我们不妨反向思考一下,如果没有这个方法,直接写loadingInstance.close会
转载
2024-05-18 13:50:23
136阅读
安装 JSX 插件在 Vue2 中要想使用 jsx 开发，需要安装 @vue/babel-preset-jsx 等插件，之后在 babel 里指定即可，详细可以参考下面的 Vue2 GitHub 文档Vue2：GitHub 文档 —— Babel Preset JSX最近在使用 Vue3，突然想用 jsx 进行开发部分页面，顺便记录一下，也可以参考下面的 Vue3 GitHub 文档Vue3：Gi
转载
2023-10-24 08:37:56
264阅读
一、什么是jsx在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展.（在vue3项目中相当于单文件组件，.vue）使用的是jsx语法二、jsx语法1.插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，
转载
2023-07-21 22:24:22
265阅读
vue 单页应用中微信支付的坑标签（空格分隔）： 微信 支付 坑 vue场景在微信H5页面（使用 vue-router2 控制路由的 vue2 单页应用项目）中使用微信 jssdk 进行微信支付。基本知识1.依据微信jssdk官方文档，使用微信功能的页面，必须进行微信 config，并在wx ready 之后再调用微信功能。
2.进行微信支付的话，需要在微信开放平台配置微信支付合法路径。该合法路径
vue3性能优于vue2.x，主要原因有以下四点：一、diff算法优化：vue2.x的虚拟DOM是进行全量比较。vue3新增了静态标记（PatchFlag）。在于上次虚拟节点进行比较的时候，只比较带有静态标记的节点，减少了比较的次数。 使用vue3创建工具查看一下创建结构export function render(_ctx, _cache, $props, $s
下载element-admin框架点击该地址：https://github.com/PanJiaChen/vue-element-admin用git clone https://github.com/PanJiaChen/vue-element-admin或者直接下载压缩包都可以 2.安装依赖打开项目根目录，在根目录
转载
2024-03-04 15:16:17
2287阅读
1、Vue3简介1.1、Vue3带来了什么1.性能的提升Vue3与Vue 2相比，在包大小（使用 tree-shaking 时减轻多达 41%）、初始渲染（速度提高多达 55%）、更新（多达 133% 更快）和内存使用（最多减少 54%）。打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟
转载
2023-10-23 19:59:39
180阅读
v-for中的key是什么作用？在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。 官方中对key的作用解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销
转载
2024-02-02 11:41:40
91阅读
创建Vue3项目方式一：
使用vue-cli：vue的脚手架----->创建vue项目----->构建vue项目----->前端工具链
创建方式还是和之前一样，Vue版本要选择Vue3的版本
方式二：
使用vite创建：
vite：https://cn.vitejs.dev/
：npm create vue@latest
转载
2024-06-24 23:02:55
282阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 09:18:57
113阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 11:04:16
89阅读
## Vue3 Axios跳转页面
在Vue3中，Axios是一个非常常用的库，用于发送HTTP请求。结合Axios和Vue Router，我们可以实现页面跳转和数据请求的结合使用。本文将介绍如何在Vue3中使用Axios发送请求并在请求成功后跳转页面。
### 引入Axios和Vue Router
首先，我们需要安装Axios和Vue Router。可以使用以下命令进行安装：
```ba
原创
2024-07-12 05:53:49
70阅读
Vue路由切换的两种方式 目录
Vue路由切换的两种方式1. 标签切换1.1 \<a>标签切换1.2 路径切换1.3 path切换1.4 name切换(推荐)2. js切换完整测试代码 1. 标签切换1.1 <a>标签切换语法：<a href=“# + 路由路径”>标签内容</a>例子：路由规则为：const router = new VueRoute
