【springBoot前端】--Vue快速入门

文章目录



1、Vue介绍

Vue.js(读音 /vjuː/, 类似于 view)

(1)什么是Vue

是一套用于构建用户界面的渐进式框架

(2)Vue有什么特点?

易用:在有HTML CSS JavaScript的基础上,快速上手。
灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
性能:20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

(3)库和框架的区别

库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作

框架

框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

2、MVVM介绍

(1)MVVM是什么?

MVVM是Model-View-ViewModel的简写
它本质上就是MVC 的改进版
MVVM 由 Model,View,ViewModel 三部分构成

  • Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;
  • View 代表UI 组件,它负责将数据模型转化成UI 展现出来
  • ViewModel是一个同步View 和 Model的对象。

(2)ViewModel对象

(1)ViewModel是什么?
vue的核心

  • ViewModel 连接Model 和 View

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互

  • ViewModel同步Model和View
    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉
    【springBoot前端】--Vue快速入门

3、SpringBoot的resources目录

(1)含义

  • (1)Spring Boot默认将所有的静态资源映射到以下目录
    classpath:/static
    classpath:/public
    classpath:/resources
    classpath:/META-INF/resources
    默认的目录下存放的文件,可以直接 访问,,里面不包含templates

  • (2)测试static目录 图片,css,js等

  • (3)测试public目录 index1.html

  • (4)测试template目录 index2.html

(2)修改资源目录

  • (1)优先级
    如果在上面4个默认的能访问的文件夹里如果有名字重复的静态资源那先访问那个呢?
    /META-INF/resources/>/resources/>/static/>/public/
  • (2)修改资源目录
    spring.resources.static-locations=classpath:/templates/,classpath:/static/

4、vue的入门案例

Vue对象 :即ViewModel

  • (1)复制vuejs-2.5.16.js到项目js中
  • (2)复制html到项目template中
  • (3)页面引入js
    <script src="js/vuejs-2.5.16.js"></script>
    【springBoot前端】--Vue快速入门
  • application.properties
spring.application.name=demo01_vue_base
server.port=8080
  • resources\public\index.html
<body>
public/index
</body>
  • 访问地址:
    http://localhost:8080/index.thml
    【springBoot前端】--Vue快速入门
上一篇:Android - 带着问题看源码之 ViewModel


下一篇:MVVM