Vue
一只漫步前行的羊
这个作者很懒,什么都没留下…
展开
-
Vue——使用provide、inject组件通讯
【代码】Vue——使用provide、inject组件通讯。原创 2023-02-28 15:50:34 · 66 阅读 · 0 评论 -
Vue——使用mitt
【代码】Vue——使用mitt。原创 2023-02-27 18:57:36 · 602 阅读 · 0 评论 -
Vue——v-bind、v-on动态参数
代码中的attributeName会被作为一个JavaScript表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果Vue实例有一个data属性attributeName,其值为href,那么这个绑定将等价于v-bind:href。代码中的event会被作为一个JavaScript表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果Vue实例有一个data属性event,其值为click,那么这个绑定将等价于v-on:click。原创 2023-02-27 12:00:34 · 683 阅读 · 0 评论 -
Vue——v-memo 提高性能
当组件重新渲染的时候,如果valueA与valueB都维持不变,那么对这个以及它的所有子节点的更新都将被跳过。事实上,即使是虚拟DOM的VNode创建也将被跳过,因为子树的记忆副本可以被重用。原创 2023-02-27 11:49:06 · 115 阅读 · 0 评论 -
Vue3——区域内无限滚动
【代码】Vue3——区域内无限滚动。原创 2022-10-31 14:05:34 · 1055 阅读 · 0 评论 -
Vue——pinia 状态管理器
默认情况下,你可以通过 store 实例访问 state,直接对其进行读写。原创 2022-10-21 16:53:00 · 344 阅读 · 0 评论 -
Vue——组件之间的通讯
【代码】Vue——组件之间的通讯。原创 2022-09-19 17:50:41 · 255 阅读 · 0 评论 -
Vue——创建基于Vite项目
【代码】Vue——创建基于Vite项目。原创 2022-09-19 15:16:47 · 247 阅读 · 0 评论 -
Vue——整理一些开源管理平台项目
Git代码仓库:Gitee代码仓库: (不定期同步)官方文档:Git代码仓库:Gitee代码仓库:官方文档:Git仓库地址:Gitee仓库地址:原创 2022-09-02 14:54:05 · 1266 阅读 · 0 评论 -
Vue3——setup 语法检测
1. 安装Vue Language Features、TypeScript Vue Plugin插件2. 安装后,禁用Vetur3. 禁用后重启工具即可原创 2022-08-15 15:53:35 · 460 阅读 · 0 评论 -
Vue、React—— 跨平台框架taro
可选择要创建的项目框架React、Vue,后面的配置可自行选择。原创 2022-08-11 11:56:13 · 1152 阅读 · 0 评论 -
Vue3——国际化多语言集成
代码】Vue3——国际化多语言集成。原创 2022-08-08 12:07:39 · 518 阅读 · 0 评论 -
Vue、JS——定时器倒计时封装
代码】Vue、JS——定时器倒计时封装。原创 2022-08-03 11:46:12 · 549 阅读 · 0 评论 -
Vue——动态加载网络js文件
代码】Vue——动态加载网络js文件。原创 2022-07-23 18:56:37 · 3561 阅读 · 0 评论 -
Vue—— 使用keep-alive后刷新组件
Vue2Vue3原创 2022-07-06 11:01:26 · 1610 阅读 · 0 评论 -
Vue——使用内置组件Keep-alive
1. 在app.vue中加入组件2. keep-alive 属性3. 例子原创 2022-07-05 18:54:04 · 284 阅读 · 0 评论 -
Jquery、Axios——上传文件
1. 引入Jq插件2. 上传函数【通过获取input标签获取File对象上传图片】【通过网络地址转换成File对象上传图片】原创 2022-06-25 16:22:23 · 260 阅读 · 0 评论 -
Vue——打包优化
【打包分析】【包分割optimization.splitChunks】【图片压缩】原创 2022-06-14 15:28:03 · 389 阅读 · 0 评论 -
Vue——播放器DPlayer
1. 安装依赖2. 引入依赖3. 初始化播放器【options属性】【api事件】参考文档:http://dplayer.js.org/zh/guide.html#api原创 2022-06-13 14:20:58 · 2547 阅读 · 0 评论 -
Vue——整理一些常用框架
【Element UI】官网地址:https://element.eleme.cn/#/zh-CN【Element Plus】官网地址:https://element-plus.gitee.io/zh-CN/guide/design.html【Ant Design of Vue】官网地址:https://www.antdv.com/docs/vue/introduce-cn/【iView】官网地址:http://iview.talkingdata.com/#/【Naive U原创 2022-05-31 14:19:38 · 517 阅读 · 0 评论 -
Vue——使用echarts
官网地址:https://echarts.apache.org/zh/index.html1. 安装依赖cnpm i -S echarts2. 使用//html<template> <div id="main" style="width: 500px; height: 500px"></div></template>//jsimport * as echarts from "echarts";let myChart = echart.原创 2022-05-30 14:31:09 · 64 阅读 · 0 评论 -
HTML、Vue——微信H5跳转小程序
1. 页面引入js<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>2. HTML部分(username:小程序原生id,path:小程序页面地址)<wx-open-launch-weapp id="launch-btn" username="*****" path="******"> <script type="text原创 2021-08-31 14:41:51 · 1718 阅读 · 0 评论 -
Vue——富文本
【tinymce】//安装依赖cnpm i -S @tinymce/tinymce-vue@4.0.4cnpm i -S tinymce@5.8.2中文包:https://download.csdn.net/download/qq812457115/85473477封装成组件<template> <editor v-model="tinymceData" tag-name="div" :init="init" /></template><原创 2022-05-27 14:43:58 · 1345 阅读 · 0 评论 -
Vue——自定义v-model 数据双向绑定
//父组件<childrenCom v-model:parentData="parentData"></childrenCom>return { parentData:""}//子组件this.$emit("update:parentData","changeData")原创 2022-05-26 18:48:51 · 201 阅读 · 0 评论 -
Vue——生成二维码
1. 使用qrcodejs2依赖//加载依赖cnpm i -S qrcodejs2//引入模块import vueQr from "qrcodejs2";或//使用qrcode = new vueQr("qrcode", { text: "https://www.baidu.com",//要生成二维码的地址 width: 128,//二维码宽 height: 128,//二维码高 colorDark: "#000000",//二维码颜色 colorLight: "#ffffff"原创 2022-05-23 11:20:47 · 251 阅读 · 0 评论 -
JS——使用VConsole
【npm】//安装npm install vconsole//使用import VConsole from 'vconsole';const vConsole = new VConsole();【cdn】<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>原创 2022-05-20 11:07:11 · 3006 阅读 · 0 评论 -
Vue——excel导出
方案一:vue-json-excel//安装依赖cnpm i -S vue-json-excel//导入组件import JsonExcel from "vue-json-excel";export default { components: { JsonExcel }, }//使用<JsonExcel :fields="fields" :data="data" title="导出标题" defaultValue="-"> 导出 </JsonExcel>/原创 2022-05-09 17:20:05 · 582 阅读 · 1 评论 -
Vue——事件绑定保持原参数,添加新的参数
<button @click="handleFn($event,'自定义参数')">点击</button>原创 2022-04-29 14:11:22 · 1406 阅读 · 0 评论 -
Webstorm——Vue项目 无法识别@
1. ctrl+alt+s[进入设置页面]language & frameworks -> javascript -> webpack选择Manually,然后选择Configuration File 路径当前目录:node_modules@vue\cli-service\webpack.config.js原创 2022-04-26 16:42:15 · 1803 阅读 · 0 评论 -
Npm——项目删除太慢解决
//安装cnpm i -g rimraf//使用rimraf 目录原创 2022-04-21 18:16:32 · 1894 阅读 · 0 评论 -
Vue——Vue3.x 新特性
1. setup 函数(1) setup 函数是 Vue3 中新增的函数,在 beforeCreate 之前调用,此时组件的 data 和 methods 还没有初 始化因此在 setup 中是不能使用 this 的 , 函数中返回一个对象,可以在模板中直接访问该对象中的属性和方法(2) setup 函数接收两个参数 props 和 context , setup(props,context)(2.1) props 里面包含父组件传递给子组件的所有数据(2.2) context 里面包含 attr原创 2022-01-06 15:39:37 · 727 阅读 · 0 评论 -
Vue——基于electron创建桌面应用
项目地址:https://gitee.com/wry-vue-demo/electron-egg.git项目教程:https://www.yuque.com/u34495/mivcfg/xnhmms原创 2021-12-13 18:18:50 · 937 阅读 · 0 评论 -
Vue——使用/安装 Scss/Sass
1. 命令安装 style-resources-loadervue add style-resources-loader2. 添加依赖npm install node-sass sass-loader sass -D3. 运行项目出现一下错误,是因为sass-loader安装的版本过高4. 降低sass-loader版本npm install sass-loader@6.0.0 -D5. 运行项目OK~~...原创 2021-09-06 11:30:11 · 160 阅读 · 0 评论 -
Vue——创建uni-app脚手架
1. 安装vue-clinpm install -g @vue/cli2. 创建uni-appvue create -p dcloudio/uni-preset-vue my-project原创 2021-06-24 11:50:55 · 224 阅读 · 0 评论 -
Vue——路由模式
1. 路由模式1.hash 使用URL的hash值来作为路由。支持所有浏览器2.history 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式3.abstract 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式1.1. hash模式hash模式原理是window.onhashchange事件1.2. history模式URL中的#号去除了......原创 2021-06-08 17:12:27 · 145 阅读 · 2 评论 -
Vue——nexttick原理
1. 用法在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM原创 2021-05-30 22:52:46 · 69 阅读 · 1 评论 -
Vue——配置VUE2、3环境、创建一个vue-cli脚手架项目
一、安装vue-clicnpm install --global vue-cli二、验证是否安装成功,输入命令vue -V安装成功三、创建vue2项目vue init webpack mydemo四、创建完成后进入项目,下载依赖cnpm i启动成功,试着在浏览器中访问一下OK~~...原创 2020-03-05 16:22:31 · 200 阅读 · 0 评论 -
Vue——过滤input标签输入的内容
一、新建inputFilter.js , 过滤方法exports.install = function (Vue, options) { //过滤0到9、a到F的字符 Vue.prototype.F_09aF = function () { fileterData(obj, key, new RegExp("[(0-9|a-f|A-F)]")); };//过滤除数字和英文...原创 2020-04-26 11:15:40 · 1889 阅读 · 0 评论 -
Vue——vuex简单描述
1. vuex是什么?怎么使用?哪种功能场景使用它?1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex2.场景:多个组件共享数据或者是跨组件传递数据时2. vuex有哪几种属性有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)1.state:vuex的基原创 2021-05-21 09:02:52 · 2408 阅读 · 0 评论 -
Vue——路由守卫
1. 全局路由//to: Route: 即将要进入的目标 路由对象//from: Route: 当前导航正要离开的路由//next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖 next 方法的调用参数router.beforeEach(to,form,next)1. 全局解析守卫//to: Route: 即将要进入的目标 路由对象//from: Route: 当前导航正要离开的路由//next: Function: 一定要调用该方法来resolve这个钩子原创 2021-05-21 13:53:44 · 76 阅读 · 0 评论