前端基础-陈旭辉-20230619

一、学习内容

1、vue介绍

Vue (读音 /vjuː/，类似于 view - 视图 ) 是一套用于构建用户界面的渐进式 JavaScript 框架。

• 全称是Vue.js或者Vuejs；
• 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
• 帮助你高效地开发用户界面，无论任务是简单还是复杂；
  
  

1.1 渐进式框架

可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery ==库===来使用。

也可以使用Vue==全家桶====框架==来开发大型的单页面应用程序 。

1.2 使用的原因

vue.js 体积小，编码简洁优雅，运行效率高，用户体验好.

无Dom操作，它能提高网站应用程序的开发效率

2、vue核心思想

==组件化和数据驱动==

为什么要组件化？

        可能存在的问题：相同功能的代码冗余，维护性差。

定义：

• 将页面UI进行自上而下的拆分
• 把通用的、可复用的功能封装到一个组件中（例如：头部导航，轮播图，按钮）
  
  

核心：代码复用

数据驱动视图

定义：通过数据变化直接影响更新DOM展示，避免DOM操作。

        主动：数据

        被动：页面（DOM）

回顾传统：JavaScript，Jquery需要手动操作Dom才能实现对应功能。

缺点：操作复杂。

3.mvvm模型

MVC和MVVM都是一种软件的体系结构MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格，把我们的每一个HTML页面拆成这三部分，如上图。

Model：模型，当前页面渲染时依赖的数据。

View：视图，模板页面（DOM结构）。

ViewModel：视图模型，Vue实例，它是MVVM的核心。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，ViewModel是连接View和Model的中间件。

• ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
• ViewModel通过DOM监听器监听到视图的变化，并能够通知数据发生变化。
• MVVM设计模式最大的特点就是支持数据的双向传递