越努力，越幸运！

一、演示效果二、完整代码<template> <el-popover placement="bottom-start" title="" width="300" v-model="showTree" popper-class="el-popover-tree" trigger="click" content=""> <el-.

前言Vue提供了transition的封装组件，任何元素和组件在下列四种情形中，都可以添加进入或离开过渡动画条件渲染(使用v-if) 条件展示(使用v-show) 动态组件 组件根节点一、transition用法<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不会额外渲染DOM元素，也不会出现在可被检查的组件层级中。当插入或删除包含在 <transition&g...

很多公司官网的登陆页面都有这样的需求，当用户输入完用户名之后，按键盘的Enter键就可以切换到下一行的密码输入框，并将光标聚焦到密码框这一行，聚焦这个功能主要通过触发input框的focus事件来实现一、密码框聚焦（确定ref值）我们给密码框增加ref属性为passwordInput，监听用户名输入框的Enter事件，增加下列代码，即可聚焦到密码框this.$refs.passwordInput.focus(); 二、使用v-for为每一个Input动态添加ref现在我们的需求变了，不

有时候我们需要实现列表元素上移和下移交换位置，我们把数组数据渲染到视图中，通过数组元素交换位置实现上移和下移功能一、要移动的数组列表let questionList = [ { question: "第一个问题？" }, { question: "第二个问题？" }, { question: "第三个问题？" }, { question: "第四个问题？" }, { question: "第五个问题？" },]二、上移、下移函数 // 上移

一、滚动组件<template> <div class="scrollText" ref="outer"> <div class="st-inner" :class="{'st-scrolling': needToScroll}"> <span class="st-section" ref="inner">{{text}}</span> <span class=".

一、Web Speech APIWeb Speech API使您能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis语音合成 （文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。我们今天主要了解语音合成，将文字转换成语音播放二、语音合成SpeechSynthesis：语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其它相关命令的信息。SpeechSynthesisU...

前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性一、什么是Mixins？mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、comp.

一、需求说明昨天后端开发人员让我实现一个网页锁屏，当时我一头雾水，问他为啥搞的跟安卓系统一样。他的回复是"看起来帅点"。首先我们梳理下逻辑，先来个简化版的，用户长时间未操作时，返回登录页二、思路使用 mouseover 事件来监测是否有用户操作页面，写一个定时器间隔特定时间检测是否长时间未操作页面，如果是，退出登陆，清除token，返回登录页三、实现【1】首先在util文件夹下创建一个astrict.js每隔30s去检查一下是否过了30分钟// 引入路由和..

前言在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。本文将详细介绍Vue动态组件。所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。一、is用法通过使用保留的<component>元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。【1.1...

一、安装【1.1】安装Node3.x需要node.js版本为8.9版或者更高的版本，点击这里可以安装node安装过node后，输入下面命令行查询你的node版本：node -v如果当前版本不够，可以输入下面命令行来把node版本更新到最新的稳定版本先清除npm缓存：npm cache clean -f然后安装n模块：npm install -g n升级node....

最近学习vue-cli3搭建后台管理项目，关于系统登录拦截和获取用户权限控制这一块是卡了挺久的一个难点，后台项目权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。这篇文章写一下前后端分离下的登录解决方案，目前大多数都采用请求头携带 Token 的形式。一、整体思路首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时...

vue-router 升级到3.1.x 后，重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能视而不见。报错信息报错原因vue router ≥ v3.1后 ，回调形式改成promise api了，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的警告。解决方法【1】降低版本npm i vue-router@3.0 -S【2】在ro...

最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单，按照官网写法固定不太好，因为一般项目都是从后端动态获取菜单列表，所以我们需要将官网代码稍作修改，代码如下：注意事项：【1】菜单高亮部分动态绑定路由跳转的页面Menu组件中有一个active-name反映的是当前高亮区域，因此可以动态的绑定active-name来实现高亮显示。前提是需要将Menu...

