- 前言随着现代 Web 应用程序的日益复杂，前端开发框架也在不断演进，为开发者提供更强大、更高效的工具和技术。在这些框架中，Vue.js 以其简洁、灵活和响应式的特点而备受青睐。本文将带领读者深入探索 Vue.js，从基础概念到进阶技巧，让你全面了解这个令人惊叹的前端开发框架。 Vue.js 基础概念数据绑定Vue.js 的核心之一就是数据绑定。它实现了数据与视图的双向绑定，使得数据的改变能... 前言随着现代 Web 应用程序的日益复杂，前端开发框架也在不断演进，为开发者提供更强大、更高效的工具和技术。在这些框架中，Vue.js 以其简洁、灵活和响应式的特点而备受青睐。本文将带领读者深入探索 Vue.js，从基础概念到进阶技巧，让你全面了解这个令人惊叹的前端开发框架。 Vue.js 基础概念数据绑定Vue.js 的核心之一就是数据绑定。它实现了数据与视图的双向绑定，使得数据的改变能...
- vue3-uniapp-wechat：原创基于uni-app+vue3+pinia2+vite4.x+uv-ui等技术跨平台仿制微信App界面聊天实例，支持编译到H5+小程序端+App端。编辑框支持单行/多行自适应高度消息+emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。 vue3-uniapp-wechat：原创基于uni-app+vue3+pinia2+vite4.x+uv-ui等技术跨平台仿制微信App界面聊天实例，支持编译到H5+小程序端+App端。编辑框支持单行/多行自适应高度消息+emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。
- 一、前言Vue2持续更新过程中，Vue3已经呼之欲出了，目前Vue官网已经显示Vue3在beta进度了。下面我们主要讲解下Vue3的一些新特性。 二、实践目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令进行升级。cd vue-next-testvue add vue-next 三、不变点模板语法保持不变；不需要使用... 一、前言Vue2持续更新过程中，Vue3已经呼之欲出了，目前Vue官网已经显示Vue3在beta进度了。下面我们主要讲解下Vue3的一些新特性。 二、实践目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令进行升级。cd vue-next-testvue add vue-next 三、不变点模板语法保持不变；不需要使用...
- 一、Vue 开发环境搭建(Windows)nodejs官网下载安装包；安装好之后，在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 npm -v // 显示npm包管理器版本安装vue-cli脚手架构建工具 npm install --global vuecli在VueJs目录下，运行命令vue init webpack firstVue其中，... 一、Vue 开发环境搭建(Windows)nodejs官网下载安装包；安装好之后，在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 npm -v // 显示npm包管理器版本安装vue-cli脚手架构建工具 npm install --global vuecli在VueJs目录下，运行命令vue init webpack firstVue其中，...
- 解决方法：安装 "babel-polyfill"命令：npm安装 npm install --save-dev babel-polyfill 或 cnpm install --save-dev babel-polyfill在入口main.js文件引入：import 'babel-polyfill'，放页面顶部最好。在build文件夹下找到webpack.base.conf.js中app: ... 解决方法：安装 "babel-polyfill"命令：npm安装 npm install --save-dev babel-polyfill 或 cnpm install --save-dev babel-polyfill在入口main.js文件引入：import 'babel-polyfill'，放页面顶部最好。在build文件夹下找到webpack.base.conf.js中app: ...
- 一、文件介绍main.js是项目主入口文件，主要作用是初始化vue实例，并引入所需插件；App.vue是项目主组件，所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。index.html为文件入口;src放置组件和入口文件;node_modules为依赖的模块;config中配置了路径端口值等;buil... 一、文件介绍main.js是项目主入口文件，主要作用是初始化vue实例，并引入所需插件；App.vue是项目主组件，所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。index.html为文件入口;src放置组件和入口文件;node_modules为依赖的模块;config中配置了路径端口值等;buil...
- WebStorm默认支持AngularJS、 React，Vue.js需要安装插件。一个是vue-for-idea，还有一个是vue.js，选一个安装就可以了。但依然没有Vue.js的New Project的向导，莫非要自己建个空项目慢慢搭建，幸好可以用vue-cli快速搭建Vue工程。npm install -g vue-clivue init webpack my-project如果 遇... WebStorm默认支持AngularJS、 React，Vue.js需要安装插件。一个是vue-for-idea，还有一个是vue.js，选一个安装就可以了。但依然没有Vue.js的New Project的向导，莫非要自己建个空项目慢慢搭建，幸好可以用vue-cli快速搭建Vue工程。npm install -g vue-clivue init webpack my-project如果 遇...
- 一、前言computed区别于method的两个点：computed是属性调用，而methods是函数调用；computed带有缓存功能，而methods不是；下面看一个具体例子：<!--HTML部分--><div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="te... 一、前言computed区别于method的两个点：computed是属性调用，而methods是函数调用；computed带有缓存功能，而methods不是；下面看一个具体例子：<!--HTML部分--><div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="te...
- 一、前言<component>元素是vue 里面的内置组件。在<component>里面使用 :is，可以实现动态组件的效果。 二、示例解析下面例子创建一个包含多子组件的 vue 实例。vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomphtml 代码部分：使用vue 内置组件... 一、前言<component>元素是vue 里面的内置组件。在<component>里面使用 :is，可以实现动态组件的效果。 二、示例解析下面例子创建一个包含多子组件的 vue 实例。vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomphtml 代码部分：使用vue 内置组件...
- 一、 前言vue使用watch来响应数据变化。下面代码是watch的一种简单用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... ... 一、 前言vue使用watch来响应数据变化。下面代码是watch的一种简单用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... ...
- 一、前言build.js配置文件是npm run build 命令的入口配置文件，主要用于生产环境。由于这是一个系统配置文件，将涉及很多模块和插件，所以这部分内容我将分多个文章讲解，请关注博主其他文章。// 此文件运行在node环境中，使用webpack的nodejsAPI实现自定义构建和开发流程// npm和node版本检查，请看我的check-versions配置文件相关文章requi... 一、前言build.js配置文件是npm run build 命令的入口配置文件，主要用于生产环境。由于这是一个系统配置文件，将涉及很多模块和插件，所以这部分内容我将分多个文章讲解，请关注博主其他文章。// 此文件运行在node环境中，使用webpack的nodejsAPI实现自定义构建和开发流程// npm和node版本检查，请看我的check-versions配置文件相关文章requi...
- 一、钩子函数钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。 二、Vue 中的钩子函数对于前端来说，钩子函数就是指在所有函数执行前，优先执行了的函数，即 钩住 感兴趣的函数，只要它执行，函数就先执行。export default ... 一、钩子函数钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。 二、Vue 中的钩子函数对于前端来说，钩子函数就是指在所有函数执行前，优先执行了的函数，即 钩住 感兴趣的函数，只要它执行，函数就先执行。export default ...
- 一、前言其实不只vue，react在执行列表渲染时也会要求给每个组件添加key属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。其背后隐藏的原理便是高效的Diff算法。 二、Diff 算法vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简... 一、前言其实不只vue，react在执行列表渲染时也会要求给每个组件添加key属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。其背后隐藏的原理便是高效的Diff算法。 二、Diff 算法vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简...
- 一、介绍这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> <!... 一、介绍这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> <!...
- 一、Computed可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性，具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。例如，当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。<template> <div> ... 一、Computed可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性，具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。例如，当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。<template> <div> ...
上滑加载中
推荐直播
-
华为云码道 × 仓颉编程：工程化AI编码探索2026/05/27 周三 19:00-21:00
刘俊杰-华为云仓颉语言专家/李炎-华为云码道技术专家/王智鹏-OpenCangjie开源社区发起人
本场直播围绕华为云仓颉语言与华为云码道的深度结合，展示华为云智能编程从零基础到高效落地的完整生态能力。以华为云码道为引擎，仓颉语言为载体，带给大家日常提效、趣味创新到极速量产的开发体验。
回顾中 -
一个AI团队帮你写代码：华为云码道Agent Space实战2026/06/25 周四 19:00-21:00
张翰文-华为云码道工程师/郭英旭-青软创新科技集团股份有限公司 软件架构师
本场直播聚焦华为云码道Agent Space两大模式：研发办公、代码开发，亲身体验从需求到代码的AI自动化能力。实操演示基于华为 CodeArts CLI，依托 OpenSpec 规格体系从零搭建业务项目。
回顾中
热门标签