初识Vue

最新推荐文章于 2022-12-12 11:32:47 发布

丑阳璐

最新推荐文章于 2022-12-12 11:32:47 发布

阅读量85

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_52735772/article/details/119112933

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue

概述

Vue是一套用于构建用户界面的渐进式框架，自底向上逐层应用，Vue的核心库只关心视图层。实现模块开发，路由，状态管理等新特性，支持虚拟dom。

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--vue层变成了模板 template-->
<div id="app">
    {{message}} <!--虚拟DOM-->
</div>
<!--2.创建vue的对象-->
<script>
    var vm = new Vue({
        el:"#app", //通过#id的方式获取元素
        //Model：数据
        data:{ //data是一个对象
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

MVVM模式

MVVM(Model-View-ViewModel)是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式，源自于之前学习的MVC(Model-View-Controller)模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
View：视图层，DOM(HTML操作的元素)
html css Templates
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者，是由前端人员开发组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用的视图数据模型。ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据仅展示状态举个栗子，页面每个地方展示什么都属于视图状态而页面加载进来发生什么，点击某个地方发生什么，滚动是发生什么都属于视图行为(数据交互)。由于视图状态与行为都封装在了ViewModel中，且实现双向绑定，所以ViewModel的内容会实时展现在View层。View层展示的不是Model层的数据，而是ViewModel的数据，由于ViewModel负责与Model层交互，所以View层与Model层实现完全解耦，真正实现前后端分离。
JavaScript Runtime Compiler
Model：数据模型层，指后端进行各种业务逻辑与数据操控，
Java业务逻辑层 ----> DataBase

在MVVM架构中，数据与视图不能实现直接通信，只能通过ViewModel来通信，而ViewModel就是定义了一个观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue.js就是一个MVVM的实现者，核心就是实现了DOM监听与双向数据绑定其实我们并没有主动操作DOM，仅仅是让页面发生变化，通过Vue的数据绑定来实现的。MVVM模式中ViewModel层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

为什么是MVVM?

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model)

低耦合：视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不用改变，当Model变化的时候View也可以不变，实现解耦。
可复用：可以将一些视图逻辑放在一个ViewModel里面，让很多个View实现复用。
独立开发：开发人员专注逻辑与数据(ViewModel)，设计人员专注于前端设计。
易于测试：可针对ViewModel进行独立测试。

Vue.js核心就是实现了DOM监听和数据绑定

为什么是Vue.js

轻量级，体积小
更适合于移动端，比如移动端的Touch时间
容易上手
模块化(Angular)和虚拟DOM(React)
有自己独特的功能(计算等)
开源，用户活跃度高
IDEA可安装Vue的插件(plugin)

开发软件

Vscode
HBuilder
Sublime
IDEA

前端三要素

html：超文本标记语言(Hyper Test Markup Language)
css: 层叠样式表(Cascading Style Sheets)
js: 一种弱类型的脚本语言，代码不与要编译，浏览器解释运行，用于控制网页的行为。

js的一些常见框架

jQuery
React
Vue

Axios 前端通信框架，就是做ajax的

前端的UI框架

Ant-Design：阿里巴巴出品基于React的UI框架
ElementUI：基于Vue的UI框架
Bootstrap：用于前端开发的开源工具包
AmazeUI：基于HTML5的跨屏前端框架
WeUI：微信小程序的UI框架

前端人员为了方便开发也需要一定的后端技术，所以为了前端人员开发后台应用，Node.js就出现了既然是后台技术，那肯定也需要框架和项目管理工具，Node.js框架及管理工具如下：

Express：Node.js框架
Koa：Express简化版
NPM：项目管理综合工具，类似于maven
YARN：NPM的替代方案，类似于Maven和Gradle的关系

vue-element-admin (vital)

富文本 markdown

复习SpringMVC

前端发起请求到前端控制器(dispatcherServlet)
前端控制器请求HandlerMapping查找Handler，可以根据xml配置，注解进行查找
处理器映射器HandlerMapping向前端控制器返回Handler
前端控制器调用处理器适配器去执行handler
处理器适配器去执行Handler
Handler执行完成给适配器返回ModelAndView
处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMVC框架的一个底层对象，包括Model和View
前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成为真正的视图(Jsp)
视图解析器向前端控制器返回View
前端控制器进行视图渲染，视图渲染将模型数据(在ModelAndView对象中)填充到request域
前端控制器向用户响应结果

advantage：MVC是一个非常好的协作模式，能够有效降低代码的耦合度。
disadvantage：前端开发重度依赖开发环境，开发效率低。

大前端时代

MVC：同步通信为主(阻塞式) Model View Controller
MVP：异步通信为主(非阻塞式) Model View Presenter
MVVM：异步通信为主(非阻塞式) Model View ViewModel

前后端分离式开发

advantage

前后端职责清晰：前端工作在浏览器端，后端工作在服务端，专注于业务逻辑的处理，分工明确，可以并行开发。
前端开发的复杂度可控：合理分层，前端代码各司其职。

disadvantage

代码不能复用
数据纯异步交互，对SEO(搜索引擎优化)不利
在移动网下，性能并非最佳
javaScript开始有能力运行在服务端，但是它干不倒Java，这是因为它所能承载的并发量太小。

丑阳璐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue

Vue概述Vue是一套用于构建用户界面的渐进式框架，自底向上逐层应用，Vue的核心库只关心视图层。实现模块开发，路由，状态管理等新特性，支持虚拟dom。第一个vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script
复制链接

扫一扫