Vue基础

最新推荐文章于 2024-10-01 09:29:45 发布
最新推荐文章于 2024-10-01 09:29:45 发布
阅读量77 收藏
点赞数
文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sukisabishi/article/details/119511762
版权

概述

在这里插入图片描述

前端知识体系

在这里插入图片描述

前端三要素

在这里插入图片描述

结构层（HTML)

太简单，省略

表现层（CSS)

在这里插入图片描述
什么是CSS预处理器？
在这里插入图片描述

行为层（JavaScript）

在这里插入图片描述
在这里插入图片描述
JavaScript框架
在这里插入图片描述
UI框架
在这里插入图片描述
在这里插入图片描述

三端统一

混合开发（Hybrid App）

在这里插入图片描述

微信小程序

在这里插入图片描述

后端技术

在这里插入图片描述

主流前端框架

Vue.js

iView

在这里插入图片描述

ElementUI

在这里插入图片描述

ICE

在这里插入图片描述

VantUI

在这里插入图片描述

AtUI

在这里插入图片描述

CubeUI

在这里插入图片描述

混合开发

Flutter

在这里插入图片描述

lonic

在这里插入图片描述

微信小程序

m pvue

在这里插入图片描述

WeUI

在这里插入图片描述

了解前后分离的演变史

为什么要前后分离

后端为主的MVC的时代

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

基于Ajax带来的SPA时代

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前端为主的MV*时代

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

Vue

在这里插入图片描述

MVVM模式的实现者

在这里插入图片描述

为什么要使用Vue.js

在这里插入图片描述

第一个Vue程序

在这里插入图片描述

下载地址

在这里插入图片描述

什么是MVVM

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

为什么要使用MVVM

在这里插入图片描述

MVVM的组成部分

在这里插入图片描述
在这里插入图片描述

View

在这里插入图片描述

Model

在这里插入图片描述

ViewModel

在这里插入图片描述
在这里插入图片描述

v-bind

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-if、v-else

在这里插入图片描述
在这里插入图片描述

表单双绑、事件

什么是双向数据绑定

在这里插入图片描述

为什么要实现数据的双向绑定

在这里插入图片描述

在表单中使用双向数据绑定

在这里插入图片描述

单行文本

在这里插入图片描述

多行文本

在这里插入图片描述

单选按钮

在这里插入图片描述

下拉框

在这里插入图片描述
在这里插入图片描述

什么是组件

在这里插入图片描述

第一个组件

在这里插入图片描述
使用Vue.component()方法注册组件，格式如下
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

使用props属性传递参数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

什么是Axios

在这里插入图片描述

为什么要使用Axios

在这里插入图片描述

第一个Axios应用程序

在这里插入图片描述
在这里插入图片描述
测试代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vue的生命周期

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

计算属性、内容分发、自定义事件

什么是计算属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

内容分发

在这里插入图片描述

测试

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自定义事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vue入门小结

在这里插入图片描述
在这里插入图片描述

说明

在这里插入图片描述

第一个vue-cli项目

什么是vue-cli

在这里插入图片描述
在这里插入图片描述

需要的环境

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一个vue-cli应用程序

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

初始化并运行

在这里插入图片描述

Webpack

什么是Webpack

在这里插入图片描述
在这里插入图片描述

模块化的演进

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装Webpack

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

配置

在这里插入图片描述
在这里插入图片描述

使用webpack

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue-router路由

说明

在这里插入图片描述

安装

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

测试

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实战快速上手

在这里插入图片描述

创建工程

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由嵌套

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件重定向

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由模式和404

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

sukisabishi
关注
Vue基础培训培训资料.ppt
06-06
MVVM（Model-View-ViewModel）模式是Vue.js的基础架构。在MVC（模型-视图-控制器）模式的基础上，MVVM将Controller改为了Presenter，并实现了双向数据绑定。在MVVM中，View的变化会自动反映到ViewModel，反之亦然。...
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础
roydon
10-11 4471
vue2基础
vue基础教程
shiyzhang
07-24 2899
vue基础教程，带你走进vue
vue基础知识汇总
yuandawang的博客
01-06 5886
vue基础知识汇总
Vue基础知识测试
简单点的博客
10-18 7498
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
vue基础
什么都干的派森
05-21 4079
目录 1.子组件props初始化方式 1.子组件props初始化方式 props: { // 单类型 propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Obj
Vue基础入门题库
qq_46556714的博客
09-22 1万+
Vue基础入门作业(含参考答案） 单选题 1、 下列选项中，代表视图部分的是（）。 1分 A、Element B、DOM C、Model D、View 参考答案 : D 答案说明 : MVVM主要包含3个部分，分别是Model、View和ViewMode。 Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。 2、 下面选项中，是基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端的是（）。 1分 A、npm.
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
vue面试——2021最全面的vue基础面试题.pdf
12-14
Vue面试2021最全面的Vue基础面试题.pdf 本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP等软件架构设计模式的区别等知识点。 1. Vue的基本原理 Vue实例创建时，Vue...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
基于Hive和Hadoop的哔哩哔哩网站分析系统
图南的博客
09-27 667
本项目是一个基于大数据技术的哔哩哔哩平台分析系统，旨在为用户提供全面的哔哩哔哩视频数据和深入的用户行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 Spark 为核心进行高效的数据处理。整个系统结合了大数据处理技术，为用户提供精准的内容推荐和深入的用户兴趣分析，帮助平台更好地了解视频趋势和用户需求。
Spring Cloud全解析：服务调用之OpenFeign集成OkHttp
Lxn2zh的博客
09-30 614
HTTP连接需要进行TCP三次握手，是一个比较耗时的操作，一般我们不直接使用HttpURLConnection，而是使用HttpClient/okHttp等支持连接池的客户端工具，以Feign集成OkHttp为例。OpenFeign本质是HTTP来进行服务调用的，也就是需要集成一个Http客户端。默认是HttpURLConnection方式，也就是jdk中提供的最原始的那个。要开启OkHttp ,还需要在YML 中添加开启配置项，默认是关闭的。使用的是Client接口来进行请求的。
spring-boot 整合 mybatis
m0_72168501的博客
09-29 468
spring boot 整合 mybatis
Java内存布局
最新发布
阿呆的专栏
10-01 704
64位 JVM 不启用指针压缩时：Object Header 大小是16字节。64位 JVM 启用指针压缩时（默认）：Object Header 大小是12字节。32位 JVM：Object Header 大小是8字节。JVM在默认情况下启用指针压缩，但如果堆内存超过32GB，就会禁用指针压缩。32GB是压缩指针的最大寻址范围。超过32GB的堆内存中，压缩指针带来的性能提升并不显著，而且需要解压指针反而可能增加开销。
Vue基础教程：轻松掌握核心指令与特性
一、Vue基础语法 1. HelloWorld Vue的HelloWorld示例展示了如何创建一个简单的Vue实例。首先引入vue.js库，然后在HTML中选择一个具有ID的DOM元素，通过Vue实例将数据绑定到该元素。Vue实例的数据可以通过双大括号{{ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值