Serena_tz的博客

登录页面index.vue。样式index.scss。

可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题。npm install出现报错：在C盘/用户/该账号目录下找到.gitconfig文件，配置.gitconfig文件。，更多详细内容可以查看。

啊…电脑出了点小问题，本来要用去维修点进行维护的，现在又需要用起来，前段时间恢复了系统，电脑里面什么软件都没有了，现在就是先装一下软件吧…环境node.js：v12.14.1npm：v6.13.4vue：@vue/cli 4.2.3安装hbuilderXHBuilder下载地址：在HBuilder官网http://www.dcloud.io/点击免费下载，下载最新版的HBuilder。安装vscode官网：https://code.visualstudio.com/。安装汉化插件，直接在

https://blog.csdn.net/m0_45070460/article/details/107541592

localStorage存一个数据。储存的都是字符串。将对象修饰一下，让我们能看到对象的内容。JSON.stringify。读取一个数据。移除一个数据。清空所有的数据。自己删除，或者清除缓存的时候就不会存在。sessionStorage关闭浏览器重新打开以后就会没有。总结...

v-for很重要的key。每一个结构拥有唯一的标识。在react中直接报错。v-for="(item,index) in list" :key-"index"//不加的话在老的脚手架中容易报错可以遍历数组、对象、字符串等。总结key******【重要，面试中喜欢问】key给每个节点一个标识，就像人类社会的身份证号码一样。每个数据的id不由我们维护，在服务器中生成。key是vue内部使用的，所以生成真实的DOM树的时候，不会再显示。没有加上key的时候，代码运行的效率更低。

1.props/$emitprops主要用于父组件传递数据给子组件，父==>子。Vue自定义事件父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件仅仅用于父子组件传递，不适用于 三层及其以上2. $emit/$on这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当

路由，router。SPA应用。页面不重新刷新。浏览器的路径发生变化，router就会检测到，就会切换组件。vue-router的理解对SPA应用的理解路由的理解vue-router的使用注意vue2中应该使用vue-router3，不然会报错。创建文件。标签页。增加点击样式。总结文件分类前者放一般组件，后者放路由组件。vm实例。总结嵌套路由总结query参数拿到对应的数据。使用模块字符串。两种写法：总结

vuex是什么全局数据总线vuexvuex专门解决共享数据的问题。什么时候使用vuex多组件需要共享数据，只保存一份，需要修改的时候，所有组件的数据都能同步更新。vuex工作原理图

默认插槽组件中的标签体内容。标签体内容放在哪里，需要定义一个插槽。具名插槽我们需要使用多个插槽。每一个插槽都有一个自己的名字。不往插槽里面放内容，插槽的默认内容就会显示。template可以用来包裹元素，然后不生成结构。另外一种写法：...

放置静态的css文件。引入我们添加的css文件。在app.vue中引入一个样式，出现报错。import引入资源，脚手架严格检查，css中用到了没有存在的资源就会出现报错。在index中引入比较好，放在public中。ES6的模板字符串。...

用node.js写的服务器，运行一个node.js文件。真正的开发中不常用。库封装好了ajax请求，我们使用axios，因为jQuery中的要执行DOM操作，我们使用vue的时候要尽量避免对DOM进行操作。下面两个库，都是对xhr封装。windows的内置方法就有一个fetch，可以直接请求。IE浏览器用不了。引入axios。发送一个axios请求。出现跨域问题。跨域是因为违背了同源策略。同源策略：协议名、主机名、端口号必须一致。cors解决跨域，后端人员配置一些特殊的响应头

给谁绑的，谁就触发。组件上的@click，vue以为是自定义事件，我们需要用native修饰符。总结全局事件总线任意组件间通信。Vuecomponent：中转的数据放在vue的原型对象上。数据中转。在组件销毁之前，解绑事件。总结消息订阅与发布...

组件的划分是按照功能点的划分。浏览器本地存储localStorage存一个数据。储存的都是字符串。将对象修饰一下，让我们能看到对象的内容。JSON.stringify。读取一个数据。移除一个数据。清空所有的数据。自己删除，或者清除缓存的时候就不会存在。sessionStorage关闭浏览器重新打开以后就会没有。总结...

脚手架我们一般，使用最近的版本，vue的核心技术我们使用vue2比较多。使用步骤不配置淘宝镜像下载速度就会比较慢。你需要使用vue2还是vue3呢？成功创建了一个项目。开启一个内置的小服务器，我们可以看到我们的项目。文件结构git的忽略文件。balel的配置文件，可以直接使用官方写好的就可以。包的说明书：对项目的说明。main.js执行完指令npm run serve以后，首先执行的就是main.js文件。App.vue放静态资源。组件。

