vue
不忘初心1995
欢迎访问我的个人博客http://139.9.210.43/#/home,有更加详细的资料
展开
-
axios封装
2、对所有的get添加了自定义缓存时间,与主动取消缓存。1、对所有的get添加了防抖,每两秒只能请求一次。原创 2024-04-22 15:00:58 · 130 阅读 · 0 评论 -
vue锚点组件优化版 (kl-anchor)
文章目录示例功能使用方式实现kl-anchorkl-anchor-itemB站演示地址—有空再录制示例功能组件使用了elementui的部分组件,使用时注意导入点击tab栏,展示区切换到指定区域展示区滚动,tab栏自动切换到对应区域(我这儿的tab栏是自制,也可以使用elementui的相关组件)kl-anchor下只能套kl-anchor-itemkl-tab制作地址使用方式<template> <div class="anchor"> <原创 2021-11-28 19:12:40 · 1184 阅读 · 0 评论 -
kl - tab vue导航栏实现(底部线动画)
使用<template> <div class="demo"> <kl-tab :tabOptions="tabOptions" @change="changeCom" /> <div class="main"> <component :is="activeName"></component> </div> </div></template><原创 2021-11-27 21:54:58 · 705 阅读 · 0 评论 -
vue excel文件上传预览和修改组件封装
前言本组件的封装使用了部分elemenu-ui的组件,使用时,需要注意导入上传的组件使用了我自己制作的kl-upload ,大家也可以直接使用elementui的上传,并不影响功能,这儿也附上这个组件的制作地址 kl-upload组件功能描述提供单个或多个excel,csv文件的上传(简单的行列容易对应的表格)前端解析文件,生成表格(el-table)两份,一份的table1,一份冻结的table2,都支持下载为excel和收集为json数据上传表格分页展示支持在线修改和删除使用方式原创 2021-11-25 20:19:40 · 824 阅读 · 0 评论 -
2021/11/4 学习文档记录 vue3 && jquery
文章目录vue3 相关watch 和computedvue2computed:watch://侦听器vue3computed计算属性watch 监听vuex 使用差异vue2vue3 使用stategettersmutationsactions注册全局的差异vue2 插件方式注册示例vue3 插件方式注册示例vue3.2 新增语法setup 语法糖ref 可直接作用于cssjquery 相关jquery的链式调用怎么实现实现节点的拖拽vue3 相关watch 和computedvue2compute原创 2021-11-04 14:29:38 · 363 阅读 · 0 评论 -
computed & watch
文章目录computed:watch://侦听器案例用来监听路由的变化computed://计算属性,有缓存// 这儿的缓存可以理解为页面多次用到,但计算函数只执行了一次执行时间: 初始化和相关属性发生变化时会再次触发直接在computed里面定义变量,然后就可以在页面上进行双向数据;computed比较适合对多个变量或者对象进行处理后返回一个结果值;优点简化tempalte里面{{}}计算和处理props或$emit的传值应用场景表单校验,这个应用场景应该是比较常见的,利用正则表达式对原创 2021-07-13 17:48:58 · 168 阅读 · 0 评论 -
vue如何在html页面更优雅的使用组件化开发
文章目录存在问题htmlindex.jsheaderCom.js存在问题没有实现全局组件的复用,只能在单一页面做逻辑的拆分传递array 类型数据到子组件,会出现无法解析语法的问题html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"原创 2021-11-03 14:05:07 · 1011 阅读 · 0 评论 -
elment-ui 时间选择器 限制范围
文章目录页面处理逻辑data 新增methods新增页面<el-date-picker :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" v-model="value1" type="datetimerange" align="right" start-placeholder="开始日期"原创 2021-11-02 17:09:57 · 168 阅读 · 0 评论 -
el - upload 的基本使用
文章目录直接上传如何拦截请求,只预览,先不发请求直接上传请参照官方文档如何拦截请求,只预览,先不发请求html<el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" > <img v-if="imageUrl" :原创 2021-10-23 20:15:28 · 724 阅读 · 0 评论 -
图片加载失败 使用图片替换
<img src="14147" @error="handleError" alt=""> handleError(e){ e.target.src = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.y9aI8dDZSwdhwJMI3I1L0gHaNG?w=187&h=332&c=7&r=0&o=5&pid=1.7' }原创 2021-10-18 12:40:20 · 198 阅读 · 0 评论 -
vue 添加骨架屏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>kl-ui</t原创 2021-10-02 10:56:21 · 277 阅读 · 0 评论 -
vue3 ts vite 配置别名 导致报 无法找到对应莫模块的错误处理方式
第一步vite.config.ts alias: { "@": resovePath("src"), },第二步tsconfig.json "compilerOptions": { ... "baseUrl": "./", "paths":{ "@": ["src"], "@/*": ["src/*"], } },解决ts 和 vue 文件的相互导入找不到模块根目录 或 src 下新建 env.d.ts 文件原创 2021-10-01 17:45:04 · 3541 阅读 · 0 评论 -
使用vite 搭建 ts+vue3项目
基本项目搭建步骤yarn create @vitejs/app选择 ts+vuevue3 项目 package基本依赖{ "name": "vite-vue3-ts-kl", "version": "0.0.0", "scripts": { "dev": "vite --open", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview" }, "de原创 2021-09-28 22:21:22 · 642 阅读 · 0 评论 -
vue 同时导入多个组件
import titleCom from '@/components/home/titleCom'import bannerCom from '@/components/home/bannerCom'import cellCom from '@/components/home/cellCom'//components:{titleCom,bannerCom,cellCom}//这样就写了大量重复的代码,利用 require.context 可以写成const path = require('pat原创 2021-09-24 14:37:59 · 1245 阅读 · 0 评论 -
vue 集成 eslint 规范
文章目录1.1. 集成 editorconfig 配置VSCode 需要安装一个插件1.2. 使用 prettier 工具1.3. 使用 ESLint 检测1.1. 集成 editorconfig 配置新建一个 .editorconfig内容如下# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格(tab | s原创 2021-09-20 20:31:25 · 270 阅读 · 0 评论 -
express 作为中间层的服务端渲染
文章目录模块项目地址集成vue前端模块pc和mob返回不同的页面模板的具体拆分请求的转发和代理模块项目地址git clone https://gitee.com/weixijin_177/middle_node_moban.git集成vue前端模块链接pc和mob返回不同的页面定义一个公用方法// 导出一个用于处理 判断用户是 mobile 或者 pc 的function getMachine(req) { var deviceAgent = req.headers["user原创 2021-08-01 10:05:28 · 251 阅读 · 0 评论 -
vue 视频播放插件vue-video-player的使用
安装依赖yarn add vue-video-playermain.js引入import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)组件内实际使用<template> <div class="demo"> &.转载 2021-09-11 20:17:55 · 809 阅读 · 0 评论 -
vue项目优化总结
文章目录原创 2021-09-11 11:50:59 · 117 阅读 · 0 评论 -
scrollBehavior
// 路由切换返回顶部示例const router = new VueRouter({ routes, scrollBehavior(to, from, savedPosition) { // keep-alive 返回缓存页面后记录浏览位置 if (savedPosition && to.meta.keepAlive) { return savedPosition; } // 异步滚动操作 return new Promise(原创 2021-09-09 07:29:12 · 367 阅读 · 0 评论 -
vue keep-alive
文章目录vue2vue3vue2 <keep-alive> <router-view v-if="$route.meta.isKeepLive"></router-view> </keep-alive> <router-view v-if="!$route.meta.isKeepLive"></router-view>vue3 <router-view v-slot="{ Compon原创 2021-09-06 17:45:58 · 211 阅读 · 0 评论 -
vue3.0不同于vue2.x的一些地方
文章目录options api ==> composition apiobject.defineProperty ⇒ proxyvdom优化按需加载Fragment Teleport Suspensets支持options api ==> composition apiobject.defineProperty ⇒ proxyvdom优化按需加载Fragment Teleport Suspensets支持...原创 2021-09-06 12:36:07 · 67 阅读 · 0 评论 -
vue nextTick实现原理
文章目录基本原理基本原理vue的dom更新是一个异步操作,一旦监听到数据变化,就会开启一个队列,并缓存同一事件循环中的全部数据变更,如果同一个watcher被多次触发,只会被推入一次。并且会在队列中加一个回调函数,确保函数前面的dom操作做完了才会被调用...原创 2021-09-06 00:18:37 · 135 阅读 · 0 评论 -
day44 vue响应式原理及双向绑定实现
文章目录vue响应式原理双向绑定实现vue响应式原理双向绑定实现原创 2021-09-05 14:08:32 · 129 阅读 · 0 评论 -
vue-nextTick 和 updatad的区别
nextTick 比 updatad后执行updatad只要数据修改了就会触发只有在特定的方法中调用才会触发原创 2021-09-02 21:43:36 · 583 阅读 · 0 评论 -
vue3+ts
文章目录vuex state 类型vuex state 类型存在问题不能再重新设置state时限制类型interface i_state_store { username: string;}export default createStore<i_state_store>({ state: { username: "wxj", }, mutations: { setusername(state, value: string) { // c原创 2021-08-23 10:18:08 · 345 阅读 · 0 评论 -
vue3.2 新特性
文章目录配置案例其他语法配置vue3.2 + ts + volor ( 需要禁用vetur)案例父组件<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <HelloWorld @changeInfo="changeInfo" :info="info" /> </div></template>原创 2021-08-22 08:07:53 · 635 阅读 · 0 评论 -
vue 递归组件
文章目录简介案例之 menulist简介组件name必须有循环递归必须有退出条件案例之 menulistmenuindex.vue<template> <div> <div v-for="item in menulist" :key="item.title"> <WxjMenuItem :menu="item" /> </div> </div></template>&原创 2021-08-20 15:23:49 · 77 阅读 · 0 评论 -
vue h 函数
案例new Vue({ router, store, render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this // 绑定全局事件总线 }}).$mount('#app')解析Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 V原创 2021-08-19 17:55:05 · 450 阅读 · 0 评论 -
vue extend $mount
文章目录案例jsvue案例jsimport Vue from "vue"const createMessage = (component, props) => { // 组件构造函数 const Ctor = Vue.extend(component) // 创建组件实例 const comp = new Ctor({ propsData: props }); // console.log(comp.$el); // undefined原创 2021-08-19 17:39:03 · 322 阅读 · 0 评论 -
vue $attrs inheritAttrs
文章目录$attrsinheritAttrs$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。并且可以通过 v-bind=“attrs"传入内部组件,子组件可以直接通过v−bind:"attrs" 传入内部组件,子组件可以直接通过v-bind:"attrs"传入内部组件,子组件可以直接通过v−bind:"attrs”,绑定全部传递过来的属性inheritAttrs通常和attrs配合使用,可以清除根组件上重复绑定at原创 2021-08-19 15:25:13 · 114 阅读 · 0 评论 -
vue3 -- h函数
Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚 拟DOM(VDOM);三个参数 第一个 节点名字 第二个 节点属性对象 第三个 children(string | number | []…)...原创 2021-08-17 08:13:53 · 1454 阅读 · 0 评论 -
vue动态组件
注意点:要保持注册的components名字和state中的一致<template> <div class="demo"> <ul> <li v-for="item in menulist" :key="item.name" @click="HandleCurrent(item.name)" > {{ item.name }} </li原创 2021-08-16 19:30:58 · 59 阅读 · 0 评论 -
vue3 新增特性--emits
<script>import { setup, toRefs } from "vue";export default { name: "demo", components: {}, props: { title: { type: String, default: "default_title", required: true, }, }, emits: { changeTitle: function (va.原创 2021-08-15 21:14:27 · 412 阅读 · 0 评论 -
v-model 在表单的使用
<div id="app"> <div> <h2> 1. 指定value </h2> 下拉单选框 <select v-model="isCheck2"> <option value="A">A</option> &l...原创 2021-08-15 10:14:00 · 269 阅读 · 0 评论 -
vue-data属性是一个函数而不是一个对象?
根实例对象data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。采用函数的形式,initData时会将其作为工厂函数都会返回全新data对象...原创 2021-08-13 20:21:16 · 68 阅读 · 0 评论 -
vue项目开启 GZip压缩
文章目录前端配置后端配置前端配置拆完包之后,我们再用gzip做一下压缩 安装compression-webpack-plugin// yarn add compression-webpack-plugin -D// 在vue.congig.js中引入并修改webpack配置const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => { if (p原创 2021-08-13 20:04:49 · 884 阅读 · 0 评论 -
vue3 使用vuex
文章目录创建基本的store仓库index.js模块化开发需要开启命名空间stategettersmutationsactions创建基本的store仓库index.jsimport { createStore } from 'vuex'import createPersistedState from "vuex-persistedstate";import user from './modules/user'import state from "./state"import mutation原创 2021-08-13 11:02:47 · 367 阅读 · 0 评论 -
vue3动态添加路由
这儿的home就是一级路由的名字原创 2021-08-10 08:36:39 · 1069 阅读 · 0 评论 -
2021-08-10
实现一个简易版的hash路由<body> <a href="#/home">home</a> <a href="#/login">login</a> <div class="content"> default </div></body><script> let el_content = document.querySelector(".c原创 2021-08-10 07:58:07 · 69 阅读 · 0 评论 -
Vue3父子组件使用 v-model 通信
文章目录父组件子组件父组件<template> <div class='demo'> input_val---{{input_val}} <myButton v-model="input_val" :placeholder="placeholder" /> </div></template><script lang='ts'>import { reactive, toRefs, defineCompo原创 2021-08-10 07:42:53 · 760 阅读 · 0 评论