java入职学习五之核心框架（springboot和vue）_vue和springboot区别

一 、springboot

1、简介

SpringBoot是一个默认就集成了绝大部分常规开发时都使用的依赖、完成了绝大部分的常规配置、基于SpringMVC的框架。

SpringBoot的核心思想是约定大于配置，因为在传统的SSM项目中，创建项目后，需要自定义大量的配置，而不同的项目的配置却大同小异，甚至就是完全相同，所以，SpringBoot就直接完成了相关的配置，并要求使用者遵循配置值的约定，例如它将DispatcherServlet的映射路径配置为/*，则使用者就按照这个配置值使用即可，无须自已编写配置！

2、特点

Spring boot是一个脚手架，构建于Spring框架(Framework)基础之上，基于快速构建理念，提供了自动配置功能，可实现其开箱即用特性（创建完一个基本的项目以后，可零配置或者少量配置即可运行我们的项目），其核心主要有如下几个方面：

1. 起步依赖(Starter Dependency)-项目创建时底层帮你关联依赖。
2. 自动配置(Auto Configuration)。
3. 健康检查(Actator)-监控。
   其中，Spring Boot官方地址为https://spring.io/projects/spring-boot。

3、Spring Boot 环境配置

1)下载JDK1.8，并进行环境变量配置(
2)下载最新maven(例如apache-maven-3.6.3,网址http://maven.apache.org/)并解压。
3)下载sts最新版(例如sts-4.4.5.RELEASE,网址https://spring.io/tools)并解压（新版本下载下来时一个.jar文件，需要在jar文件所在的目录中，以命令行方式执行java -jar 下载的文件名的方式进行解压，如图-1所示（需要首先启动系统自带的命令行客户端，然后切换到软件所在目录，cd指令为切换目录的意思）。

或者在idea上添加一个插件

4、创建springboot工程

1. 创建项目 选择Spring Initializr，右边选择自己配置的jdk，下方默认spring支持url，然后next
   
2. 进行路径、包名的配置
   
3. 配置项目所需要jar包依赖，这个地方选择会自动带入pom.xml中（可以创建项目之后自行进行配置）
   
4. 创建项目
   

5、项目简介

查看项目结构（注意：DemoApplication一定要在路径的最外层），resources为资源文件路径：存放propertie文件，（static、templates目录存放前端页面文件：static存放 js、css文件，templates存放html等文件。）

二、vue.js

1、简介

1、Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
2、Vue 只关注视图层， 采用自底向上增量开发的设计。
3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.1 Vue可以用来做什么？

Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。

1.2 为什么使用Vue？

1、轻量级
2、js语法
3、入门及上手快

1.3 vue与Jquery比较?

1、jquery关注dom
2、vue关注数据，不关注dom

1.4 Vue.js 安装

使用

2、 Vue的书写格式

<div id="vue_det">
    <h1>{
   {
   details()}}</h1>  <!--使用两个括号来展示数据-->
</div>
<script type="text/javascript">
    var vm = new Vue({
   
        el: '#vue_det',  //表明作用域
        data: {
             //存储数据
            ………
        },
        methods: {
          //事件处理方法
            details: function() {
   
                ……
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、 Vue的对象

1、el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制
2、data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好
3、methods：事件处理方法对象

3.1数据绑定

1、数据绑定最常见的形式就是使用 { {…}}（双大括号） 的文本插值

2、使用 v-html 指令用于输出 html 代码
示例：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
   
  el: '#app',
  data: {
   
    message: '<h1>Vue</h1>'
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、HTML 属性中的值应使用 v-bind 指令，参数在指令后以冒号指明。
示例

<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>
    
<script>
new Vue({
   
  el: '#app',
  data: {
   
    url: 'http://www.baidu.com'
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4、 v-model 指令来实现双向数据绑定

5、 v-on 指令，它用于监听 DOM 事件

过滤器（可以接受参数）
示例

<div id="app">
  {
   {
    message | capitalize }}
  <div v-bind:id="rawId | formatId"></div>
</div>

<script>
new Vue({
   
  el: '#app',
  data: {
   
    message
1
2
3
4
5
6
7
8
9
10
11
12
13