目录1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行总结 1.通过 HBuilderX 可视化界面 a. 创建uni-app； b. 运行uni-app; c. 发布uni-app 2.通过 vue-cli 命令执行 a. 安装node.j...[2021/10/19]

1.v-bind（简写 ：） 组件属性中要使用data中定义的数据变量，或组件属性要使用表达式，需用v-bind指定 简写 ： 2.v-on（简写@） 监听DOM事件 click.stop 可以阻止事件穿透 3.v-model 数据双向绑定 4....[2021/10/19]

1 .scroll-view 使用竖向滚动时，需要给 一个固定高度，通过 c 设置 height；使用横向滚动时，需要给添加white-space: nowrap;样式。 scroll-y：允许纵向滚动，scroll-x：允许横向滚动 @scroll： 滚动时触发，eve...[2021/10/19]

1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件，父组件自定义事件，子组件触发父组件的事件，并传传递数据 3.子组件可以定义插槽slot，让父组件自定义要显示的内容 4.使用easycom规范，可以真接使用组件 page/new news...[2021/10/19]

本文章主要介绍如何实现一个基本的聊天，后续会添加表情包，传照片等功能 其实刚开始接触的时候，我最大的疑惑是聊天功能的前期是否需要搭建什么框架、下载一些什么东西之类的，结果就是，其实websocket可以直接使用，然后前后端搭配，也是免费的，暂时没发现需要收费功能的东西。 实现效果图： ...[2021/10/8]

目录一、前端控制1、在router.js文件（把静态路由和动态路由分别写在router.js） 2、store/permi ion.js(在vuex维护一个state，通过配角色来控制菜单显不显示) 3、src/permi ion.js4、侧边栏的可以从vuex里面取数据来进行渲染二、后端控制路由1...[2021/10/8]

目录前言1. 举例理解 2. 分析源码 3. 小结 总结 前言 相信很多人在用 Vue 使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是...[2021/10/8]

目录1. 安装及引入 2. 封装导出 pdf 文件方法 配置详解封装导出 pdf 文件方法（util htmlToPdf.js）相关组件中应用效果待优化部分总结 思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。...[2021/10/8]

目录一、解决思路二、让浏览器存储服务器返回的token三、在请求中设置访问权限四、封装登录验证 Hello，你好呀，我是灰小猿，一个超会写bug的程序猿！ 今天在做vue和springboot交互的一个项目的时候，想要基于前端实现一些只有登录验证之后才能访问某些页面的操作，所以在这里总结一下实现...[2021/10/8]

前言： 我们在使用Vue的时候，经常会使用并写一些自定义的插件，然后利用Vue.use引入。所以提到写插件，install这个方法是必不可少的。Vue.js 的插件应该暴露一个 `install` 方法。这个方法的第一个参数是 `Vue` 构造器，第二个参数是一个可选的选项对象。这是Vue官方...[2021/9/28]

背景 在一些商城类网页中打开商品详情都会有一个计数器来选择购买的数量，这样的计时器不仅会在商品详情页面显示还会在购物车里面有，那就可以把计时器封装成组件，以便于更好的复用以及后期维护 落地代码 <template> <div cla ="xtx-numbox...[2021/9/28]

vue3 项目封装侧导航文字骨架效果组件-全局封装，供大家参考，具体内容如下 目的 当显示页面的时候，有些数据是需要从后台加载，网络不好的时候可能需要等待，那就可以做一个骨架层闪动动画，增加用户体验 大致步骤 - 需要一个组件，做占位使用。这个占位组件有个专业术语：骨架屏组件。 &n...[2021/9/28]

目录前言 如何封装一个Toast组件 使用案例 具体实现 总结 前言 随着业务的发展 功能性开发 已经无法满足我们对于前端的需求，这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景：公司内部组件库的开发，个人组件库的开发，与项目解耦，多项目中使用同一组件，只需维护一套组件库 ...[2021/9/28]

目录1、实现过程2、显示一个 Observer3、实现 Watcher4、实现 Compile5、添加解析事件6、完整版 myVue Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。 https: jsrun.net/...[2021/9/27]

目录1、parse 解析器1.1 截取的规则1.2  截取过程部分1.3  解析器总结2、optimize 优化器2.1 静态节点2.2 静态根节点2.3 优化器总结3、generate 代码生成器3.1 JS的with语法 思考： html是标签语言，只有JS才能实现判...[2021/9/27]

