随笔分类 - 前端 / Vue学习
摘要：一、问题描述 开发的时候免不了有时候需要向某个节点appendchild，添加子节点， 但是如果是在vue中，就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。 二、解决思路 通过查看原始的节点与新增的节点发现，原始节点与新增节点的class都一样，但是原始的
阅读全文
摘要：<el-tree :data="layersName" :props="defaultProps" node-key="id" :default-checked-keys="checked" show-checkbox @check-change="handleCheckChange" dragga
阅读全文
摘要：问题 el-button点击了按钮之后，将鼠标移出按钮，会出现保留点击的状态 再查看它的css样式后，可以看到官方默认设置有:focus的状态规则 解决办法 在el-button的css里自定义或者复制原有的color、border-color、background-color三条样式， 然后再重写
阅读全文
摘要：<el-tree :data="treeData" node-key="id" draggable :allow-drop="allowDrop" @node-drop="handleDrop" > </el-tree> 主要是用到了allow-drop这个方法，然后去判断元素被放置的位置是否和当前
阅读全文
摘要：js脚本 export function dragBox(drag, wrap) { // 用于获取父容器的样式属性值 function getCss(ele, prop) { // getComputedStyle返回值是带单位的字符串，所以得parseInt return parseInt(wi
阅读全文
摘要：修改样式 ::v-deep .el-menu { border-bottom: 0 ; } 改成下面所示 ::v-deep(.el-menu) { border-bottom: 0 ; } ::v-deep用法
阅读全文
摘要：按需引入 官方文档介绍 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先 安装 babel-plugin-component： npm install babel-plugin-component -D 然后 将 babel.config
阅读全文
摘要：今天刚开始新建一个vue项目，就在路由这卡死了，经过多次查找对比，发现了问题竟然是出现在一个括号上，如下所示 const routes=[ // 正确写法 { path:'/', name:"Home", component:()=>import ("@/views/Home") }, // 错误写
阅读全文
摘要：vue页面访问正常，但是一刷新就会404的问题? 为什么会出现404? 我们打开dist文件夹，可以看到只有一个 index.html 文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转; 接着我们再来分析一下后端 n
阅读全文
摘要：问题一 不在同一个页面的情况下，有多个router-view，当执行router.push({name:'...'})的时候，vue怎么知道在哪个组件的router-view实现跳转？ 我的思路 这种情况就属于多级路由的情况，如下图所示 页面最外层的router-view一般就是一级路由，而二级路由
阅读全文
摘要：首先，我们看一下官方解释 避免 v-if 和 v-for 用在一起 为什么？ 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级。 哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。 假如有一个列表，循环了10次的数据，每一次，都需要
阅读全文
摘要：父子组件通信 父->子props，子->父 $on、$emit 获取父子组件实例 $parent、$children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject 官方不推荐使用，但是写组件库时很常用 兄弟组件通信 Event Bus` 实现跨组件通信 `Vue.pro
阅读全文
摘要：运行 npm run build命令打包之后发现多了很多.map文件，占体积最大 搜索之后发现 map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 解决办法：去conf
阅读全文
摘要：最近在Vue项目开发的过程中遇到一个问题，那就是在点击同一个路由操作的时候，控制台会报错误提示。 它的提示是避免到当前位置的冗余导航。 简单来说就是重复触发了同一个路由。 const originalPush = VueRouter.prototype.push; VueRouter.prototy
阅读全文
摘要：1.找到npm安装目录下的npm.cmd, 2.将npm.cmd中的"prefix -g"修改为"prefix --location=global",保存
阅读全文
摘要：在win10 下安装yarn后，在终端中运行yarn命令的时候会出现： 解决方法 1：搜索powershell，以管理员方式运行powershell 2：使用命令更改计算机的执行策略 执行： set-ExecutionPolicy RemoteSigned
阅读全文
摘要：vue2.x的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。 Object.defineProperty(data, 'count', { g
阅读全文
摘要：插槽 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 > 子组件 。 分类：默认插槽、具名插槽、作用域插槽 使用方式： 默认插槽： 父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <templa
阅读全文
摘要：1.Vue中常用的按键别名： 回车 ⇒ enter 删除 ⇒ delete (捕获“删除”和“退格”键) 退出 ⇒ esc 空格 ⇒ space 换行 ⇒ tab (特殊，必须配合keydown去使用) 上 ⇒ up 下 ⇒ down 左 ⇒ left 右 ⇒ right 2.Vue未提供别名的按键
阅读全文
摘要：1.prevent:阻止默认事件（常用）; 2.stop:阻止事件冒泡（常用）; 3.once:事件只触发一次（常用）; 4.capture:使用事件的捕获模式; 5.self:只有event.target是当前操作的元素时才触发事件; 6.passive:事件的默认行为立即执行，无需等待事件回调执
阅读全文
