钩子 周期 生命vue
Vue鼠标与键盘事件触发汇总
Vue鼠标与键盘事件触发汇总 一、鼠标事件 1、悬浮事件 @mouseenter ：进入 @mouseover：在 @mousemove：移动 @mouseout：移出 @mouseleave：离开 2、点击事件 @click：单击左键 @mousedown：按下鼠标左键/右键 @mouseup：松 ......
VUE3基础笔记
date: 2023-3-30 10:00:00 categories: 前端系列 tags: VUE title: VUE3基础笔记 视频地址：2022最新Vue零基础小白入门教程，从入门到精通，快速上手简单易懂_哔哩哔哩_bilibili VUE开发前的准备 安装Vue工具 Vue CLI Vu ......
再谈vue中的differ算法
Differ算法 在 Vue 中，当数据变化时，Vue 会使用 Virtual DOM 和 diff 算法来尽可能地减少 DOM 操作的次数，以提高性能。 diff 算法是 Virtual DOM 实现中的核心算法之一，其主要作用是比较新旧虚拟 DOM 树的差异，并将差异应用到真实的 DOM 树上。 ......
vue是什么？vue的优点有哪些？
https://blog.csdn.net/m0_64346035/article/details/124809501 vue是指一个用于创建用户界面的渐进式框架，旨在更好地组织与简化Web开发；Vue的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。 一、vue是什么Vue ......
直播源码开发，vue汉字获取字母首拼或拼音、大小写
直播源码开发，vue汉字获取字母首拼或拼音、大小写 1.npm安装 npm install js-pinyin 2.使用示例（ charCase: 0 为大写；charCase: 1 为小写） 若不设置则默认为 charCase: 0 let pinyin = require("js-pinyi ......
element+vue2的查询form表单封装成组件复用
<template> <el-form :inline="true" style="display: flex; flex-direction: row; flex-wrap: wrap;flex: 1;" class="formClass" label-width="90px" > <el-for ......
vue中 loadsh的debounce的应用
1.安装 npm i --save lodash 2.引入 import { debounce } from 'lodash' 3.使用 handleDefine: debounce(function(params) { this.projectAdd() }, 3000), ......
Vue UI库
UI组件库 一般会问两个问题 - 基于哪个框架: 比如 Vue,React...... - PC端 || 移动端 移动端和PC端常见的UI库 - 移动端 - Vant: https://youzan.github.io/vant - Cube UI: https://didi.github.io/c ......
Vue 中 安装 mavonEditor 富文本编辑器
1. NPM安装 npm install mavon-editor --save 2. 注册mavon-editor组件 main.js 中 使用组件 3. 页面中使用 ......
vue vben admin 中的 table 组件使用
useTable 使用 我们是不会被困难打败的, 只会越战越勇! 开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法 需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的 ......
vue中退出循环的方法
forEachforEach不能使用break和continue。return也无法退出循环。 使用break，会报错（报错信息：SyntaxError: Illegal break statement）。 使用continue，会报错（报错信息：SyntaxError: Illegal conti ......
Vue3 setup 实时更新修改后的数据
const removeData = (currentId) => { data.value = data.value.filter((i) => { return i.key !== currentId }) } const updateData = (currentId) => { data.v ......
vue3 - .eslintignore 配置忽略指定文件或者文件夹的eslint检查报错
项目根目录如果没有 .eslintignore 文件，需要手动添加即可 用法如下 指定某文件夹包括里面的所有文件都忽略 build src/assets 指定某文件夹里面的指定文件类型都忽略 build/*.js 指定某文件夹里面的指定文件忽略 src/index.js 指定某文件夹里的除某个文件之 ......
vue项目中组件封装
移动端项目中使用 vut UI组件库。 比较常用的dialog弹出框和Picker 选择器，这两个的样式跟UI设计的不太一样，尤其是border边框在手机ios系统上有兼容问题。 dialog弹框组件 <template> <transition name="confirm-fade"> <div ......
vue3 - 开启debugger 能力
在 package.json 文件 的 eslintConfig 配置部分加入 "no-debugger": "off", "no-console": "off", 意思为让eslint将debugger开启，并开启控制台 ......
vue3 - 定义window 全局变量
在 shims.d.ts 文件 //全局参数定义 ，export {};不可缺少 export {}; declare global { interface Window { editor: any; __minderReadOnly: any; } } 那么使用 window.editor 这个参 ......
vue3 - import js文件eslint报错-解决
在 shims.d.ts 文件中 ，添加 declare module '*.js'; 即可 如果让所有的文件都可导入，则写为 declare module '*'; ......
vue3 - 关闭eslint提示参数必须定义类型
需要在tsconfig.json 文件里，将 strict 设为 false 即可 这样，参数不需要必须定义类型了 ......
vue中手动销毁keep-alive组件失效原因是什么，有什么解决方案
在Vue中手动销毁keep-alive组件可能失效的原因有以下几点： keep-alive组件内部被缓存，即使手动销毁组件，其实并没有真正销毁，而是被缓存起来了。因此，即使手动销毁了组件，下次再进入缓存周期时，组件还是会被复用，而不是重新创建。 keep-alive组件内部可能存在异步操作或定时器， ......
ant-design-vue 两个select省市联动是典型的例子（添加汉语名字）
<template> <div> <a-form :label-col='{ span: 7 }' :wrapper-col='{ span: 15 }'> <a-row> <a-col :span='12'> <a-form-item label='省'> <a-select :default-v ......
TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
本文主要介绍TS基础及在Vue中的实践，附赠《JS项目转TS指南》，旨在帮助还在使用JS的朋友快速使用TS，享受TS带来的丝滑体验。 ......
第十七篇 vue - 深入组件 - Props
Props 声明 一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute props 需要使用 props 选项来定义 export default { props: ['foo'], created() { // props ......
第十八篇 vue - 深入组件 - 组件事件
触发与监听事件 在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中) $emit() 方法在组件实例上也同样以 this.$emit() 的形式可用 父组件可以通过 v-on (缩写为 @) 来监听事件 同样，组件的事件监听器也支持 .once 修 ......
第十六篇 vue - 深入组件 - 注册
组件注册 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册 和 局部注册 全局注册 app.component() 我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用 i ......
Vue生命周期
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示： 状态 阶段周期 beforeCreate 创建前 created 创建后 beforeMount 挂 ......
Vue指令具体实现
v-bind： 指令 作用 v-bind 为HTML标签绑定属性值，如设置 href , css样式等 v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。 代码： <!DOCTYPE html> <html ......
Vue指令
指令 作用 v-bind 为HTML标签绑定属性值，如设置 href , css样式等 v-model 在表单元素上创建双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染 v-else v-else-if v-show 根据条件展示某元素， ......
Vue2.0和3.0watch侦听器的改变和一些问题
话不多说，直接上代码演示 运行结果 可以清楚地看到当监听的值是一个reactive定义的对象数据类型时，无法正确获得oldValue的值，也即数据发生改变之前的数据，此问题到目前仍未得到解决，不知在后续的版本中，尤雨溪及其他的团队来怎么解决这一问题 ......
Vue
Vue 1.什么是Vue? Vue是一款渐进式前端框架基于MVVM模式,免除JS中DOM操作,简化书写和操作流程. 2.如何使用? 1.新建一个HTML文件,引入Vue.js文件. <script src="js/vue.js"></script> 2.创建Vue对象,定义模型数据. <!--2 创 ......
vue中新的状态管理器-pinia
背景 对于pinia的使用，可参考官方文档在这不做过多赘述。这边主要来讲讲pinia中 少用且好用的方法，为什么我们选择pinia而不用vuex ps: 以下写法全部基于组合式API 使用方式： 先下载依赖 npm i pinia -s 在vue3中，main.js这么写 import { crea ......