本文实例为大家分享了vue.js使用Element-ui中实现导航菜单的具体代码，供大家参考，具体内容如下 写这个的原因是因为当时写这个功能时候element只有效果，但是功能没有实现，当时一头雾水 先放图吧 大体实现思路我先讲一下不然下面代码片段会看懵， 圈出来的左右两部分，...[2021/9/27]

本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码，供大家参考，具体内容如下 效果图 目录截图 安装vue-router 和 element-ui vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 ...[2021/9/27]

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) 触发当前实例上的事件 vm.$on( event, fn ); 监听event事件后运行 fn；  例如：子组件：...[2021/9/14]

在Vue3中封装一个导航栏组件，并且实现，随着滚动条滚动实现一个吸顶效果，供大家参考 导航栏组件的效果图： 滚动条滚动以后的吸顶效果示意图： 具体代码展示： <template> <header cla ="app-header">...[2021/9/14]

前言：把一个功能模块使用组件化的思想充分封装，如导航栏，这无论对我们的开发思想还是效率都有许多好处，在开发中，我们要尽量多得运用组件化的开发思想，不要把所有代码都写在同一个.vue文件中，这样能大大提高代码的可读性。 封装导航栏 主要思路：把红色的部分当成一个个组件，而他们只是图片和...[2021/9/14]

目录style scoped style module 状态驱动的动态c 总结 style scoped 需要注意的有： 样式不会影响到其他组件，只会在当前组件生效。 子组件的根元素会同时 受父组件的作用域样式，和子组件的作用域样式影响. 这样做的目的是让父组件可以...[2021/9/6]

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码，供大家参考，具体内容如下 这是第一种实现方式 效果图： 弹窗代码： Popup.vue <template lang="html"> <div v-if="show" cla ...[2021/9/6]

vue中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesFor...[2021/8/26]

目录写在前面 router.json路由生成菜单生成效果总结 写在前面 每次重复写路由的时候是不是会觉得很烦，特别是项目大的时候，路由会有特别多，看都看不过来，所以这里我是有了一个router.json的配置文件来对路由做一些简单的配置，然后让路由和左侧菜单栏可以同时生成。 rou...[2021/8/16]

一般点击事件会分不同的情况进行消息提醒，如果不做处理，短短几秒弹出很多条提示信息，就会很烦，比如： 那要怎么控制这个提示信息只能出现单条呢 再点击事件的方法最前面加上 定义变量hasRemind来控制是否执行点击事件里的相应操作 当用户第一次点击的时候，hasRemind =...[2021/8/9]

目录前言发现问题解决后记 前言 最近自己准备写一个 UI 组件，想对 vue 的 2.x、3.x 可以更深层次的掌握 在架构时，准备全部使用 tsx 书写组件 但遇到了 tsx 中使用 slot 的问题 发现问题 先写了一个基础的 card 组件： card.tsx: ...[2021/8/9]

目录前言概念防抖 定义使用场景代码 在vue中使用 节流 定义使用场景代码 在vue中使用 总结 前言 在一个电影项目中，我想在电影的列表中，保存下拉的当前位置，防止你切换页面后，再切换回当前的电影列表页，他就又回到电影的第一条数据。 这时候，我不想每次只要滑动一点，就保存当前位置，我想隔一...[2021/8/5]

目录前言介绍一、作用机制上二、从性质上三、watch和computed的对比四、methods不处理数据逻辑关系，只提供可调用的函数五、从功能的互补上看待methods,watch和computed的关系六、利用computed处理watch在特定情况下代码冗余的现象，简化代码 总结 compute...[2021/8/5]

目录问题分析 为什么封装 封装的内容都有哪些 封装table组件 确认数据格式 封装组件 封装全局组件 table组件封装 分页组件封装 数据定义 封装 总结 最近开了新的项目，简单说了自己的table封装。 问题分析 为什么封装 首先为什么封装，是因为追求技术吗，不，是因为懒，...[2021/8/5]

1、去GraphVis官网下载对应的js，新版和旧版的js有所不同，看自己需求引入旧版还是新版（GraphVis官方网址：http: www.graphvis.cn/） visgraph.min.js （基本配置js） visgraph-layout.min.js（配置布局...[2021/8/5]

目录一、生产环境，开发环境切换 第一种方法：通过配置.env文件来实现 第二种方法 二、过滤器 三、moment时间库使用 一、生产环境，开发环境切换 开发环境：开发环境就是在 /config/index.js下配置proxyTable 生产环境：打包项目后代理就失效啦，所以再生产环境下...[2021/8/5]

