- v-model、v-bind、v-on三大指令的区别和使用。 v-model、v-bind、v-on三大指令的区别和使用。
- 缘起最近做的一个小需求涉及到排序，界面如下所示：因为项目是使用vue的，所以实现方式很简单，视图部分不用管，本质上就是操作数组，代码如下：{ // 上移 moveUp (i) { // 把位置i的元素移到i-1上 let tmp = this.form.replayList.splice(i, 1) this.form.replayList.s... 缘起最近做的一个小需求涉及到排序，界面如下所示：因为项目是使用vue的，所以实现方式很简单，视图部分不用管，本质上就是操作数组，代码如下：{ // 上移 moveUp (i) { // 把位置i的元素移到i-1上 let tmp = this.form.replayList.splice(i, 1) this.form.replayList.s...
- 在通读了vue的官网文档后，我记录下了如下这些相对于2.x的变化之处。 1.创建应用实例的变化之前一般是这样：let app = new Vue({ // ...一些选项 template: '',// 字符串模板 render: h => h(App)// 单文件情况下})let vm = app.$mount('#app')app === vm// true而现在变成这样：import ... 在通读了vue的官网文档后，我记录下了如下这些相对于2.x的变化之处。 1.创建应用实例的变化之前一般是这样：let app = new Vue({ // ...一些选项 template: '',// 字符串模板 render: h => h(App)// 单文件情况下})let vm = app.$mount('#app')app === vm// true而现在变成这样：import ...
- 前言大家好，我是CoderBin，最近在写Vue的项目，由于有一段时间没写的原因，对Vue中的修饰符有些生疏了。所以花了点时间去看了下文档，所以，本文将总结关于Vue中的一些常见的修饰符和写法，希望对大家有所帮助,谢谢。如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻 一、修饰符是什么在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更... 前言大家好，我是CoderBin，最近在写Vue的项目，由于有一段时间没写的原因，对Vue中的修饰符有些生疏了。所以花了点时间去看了下文档，所以，本文将总结关于Vue中的一些常见的修饰符和写法，希望对大家有所帮助,谢谢。如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻 一、修饰符是什么在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更...
- 支持预处理器除了基本的html、js和css，作为一个强大的工具，我们有必要支持一下常用的预处理器，比如html的pug，js的TypeScript及css的less等，实现思路相当简单，加载对应预处理器的转换器，然后转换一下即可。 动态切换编辑器语言Monaco Editor想要动态修改语言的话我们需要换一种方式来设置文档，上文我们是创建编辑器的同时直接把语言通过language选项传递... 支持预处理器除了基本的html、js和css，作为一个强大的工具，我们有必要支持一下常用的预处理器，比如html的pug，js的TypeScript及css的less等，实现思路相当简单，加载对应预处理器的转换器，然后转换一下即可。 动态切换编辑器语言Monaco Editor想要动态修改语言的话我们需要换一种方式来设置文档，上文我们是创建编辑器的同时直接把语言通过language选项传递...
- @[toc] 1 推荐信息 1.1 思路看了这个gif后，可以清楚的看到产生了三个动画效果：图片"拉近"，"了解更多"从下往上显示出来，阴影。我看了华为官网的源代码，发现图片本身就是有一个mask的，这样能让图片看起来暗一些，也就意味着，当鼠标进入的时候，只需要让mask的背景颜色更深一些，就实现了阴影的效果。至于图片"拉近"，我早就写过了，无非是把图片放大，然后超出盒子的不显示，这个也容易... @[toc] 1 推荐信息 1.1 思路看了这个gif后，可以清楚的看到产生了三个动画效果：图片"拉近"，"了解更多"从下往上显示出来，阴影。我看了华为官网的源代码，发现图片本身就是有一个mask的，这样能让图片看起来暗一些，也就意味着，当鼠标进入的时候，只需要让mask的背景颜色更深一些，就实现了阴影的效果。至于图片"拉近"，我早就写过了，无非是把图片放大，然后超出盒子的不显示，这个也容易...
- “我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”上一篇Vite入门从手写一个乞丐版的Vite开始（上）我们已经成功的将页面渲染出来了，这一篇我们来简单的实现一下热更新的功能。所谓热更新就是修改了文件，不用刷新页面，页面的某个部分就自动更新了，听着似乎挺简单的，但是要实现一个很完善的热更新还是很复杂的，要考虑的情况很多，所以本文只会实现一个最基础的热更新效... “我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”上一篇Vite入门从手写一个乞丐版的Vite开始（上）我们已经成功的将页面渲染出来了，这一篇我们来简单的实现一下热更新的功能。所谓热更新就是修改了文件，不用刷新页面，页面的某个部分就自动更新了，听着似乎挺简单的，但是要实现一个很完善的热更新还是很复杂的，要考虑的情况很多，所以本文只会实现一个最基础的热更新效...
- “我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”Vite是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（vite-1.0.0-rc.5版本，Vue版本为3.0.0-rc.10）实现的，现在已经是3.x的版本了，为什么不直接参考最新的版本呢，因为一上... “我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”Vite是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（vite-1.0.0-rc.5版本，Vue版本为3.0.0-rc.10）实现的，现在已经是3.x的版本了，为什么不直接参考最新的版本呢，因为一上...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第十篇，也是最后一篇，读完本篇，可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。Varlet组件库支持多语言切换，使用也很简单：本文会从源码角度来看一下它是如何实现的，希望给你提供一点思路。如上图所示，主要就是提供了三个方法，不过在了... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第十篇，也是最后一篇，读完本篇，可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。Varlet组件库支持多语言切换，使用也很简单：本文会从源码角度来看一下它是如何实现的，希望给你提供一点思路。如上图所示，主要就是提供了三个方法，不过在了...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第九篇，读完本篇，可以了解到如何使用一个div创建一个点击的水波效果。Varlet组件库提供了一个使元素点击时生成水波扩散效果的指令：<template> <div v-ripple>点击</div></template>接下来就从源码角度看看它是如何实现的... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第九篇，读完本篇，可以了解到如何使用一个div创建一个点击的水波效果。Varlet组件库提供了一个使元素点击时生成水波扩散效果的指令：<template> <div v-ripple>点击</div></template>接下来就从源码角度看看它是如何实现的...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第七篇，读完本篇，可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入前面的文章中我们介绍过Varlet组件库的打包流程，最后会打包成几种格式，其中module和commonjs格式都不会把所有组件的代码打... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第七篇，读完本篇，可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入前面的文章中我们介绍过Varlet组件库的打包流程，最后会打包成几种格式，其中module和commonjs格式都不会把所有组件的代码打...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第五篇，读完本文你可以了解到如何通过编写一个Vite插件来支持使用md文件直接作为路由组件。之前文档站点的搭建里我们介绍了路由的动态生成逻辑，其中说到了文档是使用Markdown格式编写的，并且还直接在路由文件里使用md文件作为路由组件：路由就是路径到组件的映... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第五篇，读完本文你可以了解到如何通过编写一个Vite插件来支持使用md文件直接作为路由组件。之前文档站点的搭建里我们介绍了路由的动态生成逻辑，其中说到了文档是使用Markdown格式编写的，并且还直接在路由文件里使用md文件作为路由组件：路由就是路径到组件的映...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第四篇，读完本篇，可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。Varlet的文档网站其实就是一个Vue项目，整体分成两个单独的页面：文档页面及手机预览页面。网站源代码文件默认是放在varlet-cli目录下，也就是脚手架的包... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第四篇，读完本篇，可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。Varlet的文档网站其实就是一个Vue项目，整体分成两个单独的页面：文档页面及手机预览页面。网站源代码文件默认是放在varlet-cli目录下，也就是脚手架的包...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第一篇Vue开源的组件库有很多，基本各个大厂都会做一个，所以作为个人再重复造轮子其实意义也不是很大，但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。不同的组件库架构肯定有所不同，不过大体思路应该都差不多，笔者在众多组件库中挑选了Varlet 来进行剖析，V... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第一篇Vue开源的组件库有很多，基本各个大厂都会做一个，所以作为个人再重复造轮子其实意义也不是很大，但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。不同的组件库架构肯定有所不同，不过大体思路应该都差不多，笔者在众多组件库中挑选了Varlet 来进行剖析，V...
- 1 分析根据华为网页的布局，我们大体上可以将其划分为7个盒子，如下，由于写一个这样的网页再加上部分动态效果，需要的时间很长，本篇博客只记录了div1、div2、div3的静态效果+轮播图的实现。 2 顶部盒子的实现想要实现的正是最上部那个黑色的圆框 2.1 思路我的思路很简单，用四个盒子，其中最大的盒子也就是整个黑色框，大盒子里面包裹着小盒子，每个小盒子对应一个字段（集团网站、选择区域/语... 1 分析根据华为网页的布局，我们大体上可以将其划分为7个盒子，如下，由于写一个这样的网页再加上部分动态效果，需要的时间很长，本篇博客只记录了div1、div2、div3的静态效果+轮播图的实现。 2 顶部盒子的实现想要实现的正是最上部那个黑色的圆框 2.1 思路我的思路很简单，用四个盒子，其中最大的盒子也就是整个黑色框，大盒子里面包裹着小盒子，每个小盒子对应一个字段（集团网站、选择区域/语...
上滑加载中
推荐直播
-
华为云码道-玩转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创作思路，一次讲透！
回顾中
热门标签