Bulut0907

vue-element-admin是基于Vue和Element-ui 的一套后台管理系统集成方案。因为功能太多，所以不适合做基础模板来进行二次开发功能介绍请点我点我打开在线前端页面但vue-element-admin的最精简版vue-admin-template，适合做基础模板来进行二次开发。可以从vue-element-admin拷贝需要的功能过来，也可以自己开发点我打开在线前端页面源码项目主要结构如下：|-build 构建项目时需要用到的文件|-mock 产生模拟的后端数据|-src。

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是“只是JavaScript”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。Vue3对这些API做出了调整。将全局的API，即：Vue.xxx调整到应用实例app上。Vue2有许多全局API和配置。等待异步组件时渲染一些额外内容，让应用有更好的用户体验。一种能够将我们的组件html结构移动到指定位置的标签。子组件中声明自定义事件。

Composition API的优势: 可以更加优雅的让相关功能的代码更加有序的组织在一起。如下图所示，每一个相关的功能都使用一个hook函数来实现，然后在其它组件进行引用，这样新增或修改一个需求，只需要修改对应的hook函数即可。使用传统OptionsAPI配置项API，新增或修改一个需求，就需要分别在data，methods，computed等修改。如下，开发者工具可以看到有Fragment。

效果如下：在输入框的hello后面，快速的输入123，过一段时间，下面的hello也更新为hello123。再点击修改姓名，页面重新渲染，会将之前对markRaw的person.car的数据的改变也更新到页面。点击先获取再改变最原始的person信息，页面没有发生变化，但其实person的数据已经改变了。同时也会出现改变车的价格按钮。点击改变车的价格，页面没有发生变化，但其实person.car的数据已经改变了。再点击修改姓名，页面重新渲染，会将之前对toRaw数据的改变也更新到页面。

本质是一个函数，把setup函数中使用的Composition API进行了封装。封装后可以供多个组件使用类似于vue2.x中的mixin使用示例挂载组件的时候，会给window注册一个点击事件。每次点击鼠标时，会修改point的x和y为鼠标的坐标卸载组件的时候，会将window上的这个点击事件删除hook函数返回point// 实现鼠标“打点”相关的数据x:0,y:0})// 实现鼠标“打点”相关的方法// 实现鼠标“打点”相关的生命周期钩子})})School.vue。

情况一：监视ref所定义的一个基础类型数据immediate开启时初始化就会调用一下使用watch监视一个属性多次，监视回调函数就会调用多次情况二：监视ref所定义的多个基础类型数据情况三: 监视ref所定义的一个对象类型数据。对象内的属性发生改变不能监视到监视方式一: 使用person.value，这样监视的不是RefImpl，而是Proxy。这种也能深度监视监视方式二: 使用配置参数{deep:true}开启深度监视监视问题: 监视的oldValue和newValue一样。

Vue开发者工具setup中的数据和函数分开显示的。点击按钮，触发自定义事件，弹出弹窗。看下面的App.vue示例。Vue3则不存在这些问题。点击按钮，人员信息能改变。点击按钮，人员信息能改变。点击按钮，人员信息能改变。

vite是新一代前端构建工具。

提供常用的布局、按钮、输入框、下拉框等UI布局，以组件的形式提供。使用这些组件，结构、样式、交互就都有了。是UI组件库专门进行按需引入的一个库。可以借助它来实现按需引入。移动端常用UI组件库。PC端常用UI组件库。

作用：不借助实现路由跳转，让路由跳转更加灵活。如让button进行路由跳转、延迟就行路由跳转。使用方法和router.beforeEach差不多，只不过。路由组件所独有的两个钩子，用于捕获路由组件的激活状态。再点击Music，再点击Car。作用：让不展示的路由组件不被销毁，保持挂载。保护路由的安全，对路由进行权限管理。是作用于当前路由映射规则的。

点击music2，页面的url变成了http://localhost:8080/#/news/music/detail?内容区显示Detail组件接收到id=2的相关内容。点击music3，页面的url变成了http://localhost:8080/#/news/music/detail?点击Music，页面的url变成了http://localhost:8080/music1#/news/music，但是并没有重新加载一次页面。导航栏的Music激活css样式，而且内容区显示Music组件的内容。

路由就是一组key:value的对应关系。vue可能是function或component多个路由，需要经过路由器管理是为了实现SPA(single page web application)单页面应用。以前需要实现多个html，现在只需实现一个html就能达到多个html的功能。如点击导航区的班级管理，只有url地址发生变化，而页面不会刷新，也不会打开新的标签页SPA的原理：当我们点击班级管理，router发现url路径变成了/class，就会去加载班级组件；

mapGetters方法：用于映射getters中的数据为computed的计算属性。mapState方法：用于映射state中的数据为computed的计算属性。当state中的数据需要经过加工后再使用时，可以使用getters加工。src/store/index.js如下所示。将多种不同类的数据进行分类，让代码更好维护。

