Vue 编程

最新推荐文章于 2026-06-23 16:11:00 发布
原创 最新推荐文章于 2026-06-23 16:11:00 发布 · 52 阅读 · 0 GEO检测
标签
#vue.js #前端 #javascript #编程
编程 专栏收录该内容
392 篇文章 ¥29.90 ¥99.00
订阅专栏
本文介绍了Vue.js作为一款流行的JavaScript框架，如何通过组件化简化复杂应用程序的构建。文章详细讨论了Vue.js从1.x到3.x的主要版本变化，包括Vue 1.x的基本组件化和响应式数据绑定，Vue 2.x的性能优化和新特性，以及Vue 3.x的重大改进如响应式系统和Composition API。

Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。它采用了组件化的开发方式，使得构建复杂的交互式应用程序变得更加简单和高效。在本文中，我们将探讨 Vue.js 的基本概念和版本编程。

Vue.js 简介

Vue.js 是一个开源的 JavaScript 框架，由尤雨溪在2014年创建。它旨在通过提供一种简单灵活的方式来构建用户界面，使得开发者能够更好地组织和管理代码。

Vue.js 的核心思想是将用户界面抽象成一个个可复用的组件。每个组件包含了 HTML 模板、JavaScript 逻辑和样式定义。通过组件的组合和嵌套，我们可以构建出复杂的用户界面。

Vue.js 的版本编程

Vue.js 在其发展过程中经历了几个重要的版本，每个版本都引入了新的功能和改进。以下是 Vue.js 的版本编程的一些重要概念：

Vue 1.x

Vue 1.x 是 Vue.js 的初始版本。它引入了基本的组件化和响应式数据绑定的概念。在 Vue 1.x 中，我们可以通过声明式的模板语法将数据绑定到 HTML 中，并使用指令来实现交互和条件渲染。以下是一个简单的 Vue 1.x 的示例：

