前后端分离--Vue的入门基础版

目录

一.前后端分离

二.Vue的简介

三.Vue的入门案例

四.Vue的生命周期

---

一.前后端分离

        前后端分离是一种软件架构模式，将应用程序的前端（用户界面）和后端（数据处理和业务逻辑）独立开发、独立部署。在前后端分离的架构下，前端通过API（应用程序接口）与后端进行通信，实现数据交换和业务处理。

前后端分离的优势包括：

1. 独立开发：前端和后端可以并行开发，互不影响，提高开发效率。
2. 松耦合：前端和后端之间通过API进行通信，相互独立，降低了彼此之间的依赖。
3. 可复用性：前端和后端各自独立开发，可以更好地实现代码的复用和维护。
4. 技术栈灵活：前端和后端可以选择适合自己的技术栈，提高开发的灵活性。
5. 性能优化：前端和后端的分离可以针对性地进行性能优化，提高系统的响应速度和吞吐量。
6. 扩展性：前后端分离的架构可以更好地支持系统的扩展和升级。

前后端的开发步骤，首先确定数据格式也就是接口文档，确定好之后只要各司其职就行了

值得注意的是，前后端分离并不适用于所有项目，需要根据具体的需求和项目规模进行选择和决策。

二.Vue的简介

        官方网站：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)https://cn.vuejs.org/

       Vue是一个流行的前端JavaScript框架，用于构建用户界面。它的目标是通过提供简单易用的API和高效的性能，使开发者能够快速地构建交互式的Web应用程序。

Vue具有以下特点：

1. 渐进式框架：Vue采用渐进式的设计，可以根据项目需求逐步引入和使用其功能，不强制性地使用整个框架。
2. 响应式数据绑定：Vue使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新。这简化了开发过程，并提高了应用程序的性能。
3. 组件化开发：Vue将UI界面抽象为一个个可复用的组件，每个组件都包含了自己的模板、逻辑和样式。这样可以提高代码的复用性和维护性。
4. 虚拟DOM：Vue使用虚拟DOM技术来优化渲染性能。它通过将虚拟DOM树与实际DOM树进行比较，减少了DOM操作的次数，提高了页面的渲染效率。
5. 生态系统丰富：Vue拥有一个庞大的生态系统，拥有众多的插件和工具，可以方便地集成到现有的项目中，并提供了许多开发工具和辅助库。
6. 易学易用：Vue具有较低的学习曲线，其文档详细且易于理解，适合初学者和有经验的开发者。

三.Vue的入门案例

                定义一个VUE所管理的边界         

        接着写方法实现：

                效果展示：

        接下来再写一个突出VUE的优势

                展示效果：就像淘宝搜索东西的时候，可以模糊查询一样的

        当把V-model改为  ：value就会有不一样的效果

效果：

以上两个案例可以得出：

            v-model :数据双向绑定，边界中的变量，在vue实例中的变量定义
        :value/V-bind:value:从实例中的定义变量取出，用到边界中的变量中

四.Vue的生命周期

        一共有8个阶段：

1. beforeCreate： 在实例被创建之前调用，此时数据观测 (data observer) 和事件配置 (event/watcher setup) 尚未初始化。

2. created：在实例创建完成后被调用。此时已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 没有引用。

3. beforeMount：在挂载开始之前被调用。此时模板编译已完成，但是尚未将模板渲染到页面中。

4. mounted：在挂载完成后被调用。此时模板已经被渲染到页面，并且组件已经可见。

5. beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在该钩子中对更新之前的状态做一些操作。

6. updated：在数据更新之后调用，发生在虚拟 DOM 重新渲染和打补丁之后。这里可以操作更新后的 DOM。

7. beforeDestroy：在实例销毁之前调用。这个时候实例还完全可用。

8. destroyed：在实例销毁之后调用。这个时候 Vue 实例的所有指令都已解绑，所有事件监听器都已被移除。

也可以用一张图片来理解：

        用案例再来理解一下

	
		
		
		
	
	
		

			
number:{{number}}
			
{{detail()}}
			
		
		
	

结果：

这个输入框默认的没有改变

改变之后：

        今天的分享就到这啦！！