模块的含义组件的含义模块化组件化非单文件组件和单文件组件一个.vue都是一个单文件组件，我们都使用单文件组件。非单文件组件是，我们在一个html结构中有很多个组件。创建组件组件在创建的时候从来不说为谁服务。在组件中，data只能写成函数的形式。假如我们使用的是对象，指向很多不同的地方，每个地方修改所有地方都会修改。我们写成函数的形式，每一次应用组件，都是给我们返回一个全新的对象，修改对象与别的组件互不影响。使用组件：创建组件—》注册组件—》使用组件。组件的属性名和

前言js的表达式，对象的简写就是属性和属性值相同，简写可以只写一个。js很多时候难以识别小数，因此我们需要用小于等于，而不是等于来直接写死。触发了函数的调用，并且在页面不会显示。返回值是一个undefined。但是vue不会显示undefined。然后该方法放在methods就会进入死循环。因此我们需要引入生命周期。mounted挂载，也就是将真实的DOM树放入页面。生命周期的基本含义。debugger断点，打一个断点，代码分析到哪里，断点就打在哪里。生命周期图例：在这个

一些常用的指令v-text与插值语法有一点点相同，所有字符串都当成文本显示。v-html支持结构的解析。cookie身份的标识。别人的服务器获取cookieXSS攻击！总结node.js开启服务器v-clockv-once只动态渲染一次。v-prev-pre加了的节点，vue再也不会去解析。自定义指令简写形式和完整形式。自定义指令的坑命名方式：key里面的内容出现-，不能写简写形式，要写字符串形式。指令中的回调的this

vue进行日期的库显示格式化的时间默认接收一个参数，我们也可以自定义格式，然后传入参数，但是如果我们写了形参，而没有实参，就会有一个默认的格式，所以我们也需要自定义一个默认的格式。假如实参中传入了格式，我们就使用传入的格式，如果没有实参，我们就使用我们自定义的格式。多个过滤器，一层一层传递参数。局部过滤器。全局过滤器。创建实例之前就使用。罕见的用法。v-model不支持。总结...

前言form标签的action用于指定表单提交的地址，现在的前后端交互我们一般用不到这个属性，不会真正往一个地址提交数据。form只是作为一个元素的呈现，一个结构，我们提交数据使用的是ajax。label添加控件的点击区域。单选name相同，表示这组单选是一组的，只能选择一个。v-model默认获取的是value的内容。多选多选也要配置好value值。绑定的是数组。下拉框表单提交表单提交的默认行为就是跳转页面，会刷新一下，我们需要阻止默认行为。数据传递后端将vue

条件渲染控制元素的显示与隐藏v-show底层实现就是控制元素的display，不去动DOM树，只控制样式v-if确定不显示，元素结构将不见，适用于切换元素比较低的场景v-else-if与v-if的结构需要紧紧挨在一起，v-if必须是一开始使用的v-else同v-else-if，后面不需要再添加条件啦！template只能配合v-if使用，不破坏原本的结构。总结列表渲染v-for很重要的key。每一个结构拥有唯一的标识。在react中直接报错。v-for="(ite

绑定class不需要亲手操作DOM，只需要修改维护的数据。字符串写法适用于样式的类名不确定，需要动态指定。数组写法适用于绑定的样式个数不确定、名字也不确定。对象写法适用于绑定的样式个数确定、名字也确定，但是要动态决定用不用。绑定style对象写法和数组写法：...

vue的页面模板代码不建议过于复杂~模板里面可以直接读数据，但是在进行数据处理的时候我们要用this。vue开发者工具的坑，如果我们修改了一个数据，但是页面没有显示的需要，开发者工具中也就不会显示相应的修改，但是实际上，修改已经发生！模板代码中可以写一些简单的语句！模板里面只能写vm里面的，或者vue原型上面的。一般我们不建议这样子写。监听属性data中的属性和计算属性都可以监视。另外一种写法：总结深度监视监视多级结构中key的变化。属性中属性监听我们要使用深度监听。监视多级

vue的原则，页面的模板代码不能够太复杂！！我们使用函数来计算的话，每次调用函数，没有缓存而言，比较麻烦，我们需要使用计算属性！计算属性的写法需要写成一个对象计算属性会有缓存。get什么时候调用呢？初次读取该数据的时候所依赖的数据发生改变时也会调用set不是必须写的，但是如果我们需要修改这个计算属性，我们就需要写set。总结计算属性的简写如果计算属性只读不改的话，我们可以考虑简写形式。直接写成一个函数，当做get函数使用。【插件】vue的代码片段...

vue的数据代理——数据代理就是通过一个对象代理对另一个对象中属性的操作（读/写）最简单的数据代理的例子：Object.defineProperty()Object.defineProperty(person,"age",{ value:18})Object.keys()参数中传入一个对象，将对象中的属性名，形成一个数组返回。for(let key in person){ }既能遍历数组，又能遍历对象vue的数据代理。通过创建的vue的实例vm这个对象代理data中的数据

MVVM模型基本了解数据集中到一起—>模板代码----> 框架开始工作

