前后端分离--Vue的入门基础版-阿里云开发者社区

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

2023-11-30 115

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一.前后端分离

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

前后端分离的优势包括：

独立开发：前端和后端可以并行开发，互不影响，提高开发效率。

松耦合：前端和后端之间通过API进行通信，相互独立，降低了彼此之间的依赖。

可复用性：前端和后端各自独立开发，可以更好地实现代码的复用和维护。

技术栈灵活：前端和后端可以选择适合自己的技术栈，提高开发的灵活性。

性能优化：前端和后端的分离可以针对性地进行性能优化，提高系统的响应速度和吞吐量。

扩展性：前后端分离的架构可以更好地支持系统的扩展和升级。

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

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

二.Vue的简介

官方网站：

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

Vue具有以下特点：

渐进式框架：Vue采用渐进式的设计，可以根据项目需求逐步引入和使用其功能，不强制性地使用整个框架。

响应式数据绑定：Vue使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新。这简化了开发过程，并提高了应用程序的性能。

组件化开发：Vue将UI界面抽象为一个个可复用的组件，每个组件都包含了自己的模板、逻辑和样式。这样可以提高代码的复用性和维护性。

虚拟DOM：Vue使用虚拟DOM技术来优化渲染性能。它通过将虚拟DOM树与实际DOM树进行比较，减少了DOM操作的次数，提高了页面的渲染效率。

生态系统丰富：Vue拥有一个庞大的生态系统，拥有众多的插件和工具，可以方便地集成到现有的项目中，并提供了许多开发工具和辅助库。

易学易用：Vue具有较低的学习曲线，其文档详细且易于理解，适合初学者和有经验的开发者。

三.Vue的入门案例

定义一个VUE所管理的边界

接着写方法实现：

效果展示：

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

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

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

效果：

以上两个案例可以得出：

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

四.Vue的生命周期

一共有8个阶段：

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

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

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

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

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

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

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

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

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

用案例再来理解一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="d1">
      <div>number:{{number}}</div>
      <div>{{detail()}}</div>
      <input type="text" v-model="number" />
    </div>
    <script>
      var data = {
        number:999,
        msg:null
      };
      var vm = new Vue({
        el:'#d1',
        data:data,
        methods:{
          detail:function(){
            return "使用方法来插值："+this.msg;
          }
        },
        beforeCreate:function(){
                console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
                console.log(this.msg)//undefined
                console.log(document.getElementsByClassName("myp")[0])//undefined
            },
            created:function(){
                console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
                this.msg+='!!!'
                console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
                console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
            },
            beforeMount:function(){
                console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
                this.msg+='@@@'
                console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
                console.log(document.getElementsByClassName("myp")[0])//undefined
                console.log('接下来开始render，渲染出真实dom')
            },
            // render:function(createElement){
            //     console.log('render')
            //     return createElement('div','hahaha')
            // },
            mounted:function(){ 
                console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
                console.log(document.getElementsByClassName("myp")[0])
                console.log('可以在这里操作真实dom等事情...')
            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'  
            //    }.bind(this),500)
            },
            beforeUpdate:function(){
                //这里不能更改数据，否则会陷入死循环
                console.log('beforeUpdate:重新渲染之前触发')
                console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
            },
            updated:function(){
                //这里不能更改数据，否则会陷入死循环
                console.log('updated:数据已经更改完成，dom也重新render完成')
            },
            beforeDestroy:function(){
                console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
                // clearInterval(this.$options.timer)
            },
            destroyed:function(){
                console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
            }
      });
    </script>
  </body>
</html>

结果：

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