北

前言学完Vuex方面的操作就该来学学Vue中的路由操作了… xdm冲一、安装vue-cli 安装vue add router做完这一步基础环境都搭好了。项目中会多一个文件夹，内容如下：最后暴露出来，在mian.js 中引用进去就可以了。暂时先不细讲。二、基本路由使用基本路由使用，其实你安装完就已经有例子啦。在App组件中 有下面这两行代码，其实就路由跳转的意思。<router-link to="/">Home</router-link> |<.

依旧还是学妹给的封面直接进入主题…在vue中使用个啥，都差不多是一个流程。引入Echarts安装npm install echarts --save我们写一个Echarts组件，在内进行引入import * as echarts from 'echarts'入门使用如果之前没有接触过Vue或者Echarts 的小伙伴，了解方式无疑就是Echarts官方文档或各大搜索引擎了。我的了解方式无疑也是这个，但是我在看官方文档的时候，觉得官方给的那个例子，有点点不符合Vue的风格，不过我先贴.

前言前一篇写了Vuex基本使用，用起来还稍稍有些繁琐，代码有很多冗余的地方，这篇就带着大家用更简单的方式来使用Vuex（其实就是怎么更好的偷懒，用更少的代码来完之前的事情）进入正文…一、mapGetters 方法在我们之前要取出store中的getters，在组件中是需要$store.getters.bigSum 才能取到，为了方便会写成计算属性bigSum(){ return this.$store.getters.bigSum}一个两个还能接受，但是如果有很多的，代码会显得十分

前言上篇文章说了vuex的简单原理，这篇就着重讲讲如何使用简单的vuex，看看它到底有何优秀之处吧。我们要使用Vuex，使用流程大致是不是就是下面这几步呢？npmVue.use()store另外就是让所有vc都能够访问到store一、安装npm安装npm install vuex --save如果我们直接使用vue脚手架创建项目，可以在创建时就直接选择安装 vuex。二、入门使用及案例第二步就是引入vuex,使用插件了。import Vue from 'vue'impor

来自一名超级美的学妹：????Sunday????前言上篇文章说了为什么在vue中有了全局事件总线还要引入vuex的问题，这篇着重讲Vuex的原理图，知道原理图才能够明白如何去书写Vuex的代码。一、原理图来自于Vuex官网从图中我们可以看到，vuex中有Actions、Mutations、State三个对象，先从字面意思上理解下哈Actions：翻译过来即为动作、行为的意思Mutations：翻译过来有变化、转变的意思State：翻译过来就是状态的意思，这里的状态其实就是数据的意思。

今日清晨，乌云散去前言上一篇我写了关于Vue中全局事件总线的相关原理及小案例。在之前文章有简单的说过关于我个人理解的 Vue 核心思想（刚学不久，如有不足，请各位大佬及时斧正）数据的双向绑定，不用再手动操作DOM元素组件化开发，将一个页面划分成多个小组件，然后再一步一步拼凑而成组件化开发，最大的痛点可能就是要做到任意间组件通信，组件间通信其本质就是数据的共享。对于组件间的通信，我在之前也是一步一步写过来的组件间利用props实现组件间通信 （适用于父子组件通信，祖孙组件也行，对兄弟组.

前言插槽可以说是 Vue 中非常重要的一部分吧，在我学习和练习的过程中，当组件搭配着插槽一起使用的时候，会发挥的更好一些。更多时候也会更加方便。今天介绍Vue中三种插槽吧：默认插槽、具名插槽、作用域插槽。环境准备先搭个初始环境给大家看看哈。一步一步讲完这个插槽。就是写了一个类别组件，分别渲染这三种数据。Category组件<template> <div class="category"> <h1>{{title}}</h1> .

前言上一篇文章写了 Vue 中的自定义事件，自定义事件是全局事件总线基础。我在上一篇文章中埋下了一个小小的伏笔。如下图：我说过，在Vue中如果我们用（@orv-on）给组件绑定上一个自定义事件，其本质就是给子组件VueComponent即vc绑定一个事件，然后子组件通过this.$emit()触发，父组件监听到再执行回调方法。这种也只适合于父子组件之间通信，对于兄弟组件来说，仍然无法非常方便的通信。那全局事件总线是什么样的呢？一、全局事件总线前述提供一个思考方向：其他组件同样如此。那么.

