目录1. 常规风格的示例工程开发2. 使用组合式API重构用户列表页面3. 优化用户列表页面1. 常规风格的示例工程开发首先新建一个名为 normal.html 的测试文件，在HTML文件的head标签中引入Vue框架并设置常规的模板字段如下：<!DOCTYPE html>
<html lang="en">
<head>
......
227
0
0
2023-06-04
目录element自定义指令实现表格横向拖拽自定义指令设置及常用自定义指令指令定义函数提供了几个钩子函数（可选）下面分享几个实用的 Vue 自定义指令element自定义指令实现表格横向拖拽有时候表格内容会很多，需要横向滚动查看右边的内容，又不想到底部拖动滚动条，如果能直接在内容中拖动就好了，这个时候就可以用 Vue 的自定义指令来实现了。为了以后扩展指令方
......
251
0
0
2023-06-04
目录引言一、reactive 和 readonly1. reactive相关类型2. 相关全局变量与方法3. reactive函数4. 造物主createReactiveObject5. shallowReactive、readonly和shallowReadonly二、对应的 Handlers1. baseHandlers1.1 reactive1.2 r
......
175
0
0
2023-06-04
目录Echarts使用动态数据的两种方式1.通过computed2.在data中定义optionvue Echarts几种常用图表动态数据切换1.柱状图 2.平滑折线面积图3.折线图堆叠4.饼状图Echarts使用动态数据的两种方式在使用Echarts时我们数据一般不是静态写死的，而是通过后端接口动态获取的，在此总结两种在vue框架下Echarts
......
211
0
0
2023-06-04
目录前置内容解析模板总结前面我们分析了v-model的原理，接下来我们看看v-bind的实现又是怎样的呢？前置内容<template>
<div>
<test :propTest="a"></test>
<div @click="changeA">点我</div>
......
167
0
0
2023-06-04
目录引言一、watch参数类型1. 选项options2. 回调cb3. 数据源source二、watch函数三、watch的核心：doWatch 函数引言想起上次面试，问了个古老的问题：watch和computed的区别。多少有点感慨，现在已经很少见这种耳熟能详的问题了，网络上八股文不少。今天，我更想分享一下从源码的层面来区别这八竿子打不着的两者。本篇针对
......
190
0
0
2023-06-04
目录前情提要初始化组件(1).setupComponent(2).initProps(3).initSlots额外内容总结前情提要上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例)、setupComponent(初始化组件)、setupRenderEffect(更新副作用)。并且上一节中我们已经详细讲解
......
231
0
0
2023-06-04
目录前情提要1. Mount函数2. 创建虚拟节点的几个方法(1) createVNode:用于创建组件的虚拟节点(2) createElementVNode:用于创建普通tag的虚拟节点如<div></div>(3) createCommentVNode:用于创建注释的虚拟节点(4) createTextVNode:用于创建文本的虚
......
217
0
0
2023-06-04
目录定义依赖收集依赖触发依赖总结定义依赖定义依赖是什么时候开始的呢？通过源码可以发现在执行_init函数的时候会执行initState(vm)方法：function initState(vm) {
...
if (opts.data) {
initData(vm);
}
else
......
179
0
0
2023-06-04
目录使用正则校验文本框为正整数校验数字的正则表达式校验字符的正则表达式特殊需求正则表达vue正整数校验规则及说明使用正则校验文本框为正整数封装一个指令，简单粗暴，不需要在input上加上一大堆的方法或正则那么麻烦。1.创建一个js文件，用来注入Vue全局指令// 移入Vue
import Vue from 'vue';
// 通过Vue的指令方法，定义指
......
179
0
0
2023-06-04
目录前情提要mountComponent创建组件实例总结前情提要上文我们讲解了执行createApp(App).mount('#root')中的mount函数，我们分析了创建虚拟节点的几个方法，以及setRef的执行机制、本文我们继续讲解mountComponent，挂载组件的流程。本文主要内容createComponentInstance发生了什么？如何标
......
233
0
0
2023-06-04
首先会通过module.hot.accept监听文件变化，并传入该文件的渲染函数：module.hot.accept(/*! ./App.vue?vue&type=template&id=472cff63&scoped=true& */ "./App.vue?vue&type=template&id=472cf
......
168
0
0
2023-06-04
目录项目环境搭建插件开发点击事件上报vue自定义指令手动上报方法页面访问次数上报（pv，uv）页面停留时间（TP）获取公共参数引入axios打包发布使用说明OptionOptions 示例点击指令上报手动上报写在最后前端埋点对于那些营销活动的项目是必须的,它可以反应出用户的喜好与习惯,从而让项目的运营者们能够调整策略优化流程提高用户体验从而获取更多的$。这篇
......
308
0
0
2023-06-03
目录1 .prevent阻止默认事件2 .stop阻止事件冒泡3 .once事件只触发一次4 .capture使用事件捕获模式5 .self当e.target是当前操作的元素才触发事件6 .passive事件的默认行为立即执行7 .键盘事件1 .prevent阻止默认事件.prevent可以阻止默认事件的发生。例如，阻止a标签的跳转<div id="a
......
162
0
0
2023-06-03
目录computed 用法computed 实现computed 初始化computed 获取值的实现值的展示缓存功能computed 设置值实现computed 用法本文给大家带来的是vue3 中 computed API的实现。大家看过vue3的官网，应该都知道，在vue3 的组合式API中，computed这个功能与以往的有所不同了。以往vue2 的
......
309
0
0
2023-06-03