在做项目中难免会碰到需要实时刷新，广告动画依次出现等等需求，刚最近基于业务需求，需要实现一个累加通话时长的计时器，这时候就需要定时器登上我们的代码舞台了，其实对于计时器，它的原理就是通过定时器来实现的，那么在写业务需求之前，我先说说关于定时器的一些知识。 window对象提供了两个方法来实现定...[2021/8/5]

目录前言创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征，suspense 组件就是其中之一，对处理异步请求数据非常实用，本文通过简单的实例介绍其使用方法，如对其有兴趣，可以参阅官方文档。 通常组件在正确呈现之前需要执行某种异步请求是很常见的，通常是通过设计一种机制开发人员按照...[2021/8/5]

一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听 Vue路由切换过渡 vue的过渡...[2021/8/4]

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。  c 中的cursor   鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动  在@vueuse中，有一个工具方...[2021/7/26]

目录什么是多环境配置,为什么要多环境配置?.env 文件配置到哪里.env文件如何配置，配置多少个？.env文件的配置如何配置运行环境如何获取全局配置项的值如何运行环境 没接触多环境配置前，感觉好高大上，真正操作后感觉也就那么回事，在此把自己遇到的问题和解决方案叙述一下，有不对的地方欢迎各位...[2021/7/19]

预览: 代码: 页面部分: <template> <div cla ="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="i...[2021/7/19]

本文实例为大家分享了vue实现改变购物数量的购物车，供大家参考，具体内容如下 效果图： 知识点： 1.computed 计算属性 2.filters 过滤器 实现代码： <!DOCTYPE html> <html lang="en"> ...[2021/7/19]

介绍 Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图...[2021/7/19]

目录1.创建水印Js文件 2.引入操作 2.1 在App.vue中引用或其他页面 2.2 在router配置文件中引用 【需求】系统内页面显示水印，登录页面没有水印（退出登录时，登录页面不会显示水印） 1.创建水印Js文件 /* * @Author: 刘小二 * @D...[2021/7/19]

Object.defineProperty了解 语法： Object.defineProperty(obj, prop, descriptor) obj  要定义属性的对象。 prop 要定义或修改的属性的名称 descriptor 要...[2021/7/19]

目录1.lazy 2.trim 3.number 4.stop 5.capture 6.self 7.once 8.prevent 9.native 10.left，right，middle 11.pa ive 12.camel 12.sync 13.keyCode 1.lazy lazy...[2021/7/12]

目录动态粒子效果如下： 安装插件 动态粒子效果如下： 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from ''vue-particles...[2021/7/12]

项目场景： 在运行Vue项目时，出现了缩进报错的问题，我是使用idea 的编译器，上网查了一下多数都是直接更改缩进的的数量，不过我觉得麻烦，就只是想要关掉验证。 问题描述： idea编译器出现Vue缩进报错 ✘  http: eslint.org/doc r...[2021/7/5]

本文实例为大家分享了Vue+expre +Socket实现聊天功能的具体代码，供大家参考，具体内容如下 实现聊天功能 具体功能 只是为了实现功能，不对界面进行美化 1、输入消息点击发送所有用户可以在下方收到消息 2、输入userid后点击连接，可以连接对应的聊天，另外一个界面输入...[2021/6/28]

本文实例为大家分享了Vue+ h框架实现在线聊天的具体代码，供大家参考，具体内容如下 效果图 核心部分 websocket编程 向后台发送消息 <template> <el-container> <el-header &...[2021/6/28]

创建一个vite项目 性能决定成败;vite确实快； cmd 命令行(默认你已经安装了node & npm)，执行npm init @vitej app vue-study – --template vue； cd至vue-study，npm install(安装依赖); npm...[2021/6/28]

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。 tab导航栏布局： <section cla ="theme-list"> <div cl...[2021/6/28]

Vue简介 现在的大前端时代，是一个动荡纷争的时代，江湖中已经分成了很多门派，主要以Vue，React还有Angular为首，形成前端框架三足鼎立的局势。Vue在前端框架中的地位就像曾经的jQuery，由于其简单易懂、开发效率高，已经成为了前端工程师必不可少的技能之一。 Vue是一种渐进...[2021/6/28]

前言 随着 Vue.js 单页应用（SPA）变得相当复杂，你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例，来展示 Vue Router 中嵌套路由的实用性。 用 Vue CLI 进行设置 如果尚未安装，请运行以下命令全...[2021/6/28]