<!DOCTYPE
了解本专栏 订阅专栏 解锁全文
开始学VueJS啦！从命令式编程到声明式编程的华丽转变
小f要努力啦的博客
07-10 205
VueJS 声明式编程 初体验 Q：为什么要换一种编程范式，转变原生JS的编程范式？ 这样可以做到数据和界面的完全分离。更改数据后，页面也会自动更改。如果数据是从服务器请求过来的，接口变了，服务器返回的数据变了，界面根本不需要改。 零零总总几个概念： v-for 遍历 语法糖：简写。 例如：@click 是 v-on:click 的语法糖 下面是一个Vue的模板： <!DOCTYPE html> <html lang="en"> <head> <meta c
VueJs编程规范
k19970320j的博客
03-03 352
好的编程习惯能够减少错误发生的概率，编码习惯好的人写出来的代码可读性好、可维护性高，规范编码风格习惯，降低团队之间的沟通成本。本文将介绍VueJS的编码规范 组件名为多个单词 组件名应该始终是多个单词，根组件App以及<transition>，<component>之类的内置组件除外。这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所以的HTML元素名称都是单个...
【vue开发 环境搭建】从 vuejs环境搭建到组件化编程----Hello World！
晚秋星辰
12-09 6528
一、vuejs开发预备知识Nodejs是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。npm是包管理工具，允许用户从NPM服务器下载别人编写的包或命令行程序到本地使用，允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。webpack是静态资源打包工具，grunt和gulp是自动化构建工具，grunt和gulp二选一就可以。vue（读音
【尚硅谷】chapter2 Vue组件化编程_尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
qq_37581764的博客
10-14 267
Vue中使用组件的三大步骤：一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签)一、如何定义一个组件？使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：1.el不要写，为什么？——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。2.data必须写成函数，为什么？———— 避免组件被复用时，数据存在引用关系。
VueJs中的编程式导航VS声明式导航
itclanCoder
07-20 750
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言在vue当中实现链接的跳转,通过使用的是vue提供的router-link标签,并结合to属性去跳转,这种可直接在模板中进行使用我们称为它是声明式的导航,...
web应用技术作业06
2403_89185994的博客
06-17 127
把员工信息列表展示的页面的表格样式，从“带斑马纹表格”，改成“基础表格”样式，并且只占窗口的60%在pom.xml文件中引入dom4j的依赖用于解析XML文件emp.xml。stripe属性可以创建带斑马纹的表格。margin: 0 auto居中。border显示边框。
Nacr Design — Nuxt 3/4 企业级 Vue 组件库，80+ 组件开箱即用
最新发布
weixin_58946315的博客
06-23 237
全网首个深度集成 ECharts 图表 + Markdown 编辑器的 Nuxt UI 组件库 TypeScript 全覆盖 · 自动导入 · 按需加载 · 一行配置
vue3项目引用vue-office组件
荔枝吖阿
06-17 93
1. 安装 （vue-demi 0.14.10版本的比较稳定）2. Vite 配置优化。
若以SpringBoot-Vue, 数据源切换架构详解
qq_43071699的博客
06-20 514
数据源切换架构摘要 本项目基于Spring Boot实现了一套灵活的数据源切换机制，仅需修改application.yml中的database.type配置项，即可自动完成以下联动： 配置层：通过Profile机制加载对应数据库的连接配置 属性绑定：自动绑定数据库类型、驱动、方言等参数 数据源装配：动态创建Druid连接池并设置为主数据源 SQL方言适配：自动加载对应数据库的Mapper文件和分页方言 运行时路由：通过AOP实现主从库读写分离 核心特点： 一处配置修改（database.type）触发五处自
135 Vue 卡片标签溢出处理：如何用真实 DOM 宽度实现“显示部分标签 +N
samllucky的博客
06-17 232
本文介绍了在Vue中实现卡片标签溢出处理的精确方案。当标签过多时，不是简单截断，而是完整显示能放下的标签并用"+N"表示剩余数量。核心思路是通过隐藏的DOM测量标签实际宽度，动态计算容器能容纳的标签数。具体实现包括： 准备两套DOM：显示的标签区域和隐藏的测量区域 使用visibility:hidden而非display:none确保能获取真实宽度 计算容器可用宽度（需减去padding） 考虑flex布局的gap间距 实现从多到少的尝试算法，确定最多能完整显示的标签数 使用nextTick确保DOM更新完
组件 = 模板 + 业务逻辑
linsk1998的博客
06-23 186
库内置了完整的元数据系统，你可以像 Java 那样自己写注解，给字段打标签，运行时直接读取配置。做动态表单、配置化表格、低代码页面的时候特别好用 —— 模型类写完，表单和表格直接照着元数据自动渲染，不用重复写配置。// 一行代码定义一个自定义注解@Model@Label("用户ID")@Required@Label("用户名")// 运行时直接读取所有字段元数据。
Spring Boot + Vue 在线法律咨询辅助系统：从需求分析、数据库设计到核心功能实现
2301_79630794的博客
06-22 212
基于 Spring Boot、Vue、MyBatis 与 MySQL 设计在线法律咨询辅助系统，梳理用户端与管理端功能、核心数据表、登录鉴权流程、咨询业务闭环及测试优化思路。
TypeScript 基础入门：在 Vue/uni-app 项目中理解常见类型
前端开发努力中！
06-17 313
TypeScript 基础类型在 Vue/uni-app 中的应用 本文介绍了 TypeScript 在 Vue/uni-app 项目中的基础类型用法，包括： 类型推断：自动推断变量类型 函数类型：参数和返回值类型约束 字面量类型：限制变量为固定值 联合类型：变量可为多种类型之一 any与unknown：处理不确定类型，unknown更安全 类型断言：强制指定类型 void与never：函数返回值类型 Vue中ref的泛型写法：明确响应式数据类型 文章通过实际代码示例，对比了不同类型的特点和使用场景，特别强
vue 插槽
a378113472的博客
06-20 276
template><h2>卡片标题</h2>-- slot 就是内容的占位符 --></div>渲染结果< div class = " card " > < h2 > 卡片标题 </ h2 > < p > 这是从父组件传入的内容 </ p > </ div >< div class = " card " > < h2 > 卡片标题 </ h2 > < p > 这是从父组件传入的内容 </ p > </ div >
拖拽文件上传组件
dy1717的博客
06-17 62
拖拽上传文件组件
补充一个小知识点：有关@click.native
m0_67841039的博客
06-16 281
结论：只要你想响应用户点击 el-dropdown-item 的动作，就必须使用 @click.native。在使用 Element UI 的 el-dropdown-item 组件时，如果你想监听原生的点击事件（即 DOM 层面的 click），必须加上 .native 修饰符，即使用 @click.native。Vue 中，默认的 @click 监听的是子组件通过 $emit(‘click’) 主动触发的事件，而 el-dropdown-item 并没有 $emit(‘click’)。
SpringBoot3 + Vue 订单库存物流项目完整案例
Peter_Changyb的博客
06-20 387
本文将基于 Spring Boot 3 与 Vue 3 技术栈，开发一套包含订单下单、商品库存扣减、物流状态变更的完整业务案例。该案例聚焦核心业务流，不引入复杂权限体系，兼顾功能可扩展性与高并发场景下的业务稳定性，适合作为全栈开发技术验证、中小型业务系统基础脚手架，或在校学生课程设计 / 毕业设计的参考工程。
Vue defineModel 转 React：VuReact 怎么处理？
牛爷爷的博客
06-23 204
VuReact工具能够将Vue 3的defineModel宏编译为等效的React代码，具体转换如下： 基础用法：将Vue的defineModel分解为类型声明、事件回调和响应式ref（使用useVRef和useUpdated），保持.value赋值方式不变。 选项支持：处理type、default、required等选项，转换为React的类型约束和默认值逻辑。 模板绑定：将Vue的v-model编译为React受控组件的value+onChange模式。 限制：不支持数组解构和get/set等高级选项。
VuReact 1.9.0 发布，支持 Vue 3.4 defineModel 编译到 React
牛爷爷的博客
06-23 436
VuReact 现已完整支持 Vue 3.4+ 的 defineModel 宏，可将其编译为 React 标准代码。开发者可在 Vue 源码中直接使用 defineModel 声明双向绑定，VuReact 会将其转换为 useVRef + useUpdated 的组合实现响应式更新。支持基础绑定、自定义 prop 名称、类型与默认值等特性，暂不支持数组解构、自定义存取器等实验功能。该特性让 Vue 开发者迁移到 React 时能保持熟悉的开发体验，无需手动改写为 useState 模式。
项目 是选择用 Vuejs 还是 TS 呢？
。
06-20 235
不是选 Vue 还是 TS，必须 Vue3 + TS 一起用；纯 JavaScript 会让你的多人联机、Spine 动画、地图碰撞逻辑后期排错成本爆炸，TS 是游戏类前端项目的标配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值