引入

网页编程基本包括：

  • 逻辑操作
    • 循环（for）
    • 判断（if）
  • 事件 js(行为层)
    • 浏览器事件：window、document事件
    • DOM事件：标签事件（增，删，遍历，改）
    • 衍生框架：
      • jQuery
      • Angular：由java程序员开发，将后台的MVC(模型、视图、控制器)模式搬到了前端并增加了模块化开发的概念
      • React：高性能的js前端框架，特点是提出了新概念【虚拟DOM】减少真实DOM操作，在内存中模拟DOM操作，有效的提高了前端渲染效率
      • Vue：一款渐进式Javascript框架，综合了Angular和React的特性
      • React
      • 等等
  • 视图
    • html(结构层)
    • css(表现层)：难点
    • 衍生框架：
      • BootStrap
      • Layui
      • 等等
  • 通信
    • xhr（原生的js事件）
    • ajax（jQuery封装的）
    • axios（一个前端通信框架）

例如java全栈工程师就需要掌握：

  • 后台开发：主打类似于ssm框架编写，crud编写

  • 前端：html、css、js、jQuery、Vue

  • 运维：项目发布，服务器如何运行一个项目？在Linux上部署

    其中前端的部分对java工程师来说也很重要。

​ 在实际开发中，类似于后端有maven等项目打包工具，前端也有webpack这样的工具。又因为css是难点，但是css又不具备一个完整语言的特性，所以我们可以采用Less语言来间接生成css文件。与Less类似的是TypeScript的流行，它是Javascript的一个超集，支持许多新特性。

​ 今天，笔者就带大家做一个Vue框架的引入。

Vue概述

​ Vue.js (读音 /vjuː/，类似于 view) [以下简称为Vue]是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

视图层：HTML+CSS+JS，它遵循SoC关注度分离原则

而其他的类似于

MVVM模式

  • Model：模型层
  • View：视图层
  • ViewModel：连接视图和数据的中间件，Vue就是MVVM中的ViewModel层的实现者

​ 在MVVM框架中，是不允许 数据 和 视图 直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个观察者

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

​ Vue就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

为什么使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：

  • 低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化时MOdel可以步变，当Model变化时View也可以不变。
  • 可复用：你可以把视图逻辑放在一个一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面独立设计。
  • 可测试：可以针对ViewModel来写测试。

为什么使用Vue

  • 轻量级
  • 更适合移动端
  • 容易上手，文档齐全
  • 结合了Angular（模块化）和React（虚拟DOM）的特性
  • 开源，社区活跃

开始Vue程序

前端编写的编译器通常有：

  • VsCode
  • HBuilder
  • Sublime
  • WebStrom

但是在这里，笔者选择功能强大的idea进行演示：

新建demo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        {{message}}
    </div>
</body>
<!--导入Vue.js-->
<!--本地有文件替换成目标地址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            message: "hello, vue!"
        }
    });
</script>
</html>

演示效果：

image-20210723222856993

Console控制台操作演示：

image-20210723222953186

体现了MVVM的双向绑定

总结

至此，Vue的引入到此结束，Vue是一个前端框架的集大成者，也是前后端分离的代表，让前后端程序员变得各司其职，也方便了前端的操作和带来更多的变化。