![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
古迪红尘
这个作者很懒,什么都没留下…
展开
-
input框校验
校验原创 2023-03-11 11:08:07 · 249 阅读 · 0 评论 -
xss输入前对输入内容进行处理和跨域浏览器设置
无原创 2022-09-26 22:24:52 · 381 阅读 · 0 评论 -
watch和props用法
无原创 2022-09-15 09:49:20 · 3658 阅读 · 0 评论 -
vue 在style标签中引入js变量控制样式
wu原创 2022-09-02 10:43:52 · 568 阅读 · 0 评论 -
vue 按需导出,按需导入
无原创 2022-07-07 17:14:49 · 341 阅读 · 0 评论 -
elementui 限制输入字数
无原创 2022-06-30 17:58:06 · 835 阅读 · 0 评论 -
新窗口打开页面-window.open
无原创 2022-06-27 16:38:15 · 301 阅读 · 0 评论 -
js三元表达式复杂条件判断
无原创 2022-06-27 16:06:35 · 181 阅读 · 0 评论 -
vue父子组件
参考以下链接添加链接描述原创 2022-04-19 10:25:59 · 580 阅读 · 0 评论 -
解决windows系统下 git 里使用 vue cli 创建项目上下箭头无效的方法
把创建命令vue create demo修改为 winpty vue.cmd create demo原创 2021-10-24 16:48:49 · 206 阅读 · 0 评论 -
三元表达式
<el-dialog :title="form.id ?' 编辑部门': '新增部门'" :visible="showDialog" width="50%" @close="closeDialogFn" @open="openDialogFn" > </el-dialog>原创 2021-10-19 15:43:51 · 103 阅读 · 0 评论 -
路由跳转router
// 2.跳转到登录页(携带一个参数 表示当前是在哪个页面点击的登出操作 重新登录之后再跳回来) // path: 单纯的路径url /login // fullPath:既有路径又有参数 /a?id=1001 this.$router.push(`/login?redirect=${this.$route.fullPath}`)//退出登录时记录当时的路由<template> <sidebar-item v-for="route in rou.原创 2021-10-07 22:25:41 · 1018 阅读 · 0 评论 -
this.$set的正确使用
使用this.$set(obj, key, value)/vue.set(obj, key, value)<script>export default { data() { return { student: { name: '张三', } } }, methods: { setMessage() { this.$set(this.student, 'age', 15) console.log(this.stude原创 2021-10-07 10:32:44 · 165 阅读 · 0 评论 -
form表单和day.js和v-html和map映射和插槽 和分页
<template> <div class="employees-container"> <div class="app-container"> <!-- 全局组件 --> <page-tools> <!-- 插入到left插槽位置 --> <template #left> <span>总记录数: {{ total }}<原创 2021-09-17 22:50:00 · 152 阅读 · 0 评论 -
vue多语言中英文切换
第一步,下载包(特别注意:vue-i18n版本需要控制在8)npm install vue-i18n@8.0.0 --save或者yarn add vue-i18n@8.0.0 --save第二步,需要单独一个多语言的实例化文件 src/lang/index.js// 所有跟语言相关的代码import Vue from 'vue'// 引入i18n核心包import VueI18n from 'vue-i18n'import locale from 'element-ui/lib/原创 2021-09-16 22:40:29 · 1841 阅读 · 5 评论 -
vue 全屏按钮组件
<template> <!-- 放置一个图标 --> <div class="screenWrapper"> <!-- 'exit-fullscreen' 'fullscreen' --> <!-- 问题:点击浏览器的叉号 或者esc 此时视图显示是退出了 但是图标并没有发生变化 原因:控制icon显示的数据状态isFullScreen 并不会随着esc或者叉号的点击发生变化原创 2021-09-16 20:02:51 · 343 阅读 · 0 评论 -
RBAC修复白屏和路由404问题
路由404页问题修复问题:如果我们刷新浏览器,会发现跳到了404页面原因:现在我们的404页处在中间位置而不是所有路由的末尾了,改到末尾就可以了切换路由刷新白屏bug修复问题:手动切换路由,刷新浏览器,出现白屏问题 if (!store.state.user.userInfo.userId) { // 优化 ,vuex里没有userId的时候才执行下面 const res = await store.dispatch('user/asyncGetUserInfo')原创 2021-09-14 22:44:51 · 94 阅读 · 0 评论 -
js把线形数据转换为树形数据
function transTree(souceData) { const targetData = [] // 树形结构生成 // 核心思路: // 1. 先遍历原数组 以原数组中的每一项的id作为对象的key, 每一项本身作为对象的value形成一个对象结构(map) // 2. 遍历原数组 使用数组中的每一项的pid 去第一步形成的map结构去匹配key(id) 如果匹配上 // 就把当前项放入找到节点的children属性中去 如果无法完成匹配 代表当前项就是最根上的..原创 2021-09-06 20:08:38 · 261 阅读 · 0 评论 -
封装axios
建议写在src/utils/request.jsimport axios from 'axios'import store from '@/store'import router from '@/router'// import request from '@/utils/request'import { updateTokenAPI } from '@/api/user'// 创建axios实例 - 返回一个实例 - 本质还是axios,这样的好处// 可以根据不同的需求,封装不同的请求原创 2021-08-31 10:08:01 · 71 阅读 · 0 评论 -
vue 给组件外层容器动态设置类名-距离底部
<template> <div> <!-- 评论列表 --> <div class="cmt-list" :class="isShowCmtInput ? 'styelOne' : 'styelTwo'"> <!--组件 --> <CommentList></CommentList> </div> </div></templat原创 2021-08-29 17:50:16 · 210 阅读 · 0 评论 -
vue防抖和节流
// 获取联想菜单 getSearchSuggFn () { //>>>>>>>防抖 // 1. 关闭 上一次 延迟器 if (this.timerId) { clearTimeout(this.timerId) } // 2. 重新开启一次延迟器,如果在 500 毫秒之内又 // 再次 输入了,那么这个延迟器 就会 被 关闭 this.timerId = set原创 2021-08-28 20:32:05 · 74 阅读 · 0 评论 -
点击标签滚动到可视区域--scrollIntoView() ----和获取窗口滚动距离
// 评论滑动 moveFn () { // 真实DOM都在document(所以不再一个vue文件内), 也是可以获取的 document.querySelector('.like-box').scrollIntoView({ behavior: 'smooth' //带动画效果,平滑的滚动 })}原创 2021-08-26 19:12:45 · 665 阅读 · 0 评论 -
vue 全局组件的两种使用方法
第一种第一步,创建全局组件比如在src/components/ArticleItem.vue第二步导入main.js// main.js中导入全局组件import ArticleItemOne from './components/ArticleItem.vue'Vue.component('ArticleItem', ArticleItemOne)第三步:使用任意组件导入使用<template> <div> <ArticleItem>原创 2021-08-23 23:56:19 · 1749 阅读 · 0 评论 -
vue设置全局拦截器
为了结构清晰,可以单独建个文件比如src/utils/request.jsimport axios from 'axios'import store from '@/store'import router from '@/router'// 创建axios实例 - 返回一个实例 - 本质还是axios,这样的好处//// >>>>>>>>>>>>>>>>>>>// 可以根据不原创 2021-08-19 12:39:23 · 2158 阅读 · 1 评论 -
vue 封装全局函数(把时间转化为多久以前)
为了结构清晰,可以单独建个文件保存全局函数,在src目录下建个utils/date.js写下如下代码// 导入 momentimport moment from 'moment'// 转换时间 - 多久之前const formatTimeAgo = targetDate => { moment.locale('zh-cn') // 转化为中文,不转化是英文的 return moment(targetDate).from(new Date()) // targetDate 是个形原创 2021-08-15 15:27:55 · 234 阅读 · 0 评论 -
vue全局指令v-infocus 之input框和textarea
第一步,src文件夹下新建directive/index.js// 全局指令import Vue from 'vue'Vue.directive('infocus', { inserted(el) { console.log(el.tagName) // DIV if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) { el.focus() } else { let node = el.quer原创 2021-08-08 09:38:48 · 181 阅读 · 0 评论 -
vuex-modules模块化
vuex-modules模块化新建store/modules/user.js新建store/modules/cart.jsuser.js - 用户模块对象// 用户模块const userModule = { // 开启命名空间 // 防止不同模块下的 属性 和 方法 冲突 namespaced: true, state() { return { name: '', token: '' } }, mutations: {},原创 2021-08-03 11:37:31 · 86 阅读 · 0 评论 -
vuex核心概念state,mutations,actions,getters
初始化文件夹indedx.js// vuex的使用步骤// 1. 下载 yarn add vuex -S / npm i vuex - S// 2. 导入// 何时需要些相对路径: 自己写的文件(非node_modules中的)// 何时直接写包名:node的内置模块或者yarn/npm下载的第三方包// 3. 注册import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 会给组件添加 $store $route原创 2021-08-01 23:47:16 · 240 阅读 · 0 评论 -
vuex基本使用
1,下载vuexyarn add vuex2,src 同级目录小创建store/index.js - 创建定义导出store对象//何时需要写相对路径:自己写的文件//何时直接写包名:node的内置模块或者yarn/npm 下载的第三方包)// 目标: 创建store仓库对象// 1. 下载vuex: 终端命令(yarn add vuex)// 2. 引入vueximport Vue from 'vue'import Vuex from 'vuex'// 3. 注册Vue.use(原创 2021-08-01 10:45:16 · 106 阅读 · 0 评论 -
vue编程式导航
编程式导航是用JS代码跳转, 声明式导航使用 创建 a 标签来定义导航链接标签第一步在main.js中 // 对one组件路由配置 { path: "/one", name: "one", // 别名 component: One }, { path: "/one/:id", name: "one", // 别名 component: One },在list组件中<template> <div>原创 2021-07-31 12:47:46 · 208 阅读 · 0 评论 -
vue-router基本使用和404组件路由和hash,历史模式
第一步,下载vue-routeryarn add vue-router第二步,main.js 入口:需要配置下import Vue from 'vue'import App from './App.vue'// ***** 引入路由 import VueRouter from 'vue-router'Vue.use(VueRouter)// 导入组件 @ 默认为src路径 import Layout from '@/views/Layout'import Home from原创 2021-07-30 23:14:36 · 183 阅读 · 0 评论 -
mac 终端运行 命令 yarn serve报错 /bin/sh: vue-cli-service: command not found 一个命令解决
mac 终端运行 命令 yarn serve报错 /bin/sh: vue-cli-service: command not found 一个命令解决当你用一个别人给你的vue文件时,无法 在终端中yarn serve 启动服务,报错/bin/sh: vue-cli-service: command not found如下图而你应经安装过了vue/cli 还是这样报错 ,可以输入命令 yarn这个命令是 安装项目的全部依赖...原创 2021-07-27 10:15:37 · 3593 阅读 · 2 评论 -
vue 插槽的使用
vue 插槽的使用一:具名插槽二:作用域插槽一:具名插槽二:作用域插槽一:具名插槽(2个以上)使用方法父组件<template> <div id="app"> <h1>我是父组件</h1> <son> <!-- 多个插槽通过v-slot:"对应的名字找到对应的插槽" ,可以简写为 #名字 --> <template v-slot:one><h4>我是父组件插入原创 2021-07-29 22:50:27 · 197 阅读 · 0 评论 -
vue----Shopcar 大小选-加减-总价-总件数-功能总结
vue----Shopcar 大小选-加减-总价-总件数-功能总结这里写目录标题vue----Shopcar 大小选-加减-总价-总件数-功能总结一:大小选二:计算总价和总件数三:商品数量的加减功能一:大小选二:计算总价和总件数三:商品数量的加减功能大小选**<input type="checkbox" class="custom-control-input" id="footerCheck" v-model="ck"/原创 2021-07-28 17:29:46 · 215 阅读 · 0 评论 -
vue怎么全局引入axios 和设置基础路径
vue设置全局axios 和设置基础路径.全局的是写在main.js文件中,// 1下载axios// npm i axios 或者 yarn add axios // 2 在min.js 中导入axios (根据需求导入不同的位置)import axios from 'axios'// 3设置基础路径axios.defaults.baseURL = 基础路径(写入自己的基础路径)// 4axios方法添加到Vue的原型上Vue.prototype.$axios = axios //注意此原创 2021-07-27 23:59:38 · 1643 阅读 · 0 评论 -
vue全局和局部自定义属性v-xxx
ue全局和局部自定义属性v-xxx一局部自定义属性v-xxx<template> <div class="container"> <h1>局部:自定义指令</h1> <!-- 局部自定义指令 --> <input type="text" v-aaa="numb" /> <button @click="numb++">numb++</button> <div原创 2021-07-27 00:17:17 · 782 阅读 · 0 评论 -
vue怎么改变默认8080端口
vue怎么改变默认8080端口1. 第一步注意是在根目录下,和src同级目录下创建vue.config.js第二步在新建的vue.config.js中写入如下代码/* 覆盖webpack的配置 */module.exports = { devServer: { // 自定义服务配置 open: true, // 自动打开浏览器 port: 3000 // 端口号 }, lintOnSave: false //eslint-loader 是否原创 2021-07-21 10:54:56 · 821 阅读 · 0 评论