前言在开发过程中，避免不了要涉及到数据加密，比如用户账号密码的加密，用户敏感数据的加密，涉及到的加密算法种类繁多，能够清楚了解其中主流的加密算法和用途，就已经足够了。主要的数据加密算法主要有：md5、sha、aes、des、rsa、base64等等。今天先来看看我们的老熟人：md5算法一、MD5算法MD5算法是哈希算法的一种，MD5算法全称叫 Message Digest Algori...

一、store数据丢失系统登录后获取到系统菜单列表存入store中，发现在刷新页面之后，store中的菜单数据丢失了。console打印数据刷新页面之前刷新页面之后二、原因刷新页面时，vue实例重新加载，从而，store也被重置了。store是用来存储组件状态的，而不是用来做本地数据存储的。所以，对于不希望页面刷新之后被重置的数据，使用本地存储来进行存储。三、本...

一、浏览器渲染HTML的步骤HTML被HTML解析器解析成DOM Tree, CSS则被CSS解析器解析成CSSOM Tree。 DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。 节点信息计算(重排)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息生成布局。 渲染绘...

一、什么是webpackwebpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，T...

安装npm install vue-video-player --save引入可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）【1】全局引用，在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'i...

生命周期钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。组件也是一样， Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，比如created钩子时视图还...

前端工程师在开发时，经常会遇到这样的需求，产品要求用户在input框输入完内容后按enter键自动提交表单到后台，不需要单击“保存”按钮再提交，以提高用户体验，接来下会分别介绍在JS、JQ、Vue中如何给input绑定Enter回车事件键盘事件键盘事件触发次序：①onkeydow ②onkeypress ③onkeyup属性 描述 onkeydown ...

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 D...

通常子组件更新某个变量并需要告知父组件时，需要子组件$emit触发事件，然后父组件$on监听该事件再去改变值。但是熟悉 v-model 的双向数据绑定原理后，我们可以巧妙地运用这一原理去实现父子组件之间动态传值方法总结：父组件通过v-model绑定一个变量传给子组件子组件通过props['value']接收子组件通过$emit('input',XX）去改变父组件中v-mode...

一、过滤器的介绍1、在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。2、首先我们要知道，Vue中的过滤器不能替代Vue中的mehtods、computed、watch3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。4、在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。5、在你希望避免重复...

Vue提供了一个watch方法去监听某些data内的数据变动，从而触发相应的操作，当需要在数据变化时执行异步或开销较大的操作时，watch方法是最有用的一、watch用法假设有如下代码：下面的代码的效果是，当我们输入firstName后，wacth监听firstName每次修改变化的新值，然后计算输出fullName。 <div id="root"> ...

安装npm install element-china-area-data -S使用import{provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlus,CodeToText,TextToCode}from'element-china-area-data'import { ...

一、render函数是什么 简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。　　当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要...

前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如上图所示，A 和 B、B 和 C都是父子关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？A 组件与 B 组件之间的通信： （父子组件）如上图所示，A、B、C三个组件依次嵌套，按照 Vue 的开发习惯，父子组件通信可...

路由守卫是什么？官方解释：“导航”表示路由正在发生改变。正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿...

/deep/可以翻译为深入的，深远的。看到前端大佬在css中有关于这种写法，开始没太注意，以为是框架自带的写法，后来发现不是。scoped介绍为了vue页面样式模块化，不对全局造成污染，给每个页面的<style>标签加上scoped属性，表示它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 po...

一、安装node环境vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功。在node.js官网下载安装包，傻瓜式安装。安装node.js后，就已经自带npm（包管理工具），不需要另外再进行安装npm了。终端输入命令检查是否安装成功，如果输出版本号，说明我们安装node环境成功二、安装淘宝镜像cnpmnpm的服务器是外国的，所以有时候我们安装...

先给出官网地址一、什么是vuex官方解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化二、为什么要用vuexvuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传...

一、什么是单页应用 单页web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说...

vue官方文档中关于slot插槽的说明很简短，语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了vue的说明文档。一、slot的作用Q: 假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的&lt;span&g...