- 我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。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()" ...
- 大家好，我是CoderBin 前言面试官：“你说说Vue中的组件和插件有什么区别？”紧张的萌新：“vue组件是封装可复用的UI结构，插件好像是用vue.use()…”面试官：“…”······又来到了面试官系列，这次将带大家回顾一下Vue中的组件与插件的相关内容，帮助同学们在面试中更加游刃有余，希望对大家有所帮助，谢谢。如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻 一、组件概念回顾以... 大家好，我是CoderBin 前言面试官：“你说说Vue中的组件和插件有什么区别？”紧张的萌新：“vue组件是封装可复用的UI结构，插件好像是用vue.use()…”面试官：“…”······又来到了面试官系列，这次将带大家回顾一下Vue中的组件与插件的相关内容，帮助同学们在面试中更加游刃有余，希望对大家有所帮助，谢谢。如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻 一、组件概念回顾以...
- vue快速入门---高速版 vue快速入门---高速版
- @TOC 1.认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具1.模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是Ja... @TOC 1.认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具1.模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是Ja...
上滑加载中
推荐直播
-
大模型Prompt工程深度实践2025/02/24 周一 16:00-17:30
盖伦 华为云学堂技术讲师
如何让大模型精准理解开发需求并生成可靠输出？本期直播聚焦大模型Prompt工程核心技术：理解大模型推理基础原理，关键采样参数定义，提示词撰写关键策略及Prompt工程技巧分享。
回顾中 -
华为云 x DeepSeek：AI驱动云上应用创新2025/02/26 周三 16:00-18:00
华为云 AI专家大咖团
在 AI 技术飞速发展之际，DeepSeek 备受关注。它凭借哪些技术与理念脱颖而出？华为云与 DeepSeek 合作，将如何重塑产品与应用模式，助力企业数字化转型？在华为开发者空间，怎样高效部署 DeepSeek，搭建专属服务器？基于华为云平台，又该如何挖掘 DeepSeek 潜力，实现智能化升级？本期直播围绕DeepSeek在云上的应用案例，与DTSE布道师们一起探讨如何利用AI 驱动云上应用创新。
去报名
热门标签