大祥子的博客日记 - Vue
type: channel
link: https://blog.fxnws.com/tag/Vue/
items: Vue中的鼠标事件
items: Vue事件中心管理传递--组件传值--传值
items: Vue3使用Ctrl+enter换行&组合键
items: Vue配置打包后可以修改API
items: Vue解决打包后因为路径不对照成的空白显示顺便解决跨域问题
items: Vue前端模拟生成验证码并且效验功能
items: Vue实现登陆并使用Vuex保存用户信息
items: Vue前端解决跨域问题

Vue中的鼠标事件
type: item
date: 2022-03-10T15:34:00+08:00
description: @click() || @dblclick() // 单击事件 / 双击事件 @mousedown() || @mouseup() // 按下触发 / 抬起触发 @mousemove() // 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件，移动一个像素，就会发生一次mousemove @mouseleave() // 当鼠标指针离开被选元素时，会发生mouseleave事件 @mouseout() // 当鼠标指针从元素上移开时，发生 mouseout 事件，与mouseleave事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。 @mouseenter() // 当鼠标指针进入被选元素时，会发生 mouseenter 事件 @mouseover() // 当鼠标指针位于元素上方时，会发生 mouseover 事件。 // 注意：与 mouseenter事件不同，mouseover事件在鼠标指针进入被选元素或任意子元素时都会被触发，mouseenter 事件只有在鼠标指针进入被选元素时被触发。

Vue事件中心管理传递--组件传值--传值
type: item
date: 2021-10-12T18:56:00+08:00
description: {mtitle title="新建js文件Bus.js"/}// 事件中心 import Vue from 'vue' export default new Vue(){mtitle title="A页面"/} // 引入事件中心传递 import Bus from '../../util/Bus' // 发送 Bus.$emit('名称', 数据){mtitle title="B页面"/}// 引入事件中心传递 import Bus from '../../util/Bus' // 接收，最好放在created里接收 Bus.$on('treeData', treeData => { this.treeData = treeData // console.log('我是树形：' + treeData) })

Vue3使用Ctrl+enter换行&组合键
type: item
date: 2021-09-24T14:15:00+08:00
description: 执行 @keyup.enter.exact="send" // 发送消息，回车 @keyup.ctrl.enter="lineFeed" // 执行换行 const lineFeed = () => state.sendMessage = state.sendMessage + '\n' } 打印键盘事件，其中有个ctlKey的值，ctlKey是false的话就说明ctrl未按下，可以以此作为判断如下// 13是键盘回车值 if (e.ctlKey === true && e.keyCode = 13) { console.log("执行了我") }

Vue配置打包后可以修改API
type: item
date: 2021-09-15T15:25:00+08:00
description: {mtitle title="静态目录下创建config.js"/}window.g = { // api地址 baseURL: 'http://192.168.10.254:12101' }{mtitle title="index.html引入"/} {mtitle title="页面中使用"/} this.$Axios.post(window.g.baseURL + '/uap/login', { userName: formName.account, passWord: formName.password }).then((res) => { console.log(res) }).catch((err) => { console.log(err) })

Vue解决打包后因为路径不对照成的空白显示顺便解决跨域问题
type: item
date: 2021-09-15T15:17:44+08:00
description: 根目录里创建个vue.config.js文件输入一下代码module.exports = { // 公共路径(必须有的，不然打包css和js路径问题不加载) publicPath: './', // 输出文件目录 outputDir: 'dist', // 静态资源存放的文件夹(相对于ouputDir) assetsDir: 'assets' // // 跨域 // devServer: { // proxy: 'http://192.168.10.254:12101' // } }

Vue前端模拟生成验证码并且效验功能
type: item
date: 2021-09-15T15:10:00+08:00
description: 遇到个登陆功能需要输入验证码，后端没接口，但是为了防止机器人恶意登陆还是要写个验证码效验的，活就跑到前端来了，利用随机数写的一个4位验证码。{mtitle title="js核心代码如下"/}//定义code用于存放验证码 var code = '' // 设置长度，这里看需求，我这里设置为4 var codeLength = 4 // 设置随机字符 // 这里可以写成字母，这样就可以随机生成字母验证码了 var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9) // 循环codeLength 我设置的4就是循环4次 for (var i = 0; i < codeLength; i++) { // 设置随机数范围,这设置为0 ~ 36 var index = Math.floor(Math.random() * 9) // 字符串拼接 将每次随机的字符 进行拼接 code += random[index] } // 将拼接好的字符串赋值给展示的code this.code = code 效验功能就不写了，就是获取用户输入的验证码，和生成的验证码做对比，对就OK不对就告诉用户：吊毛你输入的验证码有误！{mtitle title="这里CSS对样式改进"/}/* 让验证码变形，看起来更加像一点*/ letter-spacing: 15px; transform:skew(45deg); transform: scale(1.,0.5);

Vue实现登陆并使用Vuex保存用户信息
type: item
date: 2021-09-15T14:50:00+08:00
description: Vue实现登陆并使用Vuex保存用户信息功能，直接上代码吧，注释都写的清楚！{mtitle title="主要的main.js"/}// 设置路由跳转的登陆守卫 router.beforeEach((to, from, next) => { // 先读缓存模拟登陆 const user = sessionStorage.getItem('user') const nll = null // 注销登陆 if (to.name === 'Logout') { // 清空缓存 sessionStorage.clear() // 跳转登陆 next('/login') } else if (to.name === 'Login') { // 判断是否为空--是否登陆，登陆直接跳首页 if (user !== nll) { next('/') } } else if (user === nll) { next('/login') } next() }){mtitle title="Vuex的index"/}import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 读取缓存，没有就设置空 state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : { user: { user: '' } }, // 获取user getters: { getUser (state) { return state.user } }, // 唯一可以修改state mutations: { updataUser (state, user) { state.user = user } }, // 异步执行mutations方法 actions: { asyncUpdataUser (context, user) { context.commit('updataUser', user) } }, modules: { } }){mtitle title="Login页面"/}// 所有的都验证完成，并且成功，直接执行这句话，跳转并且用Vuex保存用户 this.$store.dispatch('asyncUpdataUser', { name: formName.account }){mtitle title="App页面解决刷新后Vuex数据丢失"/} <router-view/>

Vue前端解决跨域问题
type: item
date: 2020-07-17T11:18:00+08:00
description: {mtitle title="创建vue.config.js文件写入以下代码"/}module.exports = { devServer : { proxy : 'API链接' } }