我想喜欢小猫咪的人，一定非常可爱和温柔吧前言这个视频中的小猫咪贼可爱，然后下面的那给进度条是只小猫咪走来走去的。然后我就想可以拿进度条做点事情，一开始想搜一搜借鉴一下，但是根本没有这种高度自定义的。唉经历互联网当然是无比强大的，经过千辛万苦，还是有找到类似，第一眼我就爱上了那种。图来自于：会编程的银猪我就想着怎么能够把这个小狗换成小猫咪来操作。顺藤摸瓜就找到今天的主角：lottie-web 开源动画库进入正文…Lottie 动画库官方文档它也是机缘巧合下找到的。介绍：Lo.

前言：这个也是我最近学习才发现的一个细节，就是常常会在一些网站，看到下面图中这样的一个小三角，以前没怎么学CSS，我一直以为它是个精灵图之类。????我是最近才开始认真学的前端，比纯小白稍微懂的稍微多一点点。文章如若有那些不足之处，请及时指出，在此郑重感谢。一、CSS三角做法我们先简单说一下，如何把三角画出来，懂用什么画的之后，基本就完事了。html代码：<div class="sanjiao"></div>css代码：.sanjiao { /* 为了

前言最近老师让大家单独写前后端分离项目，真是大家卷完后端，一起去卷前端了。（我以前都是主要负责后端，处于只大致看的懂的级别，说多了都是泪啊）。真是处于一边学一边写的状态，基本就是每天早上看上两~三小时视频（主要是复习css、js、vue框架），之后开始敲代码。只有等到晚上回到寝室才有空写写文章，复习和总结一遍。CSS：vertical-align 属性vertical-align 属性设置元素的垂直对齐方式。我们直接用案例来说明：1）代码：html代码： <div class="b

一、Element修改下拉框角标就比如我最近遇上的一个问题，想要重定义 element 组件库中的下拉选择框的角标，一直不知道怎么覆盖才好。最后才知道是由伪元素做的。如果我们想要重定义element中下拉框的图标，就只要将它的伪元素做一下样式的修改就好了。.el-select__caret::before{ content: "\e78f"!important; font-size: 18px;}只要替换content中的内容即可。便可以轻松换掉图标了。我的效果图二、E

前言本文适合前端小白，或者是复习CSS的小伙伴，因为作者还是个前端小白（????）。一直经常会看到这两玩意，但是一直没去了解这个东东，光肝Java啦，现在是为了完成老师的任务，每天是一边学一边敲代码。个人感觉前端好玩还是好玩，样式难调也是真的难调。今天也是学到了这个小知识，趁着更文分享给大家。一、伪元素概念其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。二、我们为什么要使用伪元素？H

傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理，但是发现自己少写了这个自定义事件，不讲明白这个自定义事件的操作，不好写全局事件原理，于是就有了这篇文章拉。一、v-on指令要讲自定义事件，就得先说说v-on指令。因为v-on就是实现自定义事件的基础。v-on官网文档基本介绍v-on指令可以缩写为@，并且我们使用v-on指令时，其实它有一个默认参数event.可以和它一起搭配的修饰符大致有以下几种：.stop - 调用 event.stopPropagation()。 停止冒.

清晨的☀前言我们都知道在 Vue 中并不只有纯正的CSS,还有less、sass等，后面这些，写起来都可以级联着，不需要像原生的css那样，会方便很多。大家都知道我也是最近写的vue，看见周围人都在用这个，我也就去安装了一下，但是一直都报一个版本过高的错误。这种错误非常好解决，因为后端也常遇到，直接降版本就好了。因为好奇心的驱使，我就在想，为什么不能安装最新less-loader？好像也没有哪里体现啊然后就产生了这篇文章…一、踩坑开始我目前项目是没有安装的，我们先把<style lan.

前言上上篇写了：????Vue中利用Props实现TodoList案例上篇写了：????Vue中全局事件总线的概念及基本使用这篇就打算用全局事件总线来改造一下之前写的TodoList案例，一天学习一点，我们一起进步冲。一、案例效果需要实现的东西，和之前是一样的，只是我们换成用全局事件总线来进行组件之间的通信。二、分析为什么要换成全局事件总线为什么需要换成全局事件总线勒？我们拿Props也能够实现这些功能啊，可以是可以实现，但是我们看看之前有哪些问题的存在。我们之前在App组件中套入了一个L

月亮啊月亮你能照见南边，也能照见北边照见她，你跟她说一声，就说我想她了。前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信，那种方式是最简单也是最基础的组件之间的通信方式。父组件通过 props 向下传数据给子组件，当子组件有事情告诉父组件时会通过$emit事件告诉父组件。对于父子组件，这种传递方式，是较为方便且实用的，但是对于祖孙组件或者兄弟组件，就显得不那么友善了。在Vue本身的生态中，也有一个独立的Vuex库用来处理组件之间的通讯，但很多时候，咱们并不需要动用类似Vu..

自己拍的小云彩源码在文末。前言上篇文章写了个V利用Props进行组件之间的通信，这不立马就安排上这个案例拉丫。光学不敲等于没学哈（资深大佬除外哈）目标就是实现如下的样子：能够进行增删改查，并且是在各个组件之间。一、环境准备针对这个页面，我们将他们划分为下面四个组件哈。其实也不是固定的，只是为了更好的展示组件之间的通信。项目结构：准备静态页面MyTodoHeader头部组件：<template> <div class="todo-header-box"&gt.

「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战前言废话：上篇文章写了关于Vue 中的 props????props，讲述了概念、基本使用及注意点，在这篇文章中，我们也会用到 props和方法来让组件之间实现通信。正题：组件是Vue中非常重要的一个概念，也是模块化开发的基础。在使用vue的开发过程中，每个页面就是由多个不同的组件组合而成的。如下图：既然有多个组件，就必须要做到数据的动态性，也要

夜晚有明月，梦里有佳人前言最近在写老师布置的vue项目，真的说实话，每天真就是在百度、google、bing等各个搜索引擎之间反复横跳，不然就是掘金搜一搜、思否搜一搜，还有CSDN看一看。我的前端是吃百家饭长大的，每天不知道要遇到多少问题，然后基本上周围所有的前端同学都被我问到了，基本上就是谁有空就拉谁来教我。前端太多细节问题了，一旦遇到没有接触过问题，就会非常麻烦，如果有学习前端的后端小伙伴，我觉得最快熟悉前端的方式，就是整个项目写。这可能是最快上手前端框架的方式了吧。一、vue中修改数组对象.

校园的晚霞前言学vue必须要会的就是组件这玩意啦，不然可能就约等于白学。我自己前期完成老师布置的任务，不瞒你说，交上去，直接被骂，原因就是我一个组件没抽????（一边学，一边敲，没想那么多，只想着实现）。一个小小页面，1163行（捂脸）。然后就下定决心来好好整vue组件，其实我觉得还蛮好玩的。接下来就让我们看看组件必会的 props了解这个之前一定得懂点组件基础哈。介绍vue.js文档在props这节真就是直接上手，把我当大佬组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组

Vue集成 Element-tiptap 富文本编辑器这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战前言今天在写前端的时候，就是遇到一个问题。一开始我以为用textarea去掉角标，实现自动增长，然后就可以了。谁知道它还得加样式，加粗、斜体，老师在最开始给的设计稿上根本没有。直接麻掉。后来就去搞这个富文本编辑器。感觉前端也不容易，要学习的东西真的蛮多。功能需求是这样的就是选中文章，给它加粗，加斜体，加样式，并且选中的时候能够在上面弹出一个小菜单。为了这个气泡菜单，

前言上一篇文章写了：「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构，但是上篇文章还欠了个小点没有说完，就在这篇文章中补齐。就是所谓的render函数。一、main.js中引入的原来是残缺版vue.js我们来接着看看main.js这个入口文件。// 引入vueimport Vue from 'vue'// 引入app组件import App from './App.vue'// 关闭生产提示Vue.config.productionTip = false/.

傍晚的月亮前言每日匆匆忙忙的写老师布置的 Vue 项目，对于 Vue 始终没有一个系统的认知，每天都是遇到什么问题就去查什么样的问题。看起来好像也没啥问题，但是所有的知识都是混入的，导致没有一个像样的体系。也就导致有了以下问题的存在：难以一起讨论。和他们聊天，讲的很多东西我都插不上嘴（学习的路上一定要明白，交流才是让人进步的最快方式，也是发现自己的缺陷和长处的最快方式）解决问题的方式的不同。同样的问题，他们解决问题的代码远远比我写的优雅。看待问题的角度、深度不一样。我想的更多的是如何立马解决.