你好，我是Vam的金豆之路，可以叫我豆哥。
查看公众号文章
前言图片压缩对于我们日常生活来讲，是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩，有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢？答案是有的。效果展示原图片大小：
前言先学习vue2.x，很多2.x内容依然保留；先学习TypeScript，vue3.0是用TS重写的，想知其然知其所以然必须学习TS。为什么学习vue3.0？性能比vue2.x快1.2～2倍按需编译，
点击此链接，跳转公众号文章
前言 今天，我们来分享几个不可不知的vue高级实战技巧。 技巧 自动注册组件 我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。 <template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </t
前言 Composition API是什么？也称为组合式 API。如果你第一次听到这个词，请认真读完这篇文章。 官网有这样一段解释： 通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而，我们的经验已经证明，光靠这一点可能并不够，尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应
为什么使用Virtual DOM 手动操作DOM比较麻烦。还需要考虑浏览器兼容性问题，虽然有JQuery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升。 为了简化DOM的复杂操作于是出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题 为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了 Virtual
录屏时出现了一点小插曲，没有录上声音。不过过段时间我将会把有声视频整理出来，谢谢大家，希望大家理解。首先，很高兴可以跟尤老师面对面交流，也感谢Vue Beijing平台给我们这次与尤老师交流的机会。居然能够在尤老师下面，好激动～以上截取的画面是Vue2项目如何平滑升级到Vue3，尤大给出的回复是：可以实现。具体怎么操作可以观看之后整理的有声视频。今天，很感谢尤老师回答了我提出的一个问题。就是如何看待parcel2的？尤老师给出的答复是：太臃肿！为了零配置而零配置。为了达到零配置的效果，引入
什么是Virtual DOMVirtual DOM(虚拟DOM)，在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象，因为不是真实的DOM对象，所以叫虚拟DOM。<div></div>{ sel: 'div', data: {}, chidren:undefined, elm:undefined, key:undefined,}Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我
resetMessage.jsimport { Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if (messageInstance) { messageInstance.close() } messageInstance = Message(options)};['error', 'success', 'in
App.vue mounted() { const script = document.createElement('script'); script.src = 'https://s9.cnzz.com/z_stat.php?id=1280220358&web_id=1280220358'; script.language = 'JavaScript'; document.body.appendChild(script); }, watch: {
前言之前，一直想开发一款属于自己的Markdown编辑器，主要是自己平常写文章可以更加灵活操作，另外扩宽自己的视野也是非常不错的选择啊！所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器，都很优秀。不为超过他们，主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。完成项目一览调研Markdown编辑器国内、国外关于Markdown编辑器有很多。editor.md网址：https://pandao.github.io/editor
前言一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么，今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么？怎么以前没有听说过。有这样的疑问其实并不奇怪，因为这个构建工具是我自己开发的。你可能会这样问：“你自己开发的？这么厉害吗”？是的，豆哥其实就这么厉害。开玩笑啦！其实没有你想得那么厉害。都是搬砖人，主要看思路。好，不扯了！本篇文章我将带大家如何从0到
前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置，操作灵活。跟我一起来体验吧！线上地址体验基于vue3.0和vue-vam-video，我开发了一款在线视频播放器。网址：https://www.maomin.club/site/videoplayer/源代码：https://github.com/maomincoding/videoplayer插件一览界面简约可配置流畅播放支持Vue2和Vue3支持m3u8格式支持多种事件NP
前言最近一周没有发文章了，我在这里向大家说一声抱歉。今天，我们来从零开始开发一款聊天室。好，我们现在就开始。了解WebSocket开发聊天室，我们需要用到WebSocket这个网络通信协议，那么为什么会用到它呢？我们首先来引用阮一峰大佬的一篇文章一段话：初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务
前言平时我们可能在做项目时，会遇到一个业务逻辑。实现一个无限级联树形表格，什么叫做无限级联树形表格呢？就是下图所展示的内容，有一个祖元素，然后下面可能有很多子孙元素，你可以实现添加、编辑、删除这样几个功能。资源JavaScript框架：vue.jsUI框架：Element UI源码这里需要重点说明的是，主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释，也可以通过删改代码融会贯通。<template> <div class="contain
前言话不多说，这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器。我们平时在PC端网站上观看视频时，会看到有很多丰富样式的视频播放器，而我们自己写的video标签样式却是那么丑。其实像那些网站都是基于原生video标签进行开发的，只不过还得适当加工一下，才会有我们所看到的漂亮的视频播放器。开发在具体开发之前，我们需要明确我们需要做什么？封装一个可配置的视频播放器；适用于Vue.js；应用于PC端网站；视频播放器常用的功能必须要有；发布到Npm；好，明确了以上几
话不多说，赶快试试尤大大教给我们的这几个精妙方法吧！在工作中肯定会用得到。立即执行函数页面加载完成后只执行一次的设置函数。(function (a, b) { console.log(a, b); // 1,2})(1, 2);通常，全局变量被作为一个参数传递给立即执行参数，这样它在函数内部不使用window也可以被访问到。(function (global) { console.log(global); // Window对象})(this);多层嵌套三目运算符三目运算符嵌套
前言今天，回老家了。第一件事就是回家把大屏安排上，写作的感觉太爽了，终于可以专心地写文章了。我们今天要做的项目是怎么样搭建一个无限级联层级表格组件，好了，多了不多说，赶快行动起来吧！项目一览到底是啥样子来？我们来看下。正如你所看到的那样，这个组件涉及添加、删除、编辑功能，并且可以无限级嵌套。那么怎样实现的？我们来看下。源码直接给出源码，就是这么直接。<template> <div class="container"> <el-button
前言今天除夕，在这里祝大家新年快乐！！！今天在这个特别的日子里我们做一个消息通知组件，好，我们开始行动起来吧！！！项目一览效果很简单，就是这种的小卡片似的效果。源码我们先开始写UI页面，可自定义消息内容以及关闭按钮的样式。Notification.vue<template> <transition name="fade" @after-enter="handleAfterEnter"> <div class="notification" :style="s
前言Vue3.x正式版发布已经快半年了，相信大家也多多少少也用Vue3.x开发过项目。那么，我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用： 创建一个响应式数据。本质： 传入数据（复杂类型：数组和json对象）包装成一个Proxy对象。如果传入其他对象，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值（创建一个新的对象）的方式。<template> <div class="reactive"> <butt
组件将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。建议在组件内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0，否则会引起计算误差。fullScreenContainer.vue<template> <div id="full-screen-container" :ref="ref"> <template v-if="ready"> <slot>&l
前言我们在使用Vuex的时候，会时不时的更改Vuex内的数据，但是页面不会随之更新，如果数据量大，一个数据依赖另一个数据的话，这样我们要是再刷新页面的话会把以前依赖的数据清空，效率特别低。所以，今天我总结了怎么实现Vuex热更替的功能。
一、迎接 Vue 3.01. 简介 Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段。已合并所有计划内的 RFC已实现所有被合并的 RFCVue CLI 现在通过 vue-cli-plugin-vue-next 提供了实验性支持2. 新特性
今天，我们使用Vue CLI3 做一个移动端适配 。前言首先确定你的项目是Vue CLI3版本以上的。一、移动端适配包1、安装移动端适配包npm i lib-flexible -S2、在main.js引入适配包import Vue from 'vue'import App from './App.vue'import 'lib-flexible' // 引入适配包Vu...
前言我们在不敲代码的时候可能会去看游戏直播，那么是前台怎么实现的呢？下面我们来讲一下。第一步，购买云直播服务首先，你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱，练手的话，几十块钱就够了。这里我拿阿里云举例，购买完了，配置好推流域名跟播流域名，下面我们将进行地址生成。记住下面生成的地址，下面会用到。
先放图弱弱的说一句，我真的错了。不该用parcel~前几天，尤大开直播说了造轮子的好处，主要还是锻炼自己。所以自己还是义无反顾地把这个项目搭建工具慢慢地造起来。这次升级这次版本是v1.0.5。我们来看下这次版本的预装依赖，我们的项目UI框架预先安装上了ant-design-vue@2.1.4，默认是按需加载。为什么这次是引入它，而不是element-plus，主要是考虑到parcel2针对babel.config.js这样的JS文件对组件样式引入实时检测不是很好，你必须手动刷新才能获取最新状态
为什么会出现VueX的模块呢？当你的项目中代码变多的时候，很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。那么我们就开始吧！一、模块是啥？/* eslint-disable no-unused-vars */import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex...
<!DOCTYPE html><html><head> <title>render</title></head><style type="text/css"> #text{...
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
