VUE
关注
分享
扫一扫
vue相关内容
拾荒旧痕
这个作者很懒，什么都没留下…
展开
-
vue3的响应式原理简单实现
【代码】vue3的响应式原理简单实现。原创 2024-01-31 14:40:47 · 648 阅读 · 0 评论 -
van-uploader上传图片报错Invalid handler for event “load“(在uniapp编译)
主要原因这里使用的vant版本是2.13.0的，在Hbuild里面运行的项目，vant插件在这里会有部分组件有兼容问题，（van-image，van-uploader等）。：主要是要实现图片上传功能，可以使用uniapp自带的上传组件（原创 2023-10-26 14:24:07 · 1627 阅读 · 0 评论 -
vant组件安装之后导入所有组件报错
解决办法：在node_modules里面找到 vant目录下面的lib里面的。原创 2023-10-10 16:36:43 · 1129 阅读 · 1 评论 -
瀑布流的简单实现（vue3+ts）
瀑布流的实现原创 2023-07-01 17:01:38 · 926 阅读 · 0 评论 -
编程式导航常用API，页面刷新的代码
编程式导航常用APIthis.$router.push('hash地址')this.$router.go(n) // 常用 n为 -1 表示回退到前一个界面 页面刷新的代码location.reload() // 执行后实现页面自动刷新原创 2020-12-17 11:36:25 · 365 阅读 · 0 评论 -
路由嵌套注意点(子路由的地址, 占位符)
路由嵌套注意点1.在父路由模板里面写子路由链接的时候注意子路由链接的地址( ‘/父/子’ ),另外还要注意子路由链接后面加上路由占位符，要不然组件渲染不出来var Login = { template:`<div> <h2>Login组件</h2> <router-link to="/login/tab1">Tab1</router-link> <router-link to="/login/tab2"&g原创 2020-12-17 11:02:27 · 1108 阅读 · 0 评论 -
父子组件，非父子组件传值（组件传值必看！）
一：父组件向子组件传值：father：<template> <father> <son :message="msg"></son> (message动态绑定msg数据，必须v-bind:动态绑定) </father></template><script>export default { data(){ return { msg: "父亲" } }}<原创 2021-06-07 00:46:35 · 273 阅读 · 0 评论 -
cli搭建的vue项目各个文件夹的作用 (vscode)
vue项目各个文件夹的作用一.这个就是我们界面里面的文件1.node_modules用来存放包管理工具下载的包的文件夹，复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错文件夹以及文件过多过碎，当我们将项目拷贝给别人的时候，传输速度会很慢，所以传输项目一般不传输node_modules文件夹，可以根据package.json文件记录的信息通过执行npm install 下载当前依赖的第三方模块，生成node_modules文件夹 2.public存放的是原创 2020-12-10 20:16:38 · 3756 阅读 · 0 评论 -
Vue router的基本使用(分为六步)
一.使用步骤分为以下六步引入相关的库文件一般为vue文件和 vue-router文件 (注意：这里一定先引入vue文件然后再引入vue-router文件，要不然后面会报错)添加路由链接<router-link to="/xxx"></router-link>添加路由填充位(路由占位符)<router-view></router-view>定义路由组件var User = { template: "<div&原创 2020-12-16 17:20:49 · 322 阅读 · 1 评论 -
vue具名插槽，作用域插槽详解
vue插槽原创 2022-10-12 10:40:29 · 734 阅读 · 1 评论 -
金额格式化，三位数逗号分隔，小数点后保留两位（vue金额过滤器）
vue金额过滤器原创 2022-08-13 15:16:56 · 4769 阅读 · 1 评论 -
table表格 新增顶部滚动条el-table(elment-ui), Table(iview)
需求：增加顶部滚动条，方便查看表格里面隐藏在后面的数据1. el-table(elment-ui) 的实现方法table表格上面添加一个div,外层设置为100%，内层div(内容区域)设置为table内容宽度 <!-- 顶部滚动条 --> <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrol原创 2022-05-20 11:27:56 · 2791 阅读 · 3 评论 -
el-upload上传多张图片 可预览，图片上传做压缩element-ui
项目里面涉及图片上传的功能，要图片可以预览，上传的时候图片大了要做压缩图片上传以及预览<Form-item label="图片详情" prop="imageUrl"> // Form-item 做了图片必传校验；不需校验不用写 <el-upload class="avatar-uploader" :action="action" // 必选参数，上传的地址 :headers="headers" list-type="picture-c原创 2022-05-18 09:54:05 · 1541 阅读 · 0 评论 -
vue生命周期（超详解！）
在Vue官网上一篇讲到了Vue实例以及它的生命周期，这里我将实例生命周期的图截了下来如下：我们可以看到在Vue实例的整个生命周期中，会有八个生命周期钩子函数提供给我们，方便我们在不同时期进行不同操作，八个钩子函数如下：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed先一起来看看下面代码的打印结果：<!DOCTYPE html><html>转载 2021-06-11 18:39:38 · 629 阅读 · 0 评论 -
Vue.js devtools最简便安装流程
进入网址：https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521下载安装文件下载插件，并在浏览器提示中选择【保留】打开浏览器扩展安装页面点击浏览器右上角 ⋮ > 更多工具 > 点击 扩展程序安装插件在扩展中心打开右上角的 【开发者模式】按钮，然后【刷新】页面，把下载好的 .crx 文件拖入扩展中心最后关闭浏览器重新打开，在打开一个Vue项目测试即可...原创 2021-04-11 22:25:18 · 243 阅读 · 0 评论 -
vue使用折线图插件 echarts
第一步：charts的下载并引用npm install echarts --save注意 :这样下载的版本是最新版本 5.0.0以上的。（后面的引入方式和5.0.0之前版本不太一样）第二步：在main.js 里面引入// 引入import * as echarts from 'echarts';// 挂载Vue.prototype.$echarts = echarts第三步：简单案例，单根折线<template> <!-- 图表 --> <原创 2021-04-29 22:04:45 · 1075 阅读 · 0 评论 -
vue中的深度监听（监听一个对象的全部属性、监听一个对象的一个属性）
<div> <p>obj.a: {{obj.a}}</p> <p>obj.a: <input type="text" v-model="obj.a"></p></div> new Vue({ el: '#app', data: { obj: { a: 66, b:'总' } }监听一个对象的全部属性： watch: { obj:转载 2021-06-12 09:52:47 · 2751 阅读 · 0 评论