随笔分类 - vue
摘要：注意：需要根据属性进行排序 直接上代码： <template> <el-table ref="table" :data="tableData" border :span-method="objectSpanMethod" > <el-table-column prop="project" label
阅读全文
摘要：先来看看效果 一个简单的效果实现，本例使用vue实现： <template> <div class="menu" :class="{ 'menu-select': isMenu }" @click="setMenu"></div> </template> <script> import { reac
阅读全文
摘要：创建一个 store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(sta
阅读全文
摘要：最近在学习vue3，在搭建项目的时候，使用 keep-alive 的包裹 router-view 会有警告信息 <router-view> can no longer be used directly inside <transition> or <keep-alive> 代码如下： <transi
阅读全文
摘要：我们在开发中，大多数需求都要求在列表中进行删除操作，但是又不能一点击，就直接删除。因此我们需要用到 el-popover 来给用提示，再次确认之后，进行删除操作。 但是问题也随着来了，在使用 el-table 表格循环列表中嵌套使用 el-popover ，并且在 el-table-column 属
阅读全文
摘要：最近在研究vue3，但是在启动的时候报一下错误，再次记录一下： ERROR Error: Cannot find module 'vue-loader-v16/package.json' Error: Cannot find module 'vue-loader-v16/package.json'
阅读全文
摘要：在vue开发中，我们会遇到很多关于打印的需求，我将比较常用的方法记录一下。 我使用的方法是在页面设置一个节点，获取该节点，通过给该节点追加样式来实现打印。 html页面元素 <div id="review-print-box" v-show="false"> 需要打印的内容 </div> v-sho
阅读全文
摘要：在Vue中，我们赋值的时候发现都是响应式的，所以我们在设计属性值的时候，也应该是响应式的。 一、概念 我们在给一个对象赋值的时候可以通过简单的 . 形式进行赋值，同时等价于使用 defineProperty 来进行赋值： let o = {} // 给o提供属性 o.name = '张三' // 等
阅读全文
摘要：我们在使用elementIUI实现表单验证，内容比较多的时候，提示内容会被遮挡，这时候用户不清楚什么情况，还会连续点击提交按钮。这个时候需求来啦：我们需要在表单验证不通过的时候，页面滚动到对应的位置。 了解来需求，那我们来看看如何实现？其实比较简单，下面说一下大致思路： 在表单验证方法validat
阅读全文
摘要：什么是柯里化？为什么要使用柯里化来实现封装？我们通过概念和案例来说明一下： 概念 一个函数原本有多个参数，传入一个参数，生成一个新的函数，新的函数接收剩余的参数来运行得到结果。 柯里化相关学习资源： 详解JS函数柯里化 函数式编程入门教程-阮一峰 案例 1.判断元素 Vue 本质上是使用 HTML
阅读全文
摘要：上一次我们简单实现了HTML模拟Vue实现数据渲染，发现还是有很多问题的，这次继续进行优化： 代码没有整合 只考虑了但属性，而Vue中大量使用了层级（ {{ child.name }} ） Vue使用的是 虚拟DOM 下面将通过这三个内容简单说明Vue的实现 页面节点： <body> <div id
阅读全文
摘要：想要使用html实现和vue一样的数据渲染效果，首先需要知道vue实现数据渲染的大致思路： 获取需要渲染的 DOM 节点 获取需要渲染的数据data 将 DOM 节点和数据data相结合形成新的DOM 将新的DOM渲染到页面 下面来通过代码具体说明实现过程 <body> <div id="root"
阅读全文
摘要：最近安装了ESLint，用这个工具之后发现居然不会写代码了。好尴尬~ 感觉自己以前写的JS都是假的... 没有++操作 increment(state) { state.count ++; }, 然后报了如下错误 Unary operator '++' used. 后来我发现，原来在VS code编
阅读全文
摘要：首先在项目根目录创建一个名叫.prettierrc的格式化配置项文件，文件内的格式为json格式。 semi: falae 为true 格式化在行尾加分号，false不加分号 singleQuote: true 为true表示格式化以单引号为主 { "semi": false, "singleQuo
阅读全文
摘要：使用原生vue实现瀑布流，发现无法实现小程序那种滚动到地步触发加载效果，只能自己研究了 实现效果： 实现代码： 首先添加监听滚动事件 mounted() { window.addEventListener("scroll", this.scrollBottom, true); }, 滚动事件实现：
阅读全文
摘要：<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei'
阅读全文
摘要：方法一：使用微信提供的 getCurrentPages() 来实现 方法二：通过中心文件配合$emit(),$on()来实现 传送门
阅读全文
摘要：1.在封装好的组件上使用，所以要加上.native才能click 2.prevent就相当于..event.preventDefault() 所以@click.native.prevent是用来阻止默认行为的 ; 参考链接：https://blog.csdn.net/caimaomaocai/art
阅读全文
摘要：1.写一个简单的子组件main/index.vue： 在子组件中有一个childMethod方法 2.在父组件中引用这个子组件的childMethod方法： 说明： 首先，引入子组件文件，然后用ref给子组件一个id标识，然后通过this.$refs.mainindex.childMethod();
阅读全文
摘要：解决方法: 主要是弄清楚path和node——modules的关系 我这边主要是要在安装的node目录下执行，执行命令npm config list 找出图片中prefix的路径 输入： 输入vue -V ，会输出对应版本号，然后在切换到其他目录，输入 vue -V ，莫名的也可以输出版本号 参考链
阅读全文