【Vue】入门及生命周期(前后端分离)

目录

一、Vue简介

1、Vue.js是什么

2、库和框架的区别

  2.1 库(Library)

  2.2 框架(Framework)

3、MVVM的介绍

二、Vue入门

1、Vue快速入门

2、Vue的优势

三、Vue事件

四、Vue生命周期

1、实例


 

一、Vue简介

1、Vue.js是什么

        Vue是一款流行的构建用户界面(UI)的[渐进式]JavaScript框架,它用于构建用户界面。Vue具有简洁、灵活和高效的特点,使得开发者可以轻松地构建交互性强、可复用的前端应用程序

2、库和框架的区别

在软件开发中,库和框架是两个不同的概念。

  2.1 库(Library)

        库(Library)是一组函数、类或方法的集合,开发者可以根据需要选择并使用它们来完成特定的任务,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者


代表例子:

  • 典型代表:jQuery:DOM操作,即:封装DOM操作,简化DOM操作
  • React: 用于构建用户界面的JavaScript库。
  • Lodash: 一个实用的JavaScript工具库,提供了一系列高效、可重用的函数方法。
  • Axios: 一个能够进行HTTP请求的Promise based库,用于与服务端进行数据交互。
  • D3.js: 用于创建数据可视化的JavaScript库。

  2.2 框架(Framework)

        框架(Framework)则更加全面,它提供了一整套的工具、规范以及约定,通过按照框架提供的方式编写代码,开发者能够在其中填入自己的逻辑,从而构建出一个完整的应用程序。是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码


代表例子:

  • Angular: 一款由Google开发的完备的前端框架。
  • Vue: 一款流行的JavaScript框架,用于构建用户界面。
  • Django: 一款基于Python的全功能Web开发框架。
  • Laravel: 一款基于PHP的优雅、简洁的Web开发框架。

3、MVVM的介绍

        MVVMModel-View-ViewModel的缩写,是一种软件设计模式。在前端开发中,MVVM将应用程序划分为三个主要部分:模型(Model)、视图(View)和视图模型(ViewModel)。模型表示数据和业务逻辑,视图负责展示用户界面,视图模型将模型与视图连接起来,处理用户交互、数据绑定等逻辑。Vue就是一种遵循MVVM模式的框架,它充分利用了双向数据绑定和组件化的特点,使得开发者更加方便地管理和操作数据,提升了开发效率。

        MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步

相比较于mvc更加便捷;

二、Vue入门

1、Vue快速入门

使用BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

网络导入我们的Vue.js

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>

【Vue】入门及生命周期(前后端分离)_第1张图片当然我们也可以下载

手动下载
     
     

     
     

放进【Vue】入门及生命周期(前后端分离)_第2张图片里面

 

语法:

var vm = new Vue({
     el:'#ID'         // DOM 元素,挂载视图模型,
     data:{},         // 定义属性,并设置初始值
     methods:{}       // 定义方法,用于事件交互时使用的函数  
   });

步骤:

  1. 定义边界
  2. 创建vue实例
  3. 挂在边界,定义变量
    html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
      <title>Vue入门title>
    head>
    <body>
    
    <div id="app">
      {{msg}}
    div>
    {{msg}}
    <script type="text/javascript">
      // 绑定边界	ES6具体体现
      new Vue({
        el: '#app',
        data() {
          return {msg: 'Hello我是你大爷Vue'};
        }
      })
    script>
    
    
    body>
    html>
    
    【Vue】入门及生命周期(前后端分离)_第3张图片
     

2、Vue的优势

可以随时做一个刷新

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
  <title>Vue入门title>
head>
<body>

<div id="app">
  <input type="text" v-model="msg"/>
div>
<script type="text/javascript">
  // 绑定边界	ES6具体体现
  new Vue({
    el: '#app',
    data() {
      return {msg: '我是你大爷Vue'};
    }
  })
script>


body>
html>

【Vue】入门及生命周期(前后端分离)_第4张图片

三、Vue事件




  
  双向绑定
  



{{msg}}

v-model:数据双向绑定,边界中的变量,再vue实例中的定义变量。

:value/V-bind:value:从vue实例中的定义变量取出,用到边界中。

@click/v-on:click

【Vue】入门及生命周期(前后端分离)_第5张图片

四、Vue生命周期

Vue的生命周期指的是Vue实例在创建、更新和销毁过程中触发的一系列钩子函数。Vue的生命周期分为八个阶段:

  1. beforeCreate:在Vue实例初始化之前被调用。此时data和methods等属性还未被初始化。
  2. created:在Vue实例创建完成后立即调用。此时已经完成了数据观测(data observer)、属性和方法的运算注入,但尚未挂载(没有生成真实DOM)。可以进行一些异步操作,如请求数据。
  3. beforeMount:在Vue实例挂载到DOM之前被调用。此时模板已编译完成,但尚未将其渲染到页面上。
  4. mounted:在Vue实例挂载到DOM之后被调用。此时Vue实例已经和DOM元素建立了联系,可以进行DOM操作或者使用第三方插件。
  5. beforeUpdate:在数据更新导致重新渲染之前被调用。可以在该钩子函数内部进行状态或者数据的修改。
  6. updated:在Vue实例重新渲染完成后调用。此时DOM已经更新,并且组件完成更新。
  7. beforeDestroy:在Vue实例销毁之前被调用。在这个阶段,Vue实例仍然完全可用。
  8. destroyed:在Vue实例销毁之后调用。此时Vue实例已经解除了与DOM的关联,事件监听和计算属性已被移除。

1、实例





  
  
  


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

【Vue】入门及生命周期(前后端分离)_第6张图片

【Vue】入门及生命周期(前后端分离)_第7张图片

你可能感兴趣的:(vue.js,前端,javascript,前端框架)