上善若泪

在讲解之前，我们先了解一下数据响应式是什么？所谓数据响应式就是建立响应式数据与依赖（调用了响应式数据的操作）之间的关系，当响应式数据发生变化时，可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作，可以是DOM更新，也可以是执行一些回调函数。Vue3track（收集依赖）和trigger（触发依赖）

文章目录1 Vue3对比Vue21.1 生命周期的变化1.2 多根节点1.3 异步组件1.4 Teleport1.5 组合式API1.6 响应式原理1.6.1 Object.defineProperty1.6.2 Proxy1.7 虚拟DOM1.8 事件缓存1.9 Diff 优化1.10 打包优化1.11 自定义渲染API1.12 TypeScript 支持1 Vue3对比Vue21.1 生命周期的变化整体来看，变化不大，只是名字大部分需要 + on，功能上类似。使用上 Vue3 组合式 API 需要

文章目录1 引言1.1 vue文件基础1.1.1 template部分1.1.2 script部分1.1.3 style部分1.2 vue文件引用1.2.1 index.html1.2.2 main.js1.2.3 App.vue1.2.4 Menu.vue1 引言在没接触vue教程时，比较好奇vue文件是如何被引用的，后来系统地学习了一遍，虽然当时明白了，但还是记录下，毕竟好记性不如烂笔头1.1 vue文件基础什么是*.vue文件首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了

1 引言vuejs实现数据请求有 vue-resource和第三方包axios等1.1 vue-resource可以安装插件，早期vue团队开发的插件，但是停止维护了，作者推荐使用axios下载依赖npm i vue-resource安装依赖import VueResource from 'vue-resource';Vue.use(VueResource);//为来通过this.$http// Vue是所有势力的对象构造函数// Vue.protptype.$http ->

文章目录1 vuex简介1.1 安装引入1.1.1 普通网页引入1.1.2 NPM方式安装2 使用方式2.1 实例构造2.2 主要属性2.2.3 五大核心属性介绍2.2.3.1 state2.2.3.2 geeter2.2.3.3 mutation2.2.3.4 action2.2.3.5 modules1 vuex简介vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据；Vuex是为了保存组件之间共享数据而诞

文章目录1 mint-ui1.1 全部导入组件1.2 CSS示例使用按钮1.3 JS示例使用toast1.4 按需导入2 mui1 mint-ui饿了么组件mint ui：Github 仓储地址，Mint-UI官方文档1.1 全部导入组件导入依赖：npm install mint-ui -S页面引入// 全部引入import Vue from 'vue';import Mint from 'mint-ui';Vue.use(Mint);当全局安装后，对于CSS不用在导入了可以直接拿来使

文章目录1 普通网页引入vue包2 webpack引入vue包2.1 安装并导入2.2 导入解决问题2.2.1 修改路径2.2.2 不修改路径1 普通网页引入vue包使用 script 标签 ，引入 vue 的包在index 页面中，创建 一个 id 为 app div 容器通过 new Vue 得到一个 vm 的实例2 webpack引入vue包2.1 安装并导入安装npm i vue 导包import Vue from 'vue'在webpack中尝试使用 Vue需要注意

文章目录1 render1.1 没使用render函数1.1.1 代码说明1.2 使用render函数1.2.1 代码说明2 方法调用小括号问题1 render1.1 没使用render函数1.1.1 代码说明页面部分<!-- 引入vuejs的包 --><script src="./lib/vue-2.4.0.js"></script><div id="app"> <p>33333</p> <log

文章目录1 webpack介绍1.1 为什么需要`webpack`1.2 webpack定义webpack安装的两种方式1 webpack介绍1.1 为什么需要webpack由于在网页中会引用的常见的静态资源有：JS(.js .jsx .coffee .ts)CSS(.css .less .sass .scss)Images(.jpg .png .gif .bmp .svg)字体文件(Fonts)(.svg .ttf .eot .woff .woff2)模板文件(.ejs .jade .v

文章目录1 使用键盘监听2 使用监听事件2.1 watch监听2.1.1 监听属性2.1.2 监听路由2.2 computed监听3 watch,computed和methods三种对比需求分析：假如有两个姓名框，需要他们拼接成全名字怎么监听到文本框数据的改变，这样才能知道什么时候去拼接 出一个全名如何监听到文本框的数据改变呢1 使用键盘监听主要是使用了键盘的监听事件即method的方法事件页面部分代码<div id="app"> <input type="te

文章目录1 路由定义1.1 前后端路由区别：1.2 URL中的hash(#)2 安装方式3 使用路由3.1 路由对象3.2 路由对象挂载vue对象3.3 页面中路由组件3.3.1 路由展示3.3.2 路由跳转3.3.2.1 使用router-link3.3.2.2 使用router-link中默认样式3.3.2.3 不使用router-link中默认样式3.3.3 路由动画3.4 路由中参数3.4.1 query中获取3.4.2 params中传参3.5 路由的嵌套3.6 路由使用命名视图1 路由定义1

文章目录1 组件概念1.1 组件定义1.2 与模块区别2 组件使用2.1 创建组件2.1.1 全局组件2.1.1.1 使用 Vue.extend配合Vue.component方法2.1.1.2 直接使用 Vue.component 方法2.1.1.3 将模板字符串，定义到script标签中2.2 组件中的data1 组件概念1.1 组件定义什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；1

文章目录1 动画2 组件1 动画2 组件

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

文章目录1 vuejs基础1.1 理解mvc和mvvm1.1.1 mvc1.1.2 mvvm1.2 vuejs基本架构1.3 vuejs中的指令1.3.1 v-cloak,v-text,v-html区别1.3.2 v-bind1.3.3 v-model1.3.4 v-for1.4 vuejs中的事件修饰符1.4.1 stop1.4.2 prevent1.4.3 capture1.4.4 self1.4.5 once1.5 vuejs样式1.5.1 class样式1.5.2 内联style样式1 vuejs

文章目录1 import1.1 带花括号可以多个或分开导入1.2 不带花括号2 export2.1 export和export default区别1 importimport ... from和import {} from 的区别在与export导出的方式，若是export default在导入时不需要加{ }，若是export则非常需要加花括号{ }1.1 带花括号可以多个或分开导入//demo1.jsexport const str = 'hello world';export funct

文章目录1 Vuejs报错1.1 npm install 报错1.1.1 npm ERR! Unexpected end of JSON input while parsing near '...sh_time1.1.1.1 报错信息1.1.1.2 解决方案1.1.2 Error: EPERM: operation not permitted, unlink...1.1.2.1 报错信息1.1.2.2 解决方案1.1.2.2.1 删除node_modules1.1.2.2.2 删除npm缓存1.2 运行报错

文章目录1 javascript1.1 对象中this1.2 函数中this2 Vuejs2.1 vue组件中2.2 回调函数2.3 箭头函数1 javascript1.1 对象中this//test.jsvar out = { function inner(){ this }}// 此时函数中的this表示out对象1.2 函数中this//test.jsfunction inner(){ this}// 此时函数中的this表示全局对象window2 Vuejs2