Web 技术 vue

vue scope的用法和添加全局样式

用法  scope是实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。scope的渲染规则给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性在每句css选择器的末尾(编译后的...
Web 技术 vue

Vuex数据状态持久化-vuex-persistedstate插件

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,有的时候需要做到持久化,比如token,我们可以结合本地存储做到数据状态持久化,但是太麻烦每次都要操作,利用vuex-persistedstate插件可以简单许多1.安装npm install vuex-persis...
Web 技术 vue

vue单页面中 home页面跳转到其他页面 但记住其他的路由

home.js里 通过判断this.$route.nam的值来实现该功能 mounted() { // 进入首页 默认加载上传页面 如果在其他页面刷新 路由还是其他页面 let name = this.$route.name === '...
Web 技术 vue

hxy-music部署方式

前端用的是vue3+element+axiso 后端用的网易云接口,引用该博主提供的程序https://neteasecloudmusicapi.vercel.app/#/一.linux下载node1.下载从官网获得最新版本下载链接,使用wget命令下载压缩包。​​​wge...
Web 技术 vue

vue挂载全局方法和过滤器 ,自定义指令

main.js文件里过滤器import commonFilter from './assets/js/filter/commonFilter'; // 公共filter Object.keys(commonFilter).forEach(key => Vue.filt...
Web 技术 vue

$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名

官网解释不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何...
Web 技术 vue

用vue-cli4来封装一个自己的ui库

一、组件库是基于vue-cli框架的的,用vue-cli创建项目vue create hxy-ui 二、修改目录,以及重新修改配置文件。1、很多的开源组件库的源码,都喜欢用packages目录存放组件,examples目录用来展示组件。所以在这个项目内,将src目录改为ex...
Web 技术 vue

vue自定义拖拽指令v-drag

文件drag.jsimport Vue from 'vue'; //使用Vue.directive()定义一个全局指令 //1.参数一:指令的名称,定义时指令前面不需要写v- //2.参数二:是一个对象,该对象中有相关的操作函数 //3.在调用的时候必须写v- const ...
Web js 技术 vue

vue-gridmanager插件里控制表头是否固定的方法

最开始为未锁定状态new GridManager(table, { height: 'auto', // ... 其它配置项});方法:resetLayout重置表格表布局,参数width与height支持格式以下: 1.像素: '1000px'2.百分比: '100%'3...