Vue.js Spring Boot全栈开发实战，前后端全栈开发实战

Vue.js+SpringBoot全栈开发实战，前后端全栈开发实战。

前后端分离(服务端渲染、浏览器渲染)

• 实现真正的前后端解耦。
• 核心思想是前端html页面通过ajax调用后端的restufulapi接口并使用json数据进行交互。
• 前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（如浏览器、安卓、IOS等）打下坚实的基础。

Vue.js

在讲Vue之前，需要大概了解下HTML、CSS、JS是什么，想必大家都已经有了这方面的知识储备。

Vue介绍

1.Vue是一套用于构建用户界面的渐进式框架，网址：http://cn.vuejs.org/

2.Vue在Github的欢迎度

3.不需要操作Dom，实现了MVVM

//jquery的操作
$
("#test3")
.
val
("DollyDuck")

//Vue的操作
//MVVM，实现了双向绑定

4.学习成本低，文档浅显易懂

Vue建项目

1.Vue提供了一个官方的CLI，用于快速搭建单页面应用（SPA）的脚手架，网址：http://cli.vuejs.org/zh/guide/

2.运行以下命令之一来创建一个新项目，按照默认选项即可

vue create vue-hello-world
(命令行)
vue ui
(界面)

3.在创建好项目后，运行以下命令可以看到项目的初始化界面

cd vue-hello-world
yarn serve

4.默认情况下，在浏览器访问http://localhost:8080/将能看到如下界面：

Vue相关结构和生命周期介绍

目录结构如下图：

<template>
<!-- html -->
</template>
<script>
//js
</script>
<style>
/* css style */
</style>

组件化应用构建

使用小型、独立且通常可复用的组件构建大型应用，一个页面就像搭积木一样。

钩子方法：模板方法的执行结果，该方法就叫做钩子方法。个人理解：钩子函数影响了模板的执行，将函数勾住了，这个方法就是钩子函数。