- 开头笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。ps.如果没... 开头笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。ps.如果没...
- 按需加载是所有组件库都会提供的一个基础能力，本文会分析ElementUI、Vant及varlet几个组件库的实现并进行相应实践，帮助你彻底搞懂其实现原理。 先搭个简单的组件库笔者从ElementUI里copy了两个组件：Alert和Tag，并将我们的组件库命名为XUI，当前目录结构如下：组件都放在packages目录下，每个组件都是一个单独的文件夹，最基本的结构是一个js文件和一个vue文件... 按需加载是所有组件库都会提供的一个基础能力，本文会分析ElementUI、Vant及varlet几个组件库的实现并进行相应实践，帮助你彻底搞懂其实现原理。 先搭个简单的组件库笔者从ElementUI里copy了两个组件：Alert和Tag，并将我们的组件库命名为XUI，当前目录结构如下：组件都放在packages目录下，每个组件都是一个单独的文件夹，最基本的结构是一个js文件和一个vue文件...
- 简介在大型应用里，有些组件可能一开始并不显示，只有在特定条件下才会渲染，那么这种情况下该组件的资源其实不需要一开始就加载，完全可以在需要的时候再去请求，这也可以减少页面首次加载的资源体积，要在Vue中使用异步组件也很简单：// AsyncComponent.vue<template> <div>我是异步组件的内容</div></template><script>export defaul... 简介在大型应用里，有些组件可能一开始并不显示，只有在特定条件下才会渲染，那么这种情况下该组件的资源其实不需要一开始就加载，完全可以在需要的时候再去请求，这也可以减少页面首次加载的资源体积，要在Vue中使用异步组件也很简单：// AsyncComponent.vue<template> <div>我是异步组件的内容</div></template><script>export defaul...
- 我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。ps.本文项目使用Vue CLI创建，所用的Vue版本为2.6.11，webpack版本为4.46.0。 创建项目首先使用Vue CLI创建一个项目，在src目录下新建一个widgets目录用来存放小部件：一个小部件由一个Vu... 我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。ps.本文项目使用Vue CLI创建，所用的Vue版本为2.6.11，webpack版本为4.46.0。 创建项目首先使用Vue CLI创建一个项目，在src目录下新建一个widgets目录用来存放小部件：一个小部件由一个Vu...
- 通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。除了介绍基本的架构设计，本文还会介绍如何开发一个Vue CLI插件和preset预... 通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。除了介绍基本的架构设计，本文还会介绍如何开发一个Vue CLI插件和preset预...
- 初始化结束后，如果存在el属性，那么最后会进行挂载操作：if (vm.$options.el) { vm.$mount(vm.$options.el)}$mount方法是个区分平台的方法，web平台的如下：const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el, hydrating) { el ... 初始化结束后，如果存在el属性，那么最后会进行挂载操作：if (vm.$options.el) { vm.$mount(vm.$options.el)}$mount方法是个区分平台的方法，web平台的如下：const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el, hydrating) { el ...
- 这一篇我们来看一下Vue核心的响应性原理，在上一篇我们知道了初始化时Vue会把data选项的数据递归的转换成响应性的数据，具体来说就是给数组和对象创建一个关联的Observer实例，然后对于数组，会拦截它的所有方法，以此来监听数组的变化，对于普通对象，会遍历它自身所有可枚举的属性，将其转换成setter和getter形式，以此来监听某个属性的变化，为什么要这么做呢，我们来看一下。首先简单介绍... 这一篇我们来看一下Vue核心的响应性原理，在上一篇我们知道了初始化时Vue会把data选项的数据递归的转换成响应性的数据，具体来说就是给数组和对象创建一个关联的Observer实例，然后对于数组，会拦截它的所有方法，以此来监听数组的变化，对于普通对象，会遍历它自身所有可枚举的属性，将其转换成setter和getter形式，以此来监听某个属性的变化，为什么要这么做呢，我们来看一下。首先简单介绍...
- 上一节我们大致看了一下实例化Vue时所做的事情，其中初始化data选项的部分我们跳过了，这一篇我们详细来了解一下。 初始化data选项先看一下初始化data的方法：function initData(vm) { let data = vm.$options.data // 获取data对象 data = vm._data = typeof data === 'function' ? ... 上一节我们大致看了一下实例化Vue时所做的事情，其中初始化data选项的部分我们跳过了，这一篇我们详细来了解一下。 初始化data选项先看一下初始化data的方法：function initData(vm) { let data = vm.$options.data // 获取data对象 data = vm._data = typeof data === 'function' ? ...
- 上一篇我们看了引入Vue时都有哪些操作，这一篇我们来看一下new一个Vue实例时会发生什么，测试代码如下：<div id="app"></div>const app = new Vue({ el: '#app', template: `<h1>{{text}}</h1>`, data: { text: 'hello' }})根据上一篇的最后我们知道Vue... 上一篇我们看了引入Vue时都有哪些操作，这一篇我们来看一下new一个Vue实例时会发生什么，测试代码如下：<div id="app"></div>const app = new Vue({ el: '#app', template: `<h1>{{text}}</h1>`, data: { text: 'hello' }})根据上一篇的最后我们知道Vue...
- 调试阅读源码最好的方式还是通过调试，否则很容易在源码里迷失方向，本文提供了一种方便的方式来调试：git clone https://github.com/wanglin2/learn_vue_2.6.0.gitcd learn_vue_2.6.0npx http-server -e js -c-1然后访问：http://【你的ip:端口】/examples/index.html即可打开测试... 调试阅读源码最好的方式还是通过调试，否则很容易在源码里迷失方向，本文提供了一种方便的方式来调试：git clone https://github.com/wanglin2/learn_vue_2.6.0.gitcd learn_vue_2.6.0npx http-server -e js -c-1然后访问：http://【你的ip:端口】/examples/index.html即可打开测试...
- 相比Vue2，Vue3的官方文档中新增了一个在线Playground：打开是这样的：相当于让你可以在线编写和运行Vue单文件组件，当然这个东西也是开源的，并且发布为了一个npm包，本身是作为一个Vue组件，所以可以轻松在你的Vue项目中使用：<script setup>import { Repl } from '@vue/repl'import '@vue/repl/style.css'</... 相比Vue2，Vue3的官方文档中新增了一个在线Playground：打开是这样的：相当于让你可以在线编写和运行Vue单文件组件，当然这个东西也是开源的，并且发布为了一个npm包，本身是作为一个Vue组件，所以可以轻松在你的Vue项目中使用：<script setup>import { Repl } from '@vue/repl'import '@vue/repl/style.css'</...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第二篇，读完本篇，你可以了解到如何将一个Vue3组件库打包成各种格式上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为：varlet-cli compile显然是varlet-cli包提供的一个命令：处理函数为compile，接下来我们详细看一下这... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第二篇，读完本篇，你可以了解到如何将一个Vue3组件库打包成各种格式上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为：varlet-cli compile显然是varlet-cli包提供的一个命令：处理函数为compile，接下来我们详细看一下这...
- ==Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。== 我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下 ==Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。== 我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下
- 1 什么是前后端分离前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过xml或json的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建 2.1 Mapper层请参阅这篇文章https://blog.csdn.net/Mr_YanMingXin/artic... 1 什么是前后端分离前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过xml或json的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建 2.1 Mapper层请参阅这篇文章https://blog.csdn.net/Mr_YanMingXin/artic...
- @TOC 前言前面一篇文章Vue开发历程—音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。 一、效果图 二、心路历程 1、elementUI 滑块的使用 <div class="block" style="margin-top:5px"> <el-slider v-model="value" @change="updateSlideTime()" ... @TOC 前言前面一篇文章Vue开发历程—音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。 一、效果图 二、心路历程 1、elementUI 滑块的使用 <div class="block" style="margin-top:5px"> <el-slider v-model="value" @change="updateSlideTime()" ...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签