公众号JavaEdge的博客_Vue.js

Vue3实战(05)-教你快速搭建Vue3工程化项目

除了Vue 3这个库，还需Vue 3 最新全家桶。 1 环境准备之前语法演示直接使用script引入Vue 3，从而在浏览器里实现所有调试功能。但实际项目中，使用专门调试工具。在项目上线之前，代码也需打包压缩，并考虑到研发效率和代码可维护性，所以在下面，需建立一个工程化项目实现这些功能。工具 VS Code写Vue 3的代码直接在Chrome浏览器里展示 Vue 2官方推荐Vue-c

Vue

App

初始化

置顶原创 10月前 2030 阅读 yyds干货盘点

Vue3实战06-CompositionAPI+<script setup>好在哪？

Vue 3 的Composition API + <script setup>这种最新的代码组织方式。<script setup>是啥？为啥尤大在微博强推？本文就使用Composition API 和 <script setup> 重构第2讲的清单应用。重构过程将明白， Composition API 让我们更好组织代码结构， <script setup&

API

Vue

数据

置顶原创 2023-09-07 17:37:18 1921 阅读 yyds干货盘点

可以无脑将Vue2项目升级到Vue3吗？

Vue 3 如此优秀，是不是应该赶紧把项目都升级到Vue 3？但不是所有项目都适合升级。1 应该从2升到3吗？如开启一个新项目，直接使用Vue 3最佳选择。以前独立使用Vue 2 开发应用，不管咋组织代码，无法避免在data、template、methods中上下反复横跳，这种弊端在项目规模上来后更明显。由于vue-cli基于Webpack开发，当项目规模上来后，每执行一下，调试环境就要1min，

Vue

API

ci

置顶原创 2023-09-06 22:39:40 3855 阅读 yyds干货盘点

Vue实战(13)-教你如何利用单文件组件和Vue路由打造高级Web应用！

1 本地环境macOS10.14.14node.js@6.14.4 git@1.9.2 hexo@6.4.01.1 安装Node.jsnode -v1.2 安装配置Git查看git是否安装成功git --version2 安装Vue-clijavaedge@JavaEdgedeMac-mini vue-cli % npm install --global vue-cli --force npm

java

github

ci

置顶原创精选 2023-06-21 21:33:27 4505 阅读 yyds干货盘点

Vue实战(12)-表单绑定：提升用户体验，轻松实现数据收集

1 文本最简单的 v-model<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的表单绑定</title> <script src="../vue.js"></script&

html

Vue

vue.js

置顶原创精选 2023-06-20 09:15:27 4254 阅读 yyds干货盘点

Vue事件绑定

1 最基础绑定事件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的事件处理</title> <script src="../vue.js"></script> <

html

Vue

事件处理

原创精选 2023-06-19 23:44:05 3867 阅读 yyds干货盘点

Vue实战(09)-列表渲染：让你的页面秒变爆款！

1 最基础的循环<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的列表渲染</title> <script src="../vue.js"></script> <

html

Vue

Java

置顶原创精选 2023-06-18 17:39:47 3815 阅读

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动

1 v-if V.S v-show<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的条件渲染</title> <script src="../vue.js"></script&

Vue

html

用户名

原创精选 2023-06-16 23:26:45 3596 阅读 yyds干货盘点

Vue项目入门实战(07)-想让你的Vue页面更炫酷？来学习样式绑定吧

1 class的对象绑定1.1 需求现在要实现点击div区域里的 hello world 文本时，文本变成红色。1.2 实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的样式绑定</title>

html

Vue

vue.js

置顶原创 2023-06-15 22:24:18 3271 阅读 yyds干货盘点

Vue项目首页实战 - 父子组组件间传值

1 cityHome.vue新增一个属性：<template> <div> <home-header :city="city"></home-header> <home-swiper></home-swiper> <home-icons></home-icons>

ico

ci

ios

置顶原创精选 2023-06-14 09:52:30 3273 阅读 yyds干货盘点

Vue进阶必备，从源头深度掌握计算属性、方法与侦听器

本文将带你深入探讨 Vue 中计算属性、方法和侦听器的应用和实现原理。计算属性可以帮助我们简化模中复杂的表达式；方法可以让我们在模板中使用复杂的 JavaScript 逻辑；而侦听器则可以帮助我们监听数据的变化并做出相应的响应。本文的阅读，相信你将能够更加深入地理解Vue中计算属性、方法和侦听器的应用和实现原理，从而达到提高开发效率的效果。

sed

Vue

html

置顶原创 2023-06-12 22:12:52 2842 阅读 yyds干货盘点

掌握Vue生命周期，让你的前端开发效率翻倍！

1 Vue实例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例</title> <script src='../vue.js'></script> </head

Vue

html

生命周期

置顶原创精选 2023-06-11 20:19:28 2904 阅读 yyds干货盘点

Vue入门实战05-模板语法

Vue 使用一种基于 HTML 的模板语法，声明式将其组件实例的数据绑定到DOM。所有Vue模板都是语法层合法的 HTML，可被符合规范的浏览器和 HTML 解析器解析。底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。若你对虚拟 DOM熟悉，并偏好直接使用

HTML

Vue

html

置顶原创 2023-06-10 22:11:25 2698 阅读 yyds干货盘点

Vue开发实战(03)-组件化开发

对组件功能的封装，可以像搭积木一样开发网页。Vue官方的示例图对组件化开发的形象展示。左边是一个网页，可以按照功能模块抽象成很多组件，这些组件就像积木一样拼接成网页。1 什么是组件化开发1.1 浏览器封装好的组件在页面的源码里写出的button标签，会在前端页面中显示如下样式：这button就是个组件，这样前端页面在显示上会加上边框和鼠标悬停样式，还可使用click事件触发函数等。只不过这是浏览器

Vue

html

数据

置顶原创精选 2023-06-09 16:13:33 2839 阅读 yyds干货盘点

Vue开发实战(02)-MVVM模式

1 JQ实现待办任务列表<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList Jquery</title> <script src='jquery.js'></script

html

输入框

事件绑定

置顶原创精选 2023-06-08 22:08:01 2619 阅读 yyds干货盘点

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

JavaEdge