目录1 概述2 el：与DOM元素绑定3 data：定义双向绑定的数据4 computed：计算属性5 methods：定义Vue实例的方法6 Vue中的三种模板6.1 html模板6.2 字符串模板6.3 render函数模板7 watch属性8 模板渲染8.1 条件渲染8.2 列表渲染总结1 概述Vue.js是通过new Vue({...})来声明一个实
......
308
0
0
2023-06-28
目录引言将API传入到runtime-core中createRenderer 初始化createApp 内部实现runtime-corecreateAppAPIcerateVNode 创建组件虚拟节点类型表示虚拟节点创建render 虚拟节点渲染到容器中引言我们知道runtime-dom内部功能其实是 将渲染时所需要节点操作的 API （即rendererO
......
292
0
0
2023-06-24
目录基本用法插值样式遍历事件绑定高级部分事件修饰符ref和refInFor插槽（v-slot)指令过滤器总结基本用法首先需要约定一下，使用JSX组件命名采用首字母大写的驼峰命名方式，样式可以少的可以直接基于vue-styled-components写在同一个文件中，复杂的建议放在单独的_Styles.js_文件中，当然也可以不采用CSS-IN-JS的方式，使
......
251
0
0
2023-06-23
目录相关组件或插件运行时的项目依赖版本信息五种样式效果如下图：①创建通知提醒框组件Notification：②在要使用的页面引入：总结相关组件或插件运行时的项目依赖版本信息项目运行时依赖：vue@^2.6.12 vue-router@3.6.4项目开发时依赖：less@^4.1.3 less-loader@^5.0.0&nbs
......
342
0
0
2023-06-23
目录组件生命周期创建阶段beforeCreate阶段created阶段beforeMount阶段mounted阶段运行阶段beforeUpdate阶段updated阶段销毁阶段beforeDestroy阶段destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时
......
307
0
0
2023-06-22
目录背景介绍使用方法源码分析背景介绍近期业务开发，会想起之前做的两个组件的通信，社区推荐使用一个迷你库miit (200b), 因为vue3开发中没有了 EventBus 跨组件通信，这个替代的方案 mitt.js，原理还是 EventBusEventBus在多个组件之间进行事件通信的场景下还是比较有用的，通过监听事件和触发事件，可以在订阅者和发布者之间解耦
......
379
0
0
2023-06-22
目录el-autocomplete使用template实现需求分析1. 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口2. 缓存上一次已查询的数据&搜索条件：blurArr、blurTxt3.滚动加载指令(监听容器的scroll事件并进行防抖处理)4. 分页加载4.0 获取数据，并进行格式化4.1 关闭加载圈4.2 分页加载事件4.3 清空输
......
313
0
0
2023-06-22
目录介绍路由跳转和传参解决路由重复点击路由沉积的问题解决路由跳转后不能回到顶部的页面顶部的问题路由导航守卫和案例展示访问外部链接介绍vue-router相当于vue内部跳转链接，将需要切换的页面在vue-router里注册，在项目里配置就能完成页面的切换，它不仅能完成项目的切换，还能实现参数的传递，它还有个很重要的功能路由导航守卫（导航守卫分为前置导航守卫，
......
384
0
0
2023-06-22
目录实现思路场景分析测试用例步骤解析源码实现步骤解析拓展原型和原型链实现思路场景分析可以在全局父组件里通过provide将所有需要对外提供的全局属性方法进行跨组件透传，无论嵌套多深的子组件都可以进行inject注入使用，包括不限于计算属性、方法等，甚至将整个app.vue实例进行相应的透传；测试用例// example/apiinject/App.js
i
......
361
0
0
2023-06-22
目录问题提出搭建过程1、初始化项目1.1 创建项目1.2 安装vite对vue2支持的插件1.3 安装vue依赖1.4 修改项目文件结构1.5 运行一下项目2、vue-router2.1 安装2.2 新建router目录2.3 全局注册3、vuex3.1 安装3.2 新建vuex目录3.3 全局注册4、组件库4.1 安装4.2 按需引入4.3 在main.j
......
454
0
0
2023-06-21
目录一、存在问题二、还原场景需求提升三、进行分析3.1 直接赋值法3.2 通过方法解析3.3 通过computed计算属性3.4 two value3.5 父子组件 + 计算属性后记一、存在问题在v-model想绑定表达式 || 函数方法，发现控制台报错了，不允许这波操作。下面我们分析存在该问题的原因和解决方法。实战经验。二、还原场景有这样子的数组对象结构c
......
355
0
0
2023-06-19
目录前言思考实践定义参数定义一个开始函数核心方法配置项功能组件前言最近开发有个需求需要酷炫的文字滚动效果，发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办，那咱造一个呗。其实大多数版本更替导致公共组件不可用，最简单的做法就是在原版本的基础上进行修改调整，总体来讲花费的时间成本以及精力成本最低。思考先看下效果，明确需求，然后开始搬砖。明确基础
......
311
0
0
2023-06-18
目录准备：自定义指令介绍试炼：实现v-mymodel定义指令应用实践：4个实用的自定义指令权限控制输入限制内容处理文件预览总结准备：自定义指令介绍除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通
......
330
0
0
2023-06-18
目录一、前端项目目录结构二、vue单文件组件格式三、js导入语法四、父组件和子组件五、父组件往子组件中传数据（组件属性）实现步骤六、子组件往父组件中传数据（组件事件）实现步骤：拓展总结一、前端项目目录结构二、vue单文件组件格式注意1： scoped表示对当前组件生效<style scoped></style>这个是设置组件中html
......
287
0
0
2023-06-17
目录Vue中 常见的组件通信方式可分为三类Vuex简介1. State2. Getters3. Mutations4. Actions5. 使用 mapState、mapGetters、mapActions 简化总结传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解传送门：Vue中 $ attrs、$ listeners 详解及使用传送门：V
......
262
0
0
2023-06-16