随笔分类 - 前端 / Vue学习
摘要：Vue路由守卫 路由守卫，简单理解来说就是，当用户要进行一些操作时，需要用户的一些信息或数据或行为，判断过后，才会同意用户进行操作。 说到这里，大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制
阅读全文
摘要：＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.
阅读全文
摘要：1.全部缓存 使用Keep-alive标签包裹router-view就可以实现全部缓存 <keep-alive> <router-view> </router-view> </keep-alive> 2.缓存单个指定的路由 同样使用Keep-alive标签包裹router-view，在Keep-al
阅读全文
摘要：原来的vue2路由是通过this.$route和this.$router来控制的。 现在vue3有所变化，useRoute相当于以前的this.$route，而useRouter相当于this.$router 一、useRouter手动控制路由变化 import { useRouter } from
阅读全文
摘要：vue中的路由有时候需要参数，有时候不需要参数，可以如下图写法 在path中，在可选参数后面加一个?就行了
阅读全文
摘要：我们都知道vue slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值，获取到的值是一个对象。 注意：scope="它可以取任意字符串" 上面已经说了 scope获取到的是一个对象，是什么意思呢？ 我们先来看
阅读全文
摘要：1. 原生js获取dom元素： document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) 2. ref获取单个dom元素： <template> <div
阅读全文
摘要：介绍 当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载； 这样的做得目的可以很好的提高用户体验。 为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型。
阅读全文
摘要：Vue2中 <template> <div id="app"> <div ref="echohye">新年快乐</div> </div> </template> <script> export default { mounted() { console.log(this.$refs.echohye)
阅读全文
摘要：问题 目前是想实现双击元素时，切换元素，显示出input框，输入新title，失去焦点再切换回去 <div @dblclick="editTitle()"> <span v-if="draggable">{{ title }}</span> <el-input v-else @blur="loseF
阅读全文
摘要：Vue2中使用Element UI的图标渲染是通过 <i class="el-icon-plus"></i>渲染 Vue3 中使用Element Plus图标渲染是通过 <el-icon><Plus /></el-icon>渲染 所以在使用Element UI动态变换图标时就可以通过：class的方
阅读全文
摘要：找到路径C:\Users{当前登录的用户名}\下的.vuerc文件 打开此文件，修改packageManager的值就可以了 如果你想在项目中使用npm包管理工具，就将其值改为"npm" 如果你想在项目中使用yarn包管理工具，就将其值改为"yarn" { "useTaobaoRegistry":
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：问题：Failed to resolve component: canvas-datagrid,If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
阅读全文
摘要：1、安装xlsx npm install xlsx --save-dev https://docs.sheetjs.com/ 2、引入xlsx并封装读取excel方法 import * as XLSX from "xlsx"; /** * 读取excel内容 * @param {*} file *
阅读全文
摘要：一、介绍 在 Vue 2.0 发布后，开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，就不得不使用 v-bind.sync。 此外，由于 v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自
阅读全文
摘要：官网自定义指令介绍 在元素中添加v-move指令，使用该元素的第一个子元素作为点击目标，进行父元素拖动. （一般都是选中元素的一部分，带动整个元素的移动的吧~） <template> <div v-move class="file-tool"> <span class="desc">文件</span
阅读全文
摘要：在使用v-for的时候 ，大多数是用来遍历数组的，那么v-for是否能够用来遍历对象，得到的结果又是什么？ let list = { name:"LiHua"，sex:"male"} 1.获取value，格式：value in list <ul> <li v-for="value in list">
阅读全文
摘要：<el-table :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px"> </el-table> 说明：行高到一定程度之后便不能缩小
阅读全文
摘要：/** * @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch * @constructor * @param {object} opts - 构造参数. @default {data:{},watch:{}}; * @argument {object} data
阅读全文
