vue
文章平均质量分 58
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
-
破解 Vue3.x 新特性
一、refref() 函数用来根据给定的值创建一个响应式的数据对象,ref() 函数调用的返回值是一个对象,这个对象上只包含一个 .value 属性:基本语法:import { ref } from 'vue'// 创建响应式数据对象 count,初始值为 0const count = ref(0)// 如果要访问 ref() 创建出来的响应式数据对象的值,必须通过 .value 属性才可以console.log(count.value) // 输出 0// 让 count.原创 2021-10-27 11:15:52 · 266 阅读 · 0 评论 -
手动封装Vue组件并发布到NPM
1、首先用vue-cli4.5新建一个简易版本的Vue项目,方法如下:创建一个项目 | Vue CLI目录结构如下:v src-v util--v plugins---v perms---- codes.js---- index.js---- index.vuepackage.json2、新建line-chart文件夹,新开发的自定义组件放在此文件夹下,其中:index.vue:为组件开发文件,需要注意是组件必须声明name,因为name是该组件标签,打包发布到npm后其原创 2020-06-30 23:08:16 · 739 阅读 · 0 评论 -
Vue性能优化方法与技巧大全
一、常用指令:v-if:v-show:v-for:v-bind:v-on:v-is:二、方法、计算属性、侦听器:三、Class和Style绑定:四、事件处理;五、表单输入绑定:六、组件:1、如何定义一个组件;2、父->子通信、子->父通信;3、组件分类:普通组件、动态组件、异步组件;4、slot:...原创 2020-05-17 14:14:09 · 534 阅读 · 0 评论 -
解析Vue2 Diff 算法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/bootstr原创 2018-08-15 23:17:47 · 1300 阅读 · 0 评论 -
vue-router实现原理
路由router\index.js配置:import Vue from 'vue'import Router from 'vue-router'const Home = () => import('@/components/HelloWorld')const Badge = () => import('@/components/Badge')const Progress ...原创 2019-09-26 10:04:29 · 1973 阅读 · 0 评论 -
LogicFlow工作流在React和Vue3中的使用
LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制,方便我们快速在业务系统内满足类流程图的需求。原创 2024-08-12 10:26:37 · 653 阅读 · 2 评论 -
React/Vue项目解决跨域的方法
CORS是浏览器的一种机制,当发起跨域请求时,服务器可以返回一个特殊的响应头Access-Control-Allow-Origin来授权给定源访问该资源。只需要在服务器端设置响应头即可实现CORS。通过在请求中添加一个回调函数的参数,服务器返回的数据会包裹在该回调函数中,实现跨域获取数据。在上述示例中,将以/api开头的请求转发到http://api.example.com,并将请求路径中的/api部分去除。在上述示例中,将以/api开头的请求转发到http://api.example.com。原创 2024-07-22 22:06:07 · 606 阅读 · 0 评论 -
element-plus 2.7.6相关使用方式
【代码】element-plus 2.7.6相关使用方式。原创 2024-07-01 11:03:51 · 358 阅读 · 0 评论 -
解决vue3使用ref 获取不到子组件属性问题
父子组件使用语法糖,父组件通过给子组件定义ref访问其内部事件。原创 2024-06-24 22:47:55 · 432 阅读 · 0 评论 -
Vue3系列:8、Vue3新组件
/原创 2024-05-25 22:15:15 · 306 阅读 · 0 评论 -
Vue3系列:7、其它 API
通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的,对所有深层的对象不会做任何处理,避免了对每一个内部属性做响应式所带来的性能成本,这使得属性的访问变得更快,可提升性能。原创 2024-05-25 22:13:52 · 385 阅读 · 0 评论 -
Vue3系列:6、组件通信
子 => 父。注意区分好:原生事件、自定义事件。原生事件:事件名是特定的(clickmosueenter等等)事件对象$event: 是包含事件相关信息的对象(pageXpageYtargetkeyCode自定义事件:事件名是任意名称事件对象$event: 是调用emit时所提供的数据,可以是任意类型!!!--在父组件中,给子组件绑定自定义事件:--> < Child @send-toy = " toy = $event " />原创 2024-05-25 22:12:18 · 333 阅读 · 0 评论 -
Vue3系列:5、pinia
第二步:操作此时开发者工具中已经有了pinia选项。原创 2024-05-25 22:10:54 · 238 阅读 · 0 评论 -
Vue3系列:4、路由
缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有。通过点击导航,视觉效果上“消失” 了的路由组件,默认是被。作用:让路由组件更方便的收到参数(可以将路由参数作为。优点:兼容性更好,因为不需要服务器端处理路径。作用:控制路由跳转时操作浏览器历史记录的模式。作用:可以简化路由跳转及传参(后面就讲)。作用:将特定的路径,重新定向到已有路由。浏览器的历史记录有两种写入方式:分别为。参数时,需要提前在规则中占位。文件夹,一般组件通常存放在。掉的,需要的时候再去。的对象写法,必须使用。原创 2024-05-25 22:09:21 · 386 阅读 · 0 评论 -
Vue3系列:3、Vue3核心语法
Vue3核心语法原创 2024-05-25 22:07:33 · 332 阅读 · 0 评论 -
Vue3系列:2、创建Vue3工程
点击查看备注:目前vue-cli已处于维护模式,官方推荐基于Vite创建项目。原创 2024-05-25 22:03:49 · 278 阅读 · 0 评论 -
Vue3系列:1、Vue3简介
2020年9月18日,Vue.js发布版3.0One Piece(n3.3.4。原创 2024-05-25 22:02:27 · 252 阅读 · 0 评论 -
vue中使用xlsx插件导出多sheet excel实现方法
【代码】vue中使用xlsx插件导出多sheet excel实现方法。原创 2023-10-26 21:45:34 · 1536 阅读 · 0 评论 -
企业微信应用开发实践
使用企业微信开放接口和工具资源,为企业提供丰富的应用服务。原创 2022-11-25 22:34:55 · 3116 阅读 · 0 评论 -
Electron集成React和Vue
Electron集成React或者Vue的方式很多,这是灵活性比较大的一种原创 2022-08-23 09:55:29 · 754 阅读 · 0 评论 -
vue-cli3.0如何在打包时设置静态资源目录?
vue-cli3.0如何在打包时设置静态资源目录?原创 2022-06-18 23:26:43 · 2290 阅读 · 0 评论 -
常用第三方Vue/NodeJS组件、工具
1、vue-treeselect:vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持。支持嵌套选项的单选和多选 模糊匹配 异步搜索 延迟加载(仅在需要时加载深度选项的数据) 键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等) 丰富的选项和高度可定制的 支持 多种浏览器需要Vue 2.2+官网:Vue-Treeselect | Vue-Treeselect 中文网............原创 2022-04-29 13:48:31 · 1031 阅读 · 0 评论 -
彻底明白Vue2中.sync修饰符
对于Vue的初学者来讲,肯定会感觉prop的写法很麻烦,很讨厌!你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得!不过现实是残酷的,如果子组件可以任意修改父组件的内容,那势必会带来数据的混乱,从而造成维护的困扰!官方推荐使用一种update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功能:通过父组件按钮将子组件显示出来,如图:父组件代码:<template> <div>原创 2022-02-12 22:40:38 · 8505 阅读 · 2 评论 -
Vue-Router 4.x填坑
查阅Vue-Router 4.x官方文档(Vue Router4.x),你会发现里面讲得很不完善,跳过了很多步骤,如果按照官方文档在项目中使用,你会发现很多地方会报错。这里讲下Vue-Router 4.x的正确使用方式:1、引入createRouter、createWebHashHistory:import { createRouter, createWebHashHistory } from "vue-router";/src/router/index.js:import { cre.原创 2021-11-22 09:27:27 · 536 阅读 · 0 评论 -
vue使用路由懒加载以后不能获取当前url
当使用路由懒加载时:import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', //原创 2021-11-10 21:35:33 · 1126 阅读 · 0 评论 -
Vue中权限控制完全实现
一、菜单的实现:登录之后获取到的数据:[ { path: "/main/data", alias: "/data", name: "data", meta: { title: "统计", icon: "el-icon-house", re原创 2021-06-25 16:54:51 · 1564 阅读 · 0 评论 -
Vue+Element实现左侧无限级菜单
NavItem.vue:<template> <div> <el-menu-item :index="basePath" v-if="!item.child"> <i class="el-icon-menu"></i> <span slot="title">{{item.name}}</span> </el-menu-item> <el-submen原创 2021-06-08 16:52:00 · 658 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用
1、到github下载:(下载一定要记得是master主分支的代码,默认克隆后进入的是dev分支,执行npm run build会报错)直接下载zip文件即可。github国内很多地方访问不是很稳定,git clone下载代码的方式可能会比较慢,所以直接下载zip文件。2、在vue-devtools目录下安装依赖包:cd vue-devtoolscnpm install3、依赖包下载完后执行cnpm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹原创 2021-04-04 18:34:45 · 3612 阅读 · 0 评论 -
vue element的单选框组模拟tabs使用echarts
<template> <el-card> <el-row> <el-col :span="12"> <el-radio-group v-model="chartComponents"> <el-radio-button label="lineChart">折线图</el-radio-button> .原创 2021-04-04 15:37:31 · 249 阅读 · 0 评论 -
vue element的tabs中使用echarts
tabs中使用echarts,除了第一个图表能默认显示外,当tabs切换的时候,第一个之后的可能就显示不了了,如何解决?<template> <div> <el-row> <el-col :span="24"> <el-card> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> .原创 2021-04-02 09:13:20 · 2106 阅读 · 0 评论 -
Vue+Element+Node.js+Mysql实现后端分页
table.vue:<template> <div> <el-card> <el-row :style="{marginBottom: '15px'}"> <el-col :span="24"> <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</原创 2021-03-21 21:53:50 · 1726 阅读 · 0 评论 -
Vue中如何设置代理跨域请求数据
webpack提供了配置代理的方法解决跨域:1、在vue-cli项目中打开webpack.dev.cof.js,如下:devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], },原创 2021-01-04 21:34:19 · 736 阅读 · 0 评论 -
Vue中实现用户登录及token验证
Token:Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌。Token 可以设置有效期,为了解决在操作过程不能让用户感到 Token 失效这个问题,在服务器端保存 Token 状态,用户每次操作都会自动刷新(推迟) Token 的过期时间——Session 就是采用这种策略来保原创 2020-07-12 10:16:12 · 2405 阅读 · 0 评论 -
vue中使用ztree时报找不到init方法错的解决方案
build/webpack.base.conf.js中先删除:module.exports = { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", 'window.jQuery': 'jquery', jQuery: 'jquery' }) ]}中的 new webpack.ProvidePlugin({ $:原创 2020-07-07 22:48:36 · 1027 阅读 · 0 评论 -
vue-cli中找不到jquery的原因,以使用ztree为例
找不到 jQuery 了,什么回事呢?原来呀,以前是使用 <script> 标签来加载 jquery 的,并且会将其挂载到全局中,所以在执行 jquery.ztree.core.js 时能正常地获取到 jQuery 。而在 vue 项目中,经过 webpack 打包后,在 main.js 中导入的 $ 和 jquery.ztree.core.js 是各自处在不同的上下文环境的,自然就不能找到 jQuery 了。如何解决?修改 webpack 配置:build/webpack.base原创 2020-07-06 21:38:26 · 768 阅读 · 0 评论 -
vue-router使用总结
1、url中,"/"对应的是"App.vue"组件,如果"/"有子路由,则"App.vue"组件中要添加"<router-view></router-view>",同理,url有多层,则上一层对应的组件种都要有"<router-view></router-view>"。参考:vue-router 基本使用:https://blog.csdn.net/duansamve/article/details/80872015vue-router在项目中的应原创 2020-07-05 14:50:35 · 159 阅读 · 0 评论 -
Django中整合Vue-cli,并解决各种路径引用错误和跨域的问题
一、在文件夹demo7下新建Django项目;二、在文件夹demo7下建立子文件夹vue,再在该目录下搭建vue-cli项目;Django和Vue-cli搭建完成后的目录结构如下:三、将Django的TEMPLATES目录指向Vue构建后的dist目录:demo7/demo7/setting.pyTEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates',原创 2020-07-03 22:58:39 · 555 阅读 · 0 评论 -
解决vue-cli构建后的index.html找不到图标和引用的js、css文件路径错误的问题
1、config/index.js:module.exports = { build: { // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', }}将上面的assetsPublicPath属性设置为“./”2、build/utils.js: function generateL原创 2020-07-03 21:57:33 · 2721 阅读 · 3 评论 -
vue+element项目中对echarts图表随着浏览器窗口resize的处理
知识点:mixins、ref、$refs、$nextTick()准备工作:1、项目中安装echarts:cnpm i echarts -S2、在main.js中引入echarts:import echarts from 'echarts'Vue.prototype.$echarts = echarts实现方式:1、普通方式:实现该功能的单文件组件为:chart.vue<template> <el-row> <el-co原创 2020-05-24 10:22:49 · 1641 阅读 · 0 评论 -
Vue中如何设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式:background:url("../../assets/left-bg.jpg");这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题,方法如下:在data中定义如下:...原创 2020-04-21 22:21:24 · 4867 阅读 · 0 评论