随笔分类 - Vue
文字超出限定长度后省略显示
摘要：说明：列表字段或卡片文字超出限定长度后，用“...”省略代替，当鼠标移到上方时则显示所有文字信息。 效果图： 代码如下： <div class="projectName"> <!-- 判断项目名称长度，如果长度小于8 全部显示，如果长度大于8则以“..."代替，鼠标移至上方才全部显示 --> <sp
阅读全文
路由导航守卫
摘要：import { createRouter, createWebHashHistory } from 'vue-router' //路由规则，如下 const routes = [ { path: '/login', name: 'login', component: () => import('.
阅读全文
导航之面包屑的使用配置
摘要：个人理解：面包屑是功能导航路径的所在位置（路径）。 如经常看到的顶部栏展示： 您所在位置：首页 > 产品管理 > 采购.......... 等 1、在路由的js中给菜单配置路由导航，另外增加 meta:{title:'名称'}, 这是为后续读取名称做准备。 2、在顶部栏（vue组件）中增加面包屑（e
阅读全文
vue 课堂笔记
摘要：1、 数组合并 说明：定义两个数组arr1 和arr2，然后把这两个合并放入arr3中； const arr1=[1,2,3,4,5] const arr2=[6,7,8,9] //合并数组 const arr3=[...arr1,...arr2] //转字符串以逗号分割 const arr4=ar
阅读全文
VUE中的插槽使用详解
摘要：<!-- 什么是插槽 ？ *插槽就是子组件中的提供给父组件使用的一个占位符，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。 一般用slot标签来表示插槽要渲染的位置，slot的用法可以分为三类，分别是默认插槽、具名插槽、作用域插槽 父组件向子组件传递内容，内容，内容
阅读全文
vue组件间数据交互--props
摘要：父组件向子组件传值 1.子组件内部通过props接收传递过来的值 先在父组件中定义属性，然后在子组件中通过props接收传过来的值。另外，还需要在父组件中注册子组件，用components 注册。 下面示例： 父组件中“name”就是定义的属性，在子组件中通过props接收（注意后面是数组形式接收）
阅读全文
自定义指令之光标定位到输入框
摘要：下面是一个自定义指令的例子，当一个 input 元素被 Vue 插入到 DOM 中后，它会被自动聚焦。 解决方案：在input标签里增加ref属性，然后在export default 中增加构子函数mounted （挂载完成），写入以下代码，表示页面渲染完成后光标定位输入框。 mounted(){
阅读全文
Pinia的定义与使用
摘要：Pinia 是 Vue 的存储库,可以跨组件/页面全局共享，数据是存储在缓存中。 1、安装 npm install pinia 2、注册 在main.js中注册pinia // 注册pinia import { createPinia } from 'pinia' app.use(createPin
阅读全文
axios对后端请求统一封装及全局调用配置
摘要：【暂存】以下为个人项目笔记： 两个文件如下： 文件【main.js】 import { createApp } from 'vue' import App from './App.vue' import router from './router' // 导入elementplus 相关依赖 imp
阅读全文
axios网络请求
摘要：？问题 ：如何添加token,解决鉴权问题 方案：通过登录页面，发送请求，获取到token值，并把token值存储（localStorage、sessionStorage、cookieStore），示例如下： <template> <el-form label-width="80px"> <el-f
阅读全文
