Vue
文章平均质量分 84
Vue笔记
赤蓝紫
这个作者很懒,什么都没留下…
展开
-
element-plus 下拉框实现全选功能
实习确实能学到不少东西,但是学到的东西果然还是需要沉淀下来,不然后面立马又忘记了。使用方法还是比较简单的首先需要使用到和,就是下拉框,所以需要使用双向绑定数据。而就是下拉框的选项。需求:下拉框选项中有全选以及其他项,需要实现点击全选后不能选择其他项,选中了其他项同样不能选择全选。先来简单了解下下拉框的多选。理论上来说,是只需要给添加上就能实现多选,但是效果不太好。选中的会挤在一起。这个时候,我们可以添加属性,这样子,这样子就只会显示一个选项,没显示的以数量的形式在后面。再添加属性,还能实现,悬浮在上方时原创 2022-06-09 11:48:51 · 6559 阅读 · 2 评论 -
el-upload上传文件
公司和学校项目都用到了上传文件的功能,记录一下。如果需要使用,自行查阅用法,也可以到本人博客中查看简单教程。解释下上面的属性::请求URL:是否展文件列表(如果没上传成功,则会闪现一下,再消失):文件上传成功钩子:文件上传失败钩子接下来,去后端设置的路径去看看有没有成功保存上传的文件。这个比较简单,因为也封装好了,只需要使用属性,去设置请求头即可有时候并不是直接上传就可以的,比如一开始并没有上传路径,需要调用获取签名接口来获取上传路径。这个时候就可以使用我们的上传文件之前的钩子。在上传前调用获取签名的原创 2022-06-09 11:48:07 · 17751 阅读 · 1 评论 -
Element Plus修改表格行、单元格样式
Element Plus修改表格行、单元格样式前言实习工作需要根据表格的状态字段来设置行的样式,记录一波。先来一下基础配置。(Vue3)<template> <el-table :data="tableData" border style="width: 400px"> <el-table-column prop="name" label="姓名" width="100" /> <el-table-column prop="age" la原创 2022-05-27 10:27:56 · 5481 阅读 · 0 评论 -
Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一)个人练习结果仓库(持续更新):Vue源码解析抽空把之前学的东西写成笔记。学习视频链接:【尚硅谷】Vue源码解析之mustache模板引擎模板引擎是什么模板引擎是将数据变为视图最优雅的解决方案。其中,Vue中的列表渲染指令v-for就是一种模板引擎。而**插值表达式{{}}**便是本次要研究的mustache模板引擎的语法将数据变为视图的方法纯DOM法很笨拙。需要频繁创建节点,添加数据,添加节点。const arr = [ { '原创 2022-03-24 18:37:07 · 1143 阅读 · 0 评论 -
Vue Router深入学习(二)
Vue Router深入学习(二)通过阅读文档,自己写一些demo来加深自己的理解。(主要针对Vue3)上一篇:Vue Router深入学习(一)1. 路由元信息原创 2022-03-15 16:41:19 · 2679 阅读 · 0 评论 -
Vue Router深入学习(一)
Vue Router深入学习(一)之前的笔记:Vue路由通过阅读文档,自己写一些demo来加深自己的理解。(主要针对Vue3)1. 动态路由匹配1.1 捕获所有路由(404路由)const routes = [// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },// 将匹配以 `/user-` 开头的所有内容,并将其放在原创 2022-03-12 11:38:38 · 842 阅读 · 0 评论 -
params编程式导航踩坑
params编程式导航踩坑个人博客:params编程式导航踩坑1. params 不能与 path 一起使用先来一下路由配置import { createRouter, createWebHashHistory, useRoute } from "vue-router"const routes = [ { path: '/user/:userid', component: () => import('../components/User.vue'), }]c原创 2022-03-08 16:37:07 · 316 阅读 · 0 评论 -
刷新页面后this.$route.params 为空
刷新页面后this.$route.params 为空个人博客:刷新页面后this.$route.params 为空深度学习vue-router时,按官方文档的教程看下来,结果发现刷新页面后,打印的this.$route.params为空Vue2问题复现路由配置:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({ routes:原创 2022-03-08 16:35:54 · 2896 阅读 · 7 评论 -
Vue项目部署到服务器(ubuntu)
Vue项目部署到服务器(ubuntu)工具:WinSCP、PuTTy(可能不是专业的工具,是本人上操作系统的课用到的软件,直接用来部署了)打包项目,npm run build执行npm run build命令后,会生成一个dist文件夹。这一步如果得不到预期的结果,可以把vue.config.js文件中的publicPath节点变为’./’,如果不存在,则新建文件把项目文件放到服务器上用WinSCP登录服务器后,理论上直接把本地的文件直接拖过去,就能复制过去了。但是ubuntu没有ro原创 2022-01-02 15:17:23 · 3538 阅读 · 0 评论 -
Vue3快速入门(二)
Vue3快速入门(二)个人博客:Vue3快速入门(二)1. 父子组件间的数据共享1.1 props父传子子组件<template> <h2>{{props.name}}</h2> <!-- 可省略prop. --> <h2>{{name}}</h2></template><script setup> const props = defineProps({ // defineProp原创 2022-03-01 10:36:06 · 1393 阅读 · 1 评论 -
Vue学习笔记(二)
Vue学习笔记(二)个人博客(欢迎光临):Vue学习笔记(二)(赤蓝紫)单页面应用程序SPA,指的是一个Web网站中只有唯一一个HTML页面,所有的功能和交互都在这个唯一的页面内完成。1. vue-clivue-cli是Vue.js开发的标准工具。1.1 安装npm install -g @vue/cli1.2 vue项目的部分文件功能vue通过main.js把App.vue渲染到index.html的指定区域中。App.vue用来编写待渲染的模板结构index.html需要预留一原创 2022-02-08 19:24:04 · 346 阅读 · 0 评论 -
Vue学习笔记(三)
Vue学习笔记(三)个人博客(欢迎光临):Vue学习笔记(三)(赤蓝紫)1. 插槽插槽允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。我们使用标签时,开始标签和结束标签之间之前都没有写东西。组件的标签和正常的双标签,如div、p等一样,可以在里面写东西。但是,直接在里面写,会发现,写的东西不会显示出来,也找不到了,被丢弃了。其实这个也挺好理解的,组件本来就有东西了,vue又不知道你写的东西要插到哪里去。所以,vue提供了插槽,可以在想要插的地方加上一个插槽,之后再把内容插过去。原创 2022-02-08 19:25:48 · 336 阅读 · 0 评论 -
Vue 按条件添加类
Vue 按条件添加类个人博客:Vue 按条件添加类<el-card class="box-card"> <div class="question" ref="question" v-for="(question, index) in questionList" :key="question.id"> <h4>{{(index+1) +10*(currentPage-1)}}. {{question.ques}}</h4> <div原创 2022-02-13 19:20:52 · 877 阅读 · 0 评论 -
Vue3快速入门(一)
Vue3快速入门(一)个人博客:Vue3快速入门(一)实习进入公司后,简单安装vscode、node、git等必备工具后,导师直接问有没有学过vue3,说了只学过vue2后,就给我分享了两篇文章,以及让我查看文档,快速从vue2加速到vue3。本文将参考到很多文章、文档,部分借用的可能没有备注出来,侵权请联系。(不过就算是参考,例子我很多按自己的理解弄成自己以后看更容易理解的了,虽然也差不了多少)顺带附上以前的笔记:Vue21. 构建项目开始的第一步,当然就是构建项目啦。这里就有一个重大的区别了,原创 2022-02-21 21:07:03 · 2237 阅读 · 4 评论 -
Vue学习笔记(一)
Vue学习笔记(一)1. vue简介Vue是一套用于构建用户界面的前端框架1.1 vue的两个特性数据驱动视图使用了vue的页面,vue会监听数据的变化,自动重新渲染页面的结构数据驱动视图是单向的数据绑定,即只能由数据来影响页面结构双向数据绑定填写表单时,双向数据绑定可以让开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源中1.2 MVVMvue实现数据驱动视图和双向数据绑定的核心原理。M指的是Model,V指的是View,VM指的是ViewM原创 2022-02-08 10:03:52 · 493 阅读 · 0 评论