Vue 方面知识
文章平均质量分 87
本栏主要讲解Vue方面的知识,大都适合后端去了解前后端交互方式等等跨域等等。
宁在春
阿里云/InfoQ签约作者,掘金/csdn优质创作者,Java 领域的新生创作者,主要深耕于 Java 领域相关的技术。
喜爱创作,希望自己的文章能够帮助到一些伙伴,也希望能够通过创作结交到一些志同道合的伙伴。
长路修远,吾与子之共适。(长路漫漫,我们一起享受~)
一个喜欢文艺却走上编程的男孩。
望别日,与君相见时,君已有所成。
展开
-
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言学完Vuex方面的操作就该来学学Vue中的路由操作了… xdm冲一、安装vue-cli 安装vue add router做完这一步基础环境都搭好了。项目中会多一个文件夹,内容如下:最后暴露出来,在mian.js 中引用进去就可以了。暂时先不细讲。二、基本路由使用基本路由使用,其实你安装完就已经有例子啦。在App组件中 有下面这两行代码,其实就路由跳转的意思。<router-link to="/">Home</router-link> |<.原创 2021-11-28 16:38:57 · 918 阅读 · 1 评论 -
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表,得学学了,必须要会的基本操作了
依旧还是学妹给的封面直接进入主题…在vue中使用个啥,都差不多是一个流程。引入Echarts安装npm install echarts --save我们写一个Echarts组件,在内进行引入import * as echarts from 'echarts'入门使用如果之前没有接触过Vue或者Echarts 的小伙伴,了解方式无疑就是Echarts官方文档或各大搜索引擎了。我的了解方式无疑也是这个,但是我在看官方文档的时候,觉得官方给的那个例子,有点点不符合Vue的风格,不过我先贴.原创 2021-11-26 10:24:35 · 1568 阅读 · 2 评论 -
「后端小伙伴来学前端了」Vuex进阶操作,让你的代码更加高效(简称如何学会偷懒 【手动狗头】)
前言前一篇写了Vuex基本使用,用起来还稍稍有些繁琐,代码有很多冗余的地方,这篇就带着大家用更简单的方式来使用Vuex(其实就是怎么更好的偷懒,用更少的代码来完之前的事情)进入正文…一、mapGetters 方法在我们之前要取出store中的getters,在组件中是需要$store.getters.bigSum 才能取到,为了方便会写成计算属性bigSum(){ return this.$store.getters.bigSum}一个两个还能接受,但是如果有很多的,代码会显得十分原创 2021-11-25 13:58:43 · 612 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vuex 基本使用及案例,快速上手,学会使用vuex
前言上篇文章说了vuex的简单原理,这篇就着重讲讲如何使用简单的vuex,看看它到底有何优秀之处吧。我们要使用Vuex,使用流程大致是不是就是下面这几步呢?npmVue.use()store另外就是让所有vc都能够访问到store一、安装npm安装npm install vuex --save如果我们直接使用vue脚手架创建项目,可以在创建时就直接选择安装 vuex。二、入门使用及案例第二步就是引入vuex,使用插件了。import Vue from 'vue'impor原创 2021-11-24 08:40:57 · 385 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vuex原理图分析及结合生活案例让大家快速理解
来自一名超级美的学妹:????Sunday????前言上篇文章说了为什么在vue中有了全局事件总线还要引入vuex的问题,这篇着重讲Vuex的原理图,知道原理图才能够明白如何去书写Vuex的代码。一、原理图来自于Vuex官网从图中我们可以看到,vuex中有Actions、Mutations、State三个对象,先从字面意思上理解下哈Actions:翻译过来即为动作、行为的意思Mutations:翻译过来有变化、转变的意思State:翻译过来就是状态的意思,这里的状态其实就是数据的意思。原创 2021-11-23 09:04:32 · 322 阅读 · 0 评论 -
「后端小伙伴来学前端了」为什么Vue在有了全局事件总线后还要引入Vuex呢?
今日清晨,乌云散去前言上一篇我写了关于Vue中全局事件总线的相关原理及小案例。在之前文章有简单的说过关于我个人理解的 Vue 核心思想(刚学不久,如有不足,请各位大佬及时斧正)数据的双向绑定,不用再手动操作DOM元素组件化开发,将一个页面划分成多个小组件,然后再一步一步拼凑而成组件化开发,最大的痛点可能就是要做到任意间组件通信,组件间通信其本质就是数据的共享。对于组件间的通信,我在之前也是一步一步写过来的组件间利用props实现组件间通信 (适用于父子组件通信,祖孙组件也行,对兄弟组.原创 2021-11-22 08:54:19 · 720 阅读 · 0 评论 -
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用,实用且也是组件中必会的一个知识,另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些。更多时候也会更加方便。今天介绍Vue中三种插槽吧:默认插槽、具名插槽、作用域插槽。环境准备先搭个初始环境给大家看看哈。一步一步讲完这个插槽。就是写了一个类别组件,分别渲染这三种数据。Category组件<template> <div class="category"> <h1>{{title}}</h1> .原创 2021-11-21 11:23:56 · 628 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
前言上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础。我在上一篇文章中埋下了一个小小的伏笔。如下图:我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其本质就是给子组件VueComponent即vc绑定一个事件,然后子组件通过this.$emit()触发,父组件监听到再执行回调方法。这种也只适合于父子组件之间通信,对于兄弟组件来说,仍然无法非常方便的通信。那全局事件总线是什么样的呢?一、全局事件总线前述提供一个思考方向:其他组件同样如此。那么.原创 2021-11-20 11:19:45 · 1041 阅读 · 0 评论 -
「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉。一、v-on指令要讲自定义事件,就得先说说v-on指令。因为v-on就是实现自定义事件的基础。v-on官网文档基本介绍v-on指令可以缩写为@,并且我们使用v-on指令时,其实它有一个默认参数event.可以和它一起搭配的修饰符大致有以下几种:.stop - 调用 event.stopPropagation()。 停止冒.原创 2021-11-19 09:50:32 · 179 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误?你有没有思考过?
清晨的☀前言我们都知道在 Vue 中并不只有纯正的CSS,还有less、sass等,后面这些,写起来都可以级联着,不需要像原生的css那样,会方便很多。大家都知道我也是最近写的vue,看见周围人都在用这个,我也就去安装了一下,但是一直都报一个版本过高的错误。这种错误非常好解决,因为后端也常遇到,直接降版本就好了。因为好奇心的驱使,我就在想,为什么不能安装最新less-loader?好像也没有哪里体现啊然后就产生了这篇文章…一、踩坑开始我目前项目是没有安装的,我们先把<style lan.原创 2021-11-18 10:15:00 · 929 阅读 · 1 评论 -
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了。前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式。父组件通过 props 向下传数据给子组件,当子组件有事情告诉父组件时会通过$emit事件告诉父组件。对于父子组件,这种传递方式,是较为方便且实用的,但是对于祖孙组件或者兄弟组件,就显得不那么友善了。在Vue本身的生态中,也有一个独立的Vuex库用来处理组件之间的通讯,但很多时候,咱们并不需要动用类似Vu..原创 2021-11-17 00:12:11 · 620 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末。前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫。光学不敲等于没学哈(资深大佬除外哈)目标就是实现如下的样子:能够进行增删改查,并且是在各个组件之间。一、环境准备针对这个页面,我们将他们划分为下面四个组件哈。其实也不是固定的,只是为了更好的展示组件之间的通信。项目结构:准备静态页面MyTodoHeader头部组件:<template> <div class="todo-header-box">.原创 2021-11-15 09:05:03 · 682 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信
「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战前言废话:上篇文章写了关于Vue 中的 props????props,讲述了概念、基本使用及注意点,在这篇文章中,我们也会用到 props和方法来让组件之间实现通信。正题:组件是Vue中非常重要的一个概念,也是模块化开发的基础。在使用vue的开发过程中,每个页面就是由多个不同的组件组合而成的。如下图:既然有多个组件,就必须要做到数据的动态性,也要原创 2021-11-14 01:04:53 · 353 阅读 · 0 评论 -
「后端小伙伴来学前端了」关于 Vue中的 props
校园的晚霞前言学vue必须要会的就是组件这玩意啦,不然可能就约等于白学。我自己前期完成老师布置的任务,不瞒你说,交上去,直接被骂,原因就是我一个组件没抽????(一边学,一边敲,没想那么多,只想着实现)。一个小小页面,1163行(捂脸)。然后就下定决心来好好整vue组件,其实我觉得还蛮好玩的。接下来就让我们看看组件必会的 props了解这个之前一定得懂点组件基础哈。介绍vue.js文档在props这节真就是直接上手,把我当大佬组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组原创 2021-11-13 21:23:20 · 885 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐。就是所谓的render函数。一、main.js中引入的原来是残缺版vue.js我们来接着看看main.js这个入口文件。// 引入vueimport Vue from 'vue'// 引入app组件import App from './App.vue'// 关闭生产提示Vue.config.productionTip = false/.原创 2021-11-13 00:05:52 · 833 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度、google、bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜、思否搜一搜,还有CSDN看一看。我的前端是吃百家饭长大的,每天不知道要遇到多少问题,然后基本上周围所有的前端同学都被我问到了,基本上就是谁有空就拉谁来教我。前端太多细节问题了,一旦遇到没有接触过问题,就会非常麻烦,如果有学习前端的后端小伙伴,我觉得最快熟悉前端的方式,就是整个项目写。这可能是最快上手前端框架的方式了吧。一、vue中修改数组对象.原创 2021-11-09 23:22:14 · 2883 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器,实现气泡菜单,划词弹出菜单
Vue集成 Element-tiptap 富文本编辑器这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战前言今天在写前端的时候,就是遇到一个问题。一开始我以为用textarea去掉角标,实现自动增长,然后就可以了。谁知道它还得加样式,加粗、斜体,老师在最开始给的设计稿上根本没有。直接麻掉。后来就去搞这个富文本编辑器。感觉前端也不容易,要学习的东西真的蛮多。功能需求是这样的就是选中文章,给它加粗,加斜体,加样式,并且选中的时候能够在上面弹出一个小菜单。为了这个气泡菜单,原创 2021-11-09 08:15:18 · 1494 阅读 · 6 评论 -
史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解!!!
史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解!!!找了很多博客,最后才成功,????太难啦。大家要是最后成功了一定要记得来给我点个赞哦。每一步都是带图带解析的实操。步骤:1、打包先将前端vue项目打包运行命令:npm run build等它打包完就可以啦。2、Dockerfile文件写一个Dockerfile文件FROM nginx #拉取nginx镜像COPY ./dist/ /usr/share/nginx/html/ #将dist目录下内原创 2021-05-18 21:04:02 · 3329 阅读 · 12 评论