由vue管理的函数，一定不要写为箭头函数，会改变this的指向！简单的刷新会加载出来部分文件，强制刷新可以加载出完整的文件！一个容器只能被一个实例接管，前面的实例接管。实例不能接管两个容器，只显示前面那个。中的数据流向页面，页面中的数据也流向。单向的数据绑定，只能从。指定绑定容器的两种方法。

在使用指令 npm run build打包以后，我在本地点开dist文件夹下的index.html，浏览器提示我找不到文件。经过仔细排查以后发现，原来是因为我的路由使用了'history'模式，也就是mode: 'history', 当时将hash模式改为'history'模式，是因为地址栏老是出现#，感觉很不美观，后来还是直接换成了hash模式，比较方便。然后，我在网上看了一下'history'模式下处理的方法，感觉有点麻烦。参考：http://www.qzroc.com/index.php/ar

在PC端做管理类项目使用UI框架可以用vue-element-admin，官网：https://panjiachen.github.io/vue-element-admin-site/zh/ 。学习网址：https://www.oschina.net/p/vue-element-admin?hmsr=aladdin1e1。

从github上面拉取一个项目运行起来，首先要安装该vue项目所需要的依赖包，然后使用项目运行指令。npm inpm run dev npm i指令下载项目所需的依赖包，如果下载速度过慢，就使用cnpm i淘宝镜像安装吧，项目运行指令可以查看项目配置文件package.json中"vue-cli-service serve"的指令是什么，如下图，项目启动的指令就是npm run dev。...

在手机浏览器上面我们可以直接查看vue项目。在有网的条件下，我们使用指令npm run serve启动一个项目，会出现两个网址，一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（Network），我们可以在手机端查看我们的vue项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。...

公司的好多个vue小项目的依赖包基本是一样的，项目完成的系统也是差不多的系统，为了减少冗余文件，同事跟我说，要让这些项目都共用一个node_modules。首先我用npm i安装了一个node_modules，然后把该目录放到了所有项目的根目录下。D:\Project\node_modulesD:\Project\ProjectAD:\Project\ProjectBD:\Project\ProjectC然后修改了电脑的环境变量，变量名为：NODE_PATH，变量值为：D:\Project\n

很久之前完成的项目，从git上面拉取下来以后使用npm i指令安装好依赖包后，使用npm run serve指令运行项目却出现了报错。明明所有的依赖包都是自动安装的，并没有额外安装，但是运行项目的时候却提示我，缺少chokidar，于是npm i chokidar --save，安装好了chokidar，并添加了依赖，再运行项目的时候就没有报错了。...

由于 JavaScript 的限制，Vue不能检测数组和对象的变化，在我们改变数组和对象的数据时，页面没有办法响应式改变。因此，我们要采用一些特殊的方法来让页面响应数组和对象的改变。数组Vue 不能检测以下数组的变动，让页面响应式改变：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength举个例子：var vm = new Vue({ data:

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中。例如：<template> <section> <div ref=

路由权限校验路由配置文件 src/router/index.js，找到asyncRoutes这个数组，在需要配置权限的路由上添加meta属性，meta是一个对象，meta对象上添加roles属性，roles是一个数组，里面可以放admin、editor两个角色。export const asyncRoutes = [ { path: '/book', component: Layout, redirect: '/book/create', meta: { title: '图书

最近在做一个项目时，我希望在已办页面和待办页面分别跳转到详情页时，详情页根据前一个页面的不同从而显示不同的组件，所以使用了vue的路由带参数查询。具体的代码：this.$router.push({ path: '/detail', query: { flag: true, }});我传入的是布尔值，true和false，但是详情页进行真假判断的时候，通过this.$route.query.flag得到的flag的值总是为真值，导致从已办页面和待办页面跳转

简单来说: vuex就是对应用中组件的状态进行集中式的管理(读/写)。在线文档: https://vuex.vuejs.org/zh-cn/。状态自管理应用state: 驱动应用的数据源view: 以声明方式将state映射到视图actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)多组件共享状态的问题多个视图依赖于同一状态，来自不同视图的行为需要变更同一状态以前的解决办法：* 将数据以及操作数据的行为都定义在父组件* 将数据以及操作数据的行为传递给需要的

vue是什么一位华裔前Google工程师(尤雨溪)开发的前端js库作用: 动态构建用户界面特点:遵循MVVM模式编码简洁, 体积小, 运行效率高, 移动/PC端开发它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目与其它框架的关联:借鉴angular的模板和数据绑定技术借鉴react的组件化和虚拟DOM技术vue包含一系列的扩展插件(库):*vue-cli: vue脚手架vue-resource(axios): ajax请求vue-router: 路由

知识储备[].slice.call(lis): 将伪数组转换为真数组node.nodeType: 得到节点类型Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符)configurable: true/false 是否可以重新defineenumerable: true/false 是否可以枚举(for..in / keys())value: 指定初始值writable: true/false value是否可以修改存