Vue初见

Vue初见

学完 SSM 框架后,了解一点前端的内容。

1. Vue简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

Vue 是 MVVM 模式的实现者,不同于 MVC 模式,它包括

  • Model:模型层,这里表示为 JavaScript 对象
  • View:视图层,在这里表示为 DOM(文档对象模型 Document Object Model )
  • ViewModel:连接模型层和视图层的中间件,Vue 就是 MVVM 中 ViewModel 的实现者

在 MVVM 架构中,不允许视图层与模型层直接通信,它们必须通过 ViewModel 进行通信,ViewModel 就是定义了一个 Observer 观察者

  • ViewModel 能观察到模型数据的变化,对视图的内容进行更新
  • ViewModel 能监听到视图的变化,并通知模型数据发生改变
Vue初见

Vue 其实就是 ViewModel 的实现者,它的核心就是实现了 DOM 监听数据绑定

2. HelloVue

对应项目 Vue-Study 下的 Vue-First。

在 IDEA 中安装 Vue 插件后,新建文件可以看到 Vue Component 选项(其实装完还是没有,百度才解决的),就可以开始写 Vue 的代码了!

创建一个普通的 HTML 文件,就叫 demo.html 吧,引入 Vue 的 CDN 依赖

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- 压缩版 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

创建一个 div 控件,展示 message 数据,这就是 View 层,展示数据!

<!-- View 层,展示数据 -->
<div id="app">
    <!-- 直接获取 VM 对象绑定的数据,类似 JSP 的 ${} -->
    {{message}}
</div>

数据从哪来?从 Vue 对象给他绑定的数据中来,这就是 ViewModel 层

<script>
    /* 创建一个 ViewModel 对象,绑定控件和数据! */
    var vm = new Vue({
        /* element */
        el: "#app",
        /* Model 层,*/
        data:{
            message: "Hello,Vue!"
        }
    });
</script>

其中 el 为控件的 id,data 为绑定给控件的数据,即 Model 层

Vue 通过 ViewModel 对象,将控件与数据绑定了起来,打开页面,可以看到输出 Hello,Vue!!不过这还不够直观,打开浏览器控制台,编辑 vm 对象的属性

vm.message="Hello,Qiyuan!"
"Hello,Qiyuan!"

按下回车,就可以看到页面上的信息也变化为了 Hello,Qiyuan!这就是 ViewModel 的作用,观察到模型数据的变化后,对视图的内容进行了更新!

使用 Vue 没有改变真正的 View 层 DOM,只改变了 Model 层的数据和 View 层展示的数据!

3. MVVM模式

通过上面的例子,想必已经对 MVVM 模式有一定的理解了,MVVM 模式和 MVC 模式相同,目的都是为了分离 View 层和 Model 层!

使用 MVVM 模式的好处

  • 低耦合:视图( View )可以独立于模型( Model )变化和修改。一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,或当 Model 变化的时候 View 可以不变。
  • 可复用:可以将视图逻辑放到 ViewModel 中,让不同的 View 重用这部分视图逻辑。
  • 可测试:以前的前端页面需要后端的数据才能测试,现在测试可以针对 ViewModel 来写!
  • 还有最重要的一点,后端只需注重于业务逻辑和数据开发( ViewModel ),前端只需注重页面的设计,实现了前后端分离

MVVM 模式的详细结构示意图

Vue初见

其中 ViewModel 由 JavaScript 编写,具有运行时编译的特点,可以实时地更新视图!

3. 总结

只是简单了解了一下 Vue 的特点和作用,还没有真正地用到 Vue 呢!

一直学前端的话后端就要忘完了,和 SpringBoot 交叉着学

上一篇:Vue的MVVM


下一篇:WPF MVVM 界面设计教程(七)