在Vue中实现集中式共享数据管理的一个Vue插件，共享数据能让多个vue组件进行读写，从而实现任意组件间通信的功能。点我访问官网如下是使用全局事件总线，让B、C、D读写A中x的实现如下是使用vuex，让A、B、C、D读写vuex中x的实现。

App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上。理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据。App.vue：slot的使用者接收数据，然后将数据以不同的html结构插入到slot插槽。Category.vue：给slot定义name属性，区分不同的插槽。

偏向底层JQuery: 对xhr进行了封装。提供$get、$post等API。封装了太多DOM操作，不适合Vueaxios: 基于promise的网络请求库，支持请求拦截器和响应拦截器，体积小，只有JQuery的1/4fetch:上直接有这个方法，也是基于promise的。但是会将返回的请求包两层promise，需要两次.then才能拿到请求，IE浏览器兼容性差Vue使用Axios请求不同端口的服务，会出现类似下面的错误。即CORS跨域问题。

Test3.vue：直接在transition-group指定属性就可以了。指定的属性可以去https://animate.style/官网去查看。想要更多可以去https://www.npmjs.com/进行搜索。还要另外两种方式引入animate.css文件。作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

一种组件间通信的方式，适用于子组件给父组件传递数据。在父组件中给子组件绑定自定义事件，事件的触发在子组件，事件的回调函数在父组件中绑定自定义事件：(只能被触发一次)或第二种方式，在父组件中：先用给子组件注册引用信息，这样就能获取到Student的组件实例对象vc。然后再在父组件中通过生命周期函数mounted进行绑定自定义事件// this.$refs.student.$once(......) // 只能被触发一次。

School.vue组件：style demo能生效，且style demo只在School.vue有效。style title不生效。基本原理就是给每个HTML标签随机生成一个属性，然后通过属性进行样式的绑定。如果在.vue文件的style中使用less语法。需要安装less-loader。App.vue组件：style title能生效。点击按钮，弹窗显示UUID。

name:'App'

导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到。在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。public/index.html和src/main.js我们使用前面创建的项目的。

在Vue中，Vue和VueComponent的原型链关系，如下图所示。组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。这样可以让组件实例对象(vc)可以访问到Vue原型上的属性、方法。可以使用name配置项指定组件在开发者工具中呈现的名字。我们先通过一个简单的js示例，来理解js的原型链。VueComponent的原型链使用示例如下。关于school组件。

点我n+1后，此时n的值是: 2，控制台全部输出如下。会先监视到n的变化，再进入到update流程。点我销毁vm，控制台全部输出如下。此时再点我n+1没有反应了。下面我们通过一个示例，来对生命周期回调函数进行应用。我们可以通过如下的程序，来看下具体的执行过程。

我们通过一个需求，来实现一个简单的自定义指令需求：定义一个v-big-number指令，和v-text功能类似，但会把绑定的数值放大10倍big-number函数何时会被调用？指令与元素成功绑定时指令所在的模板被重新解析时放大10倍后的n值是： // 定义全局指令// })new Vue({data:{n:1},// 局部指令。

不是必须要用的，用计算属性、method方法也可以实现。不传时间戳，默认就是当前时间。

可以看到observer对象，就是实现了getter和setter方法，实现了对data属性的数据代理。注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性，即不能。当对vm._data的数据进行访问和修改，实际是对data的数据进行访问和修改。点击按钮，添加性别属性并显示到页面。

key可以使用数据的唯一字段(最好)，也可以使用index(默认)旧虚拟DOM中未找到与新虚拟DOM相同的key。这里代码还是和上面的一样，只是修改为。再点击添加一个老刘。再点击添加一个老刘。开发中如何选择key?

也分为数组写法和对象写法。

当监测的属性，只有handler时，可以简写。

当修改姓或名，vue会去重新加载模板，然后函数也会被调用。但如果模板中存在多个fullName()，则会被调用多次而不是一次。可以设置setter方法。当fullName被修改时setter被调用。当计算属性只要getter，没有setter，可以进行简写。通过computed来定义计算属性。可以设置getter方法。

但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃。Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock。@keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到。系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)注意: 多个事件修饰符可以连写，如。

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在vm实例中，访问vm.name和vm._data.name是一样的。可以通过这两对data中的name属性进行读写。可以通过Object.defineProperty动态定义属性和设置属性的值。通过一个对象代理对另一个对象中属性的读写操作。如下通过obj2代理obj1的x属性。通过vm对象来代理data对象中属性的读写操作。

用于解析标签（包括：标签属性、标签体内容、绑定事件…Vue中有很多的指令，且形式都是：v-xxxx，此处我们只是拿v-bind举个例子。运行，输入框都显示hello，在下面的输入框输入12345，上面的输入框也同步显示12345。vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。Vue的设计参考了MVVM模型。Vue的MVVM模型如下。点击就可以跳转到baidu。

因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。

一套用于构建用户界面的渐进式JavaScript框架。渐进式就是可以自底向上逐层的应用，简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的vue插件采用组件化模式，提高代码复用率，且让代码更好维护------一个页面模块就是一个vue文件，里面集成了html、css、js声明式编码，让编码人员无需直接操作DOM，提高开发效率。