自学内容网 自学内容网
自学内容网 > 正文

【Vue】vue概述

🕗 发布于 2024-07-27 12:18 vue.js  前端  

1、简介

  • Vue.js（简称Vue）是一款用于构建用户界面的渐进式JavaScript框架。
  • 由前Google高级软件工程师尤雨溪（Evan You）于2014年创建，是一个独立且社区驱动的开源项目。
  • Vue.js基于标准的HTML、CSS和JavaScript，提供了一个声明式、组件化的编程模型，旨在高效地开发用户界面。
  • Vue.js凭借其易用性、灵活性和高性能，在前端开发领域占据了重要的地位，适用于从简单的单页面应用到复杂的大型企业级应用。

2、主要特点

  • 响应式数据绑定：Vue.js提供了响应式数据绑定机制，使得数据的变化能够自动反映在视图上，简化了开发过程。
  • 组件化：Vue.js鼓励通过小型、独立和可复用的组件构建应用，提高了代码的可维护性和可重用性。
  • 指令系统：Vue.js增加了一套特殊的HTML属性，称为“指令”，用于实现DOM元素的绑定和事件的监听等功能。
  • 虚拟DOM：Vue.js使用虚拟DOM技术来提高页面的渲染效率，通过最小化DOM操作来优化性能。
  • 易于学习和集成：Vue.js的核心库只关注视图层，易于学习和集成到现有项目中。
  • 生态系统丰富：Vue.js拥有庞大的社区支持和完善的生态系统，包括官方路由管理器Vue Router、状态管理库Vuex等，为开发者提供了丰富的工具和库。

3、框架结构

3.1核心部分

  • 实例（Vue Instance）：每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的。实例是Vue应用的入口，包含了应用的数据、模板、挂载元素、方法、生命周期钩子等选项。
  • 模板（Template）：Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。模板中的特殊HTML属性（指令）告诉Vue如何渲染DOM。
  • 组件（Component）：Vue.js鼓励使用组件化的开发模式，将界面拆分成独立、可复用的组件。每个Vue组件都包含自己的模板、逻辑和样式，它们可以是全局注册的，也可以是局部注册的。
  • 路由（Vue Router）：Vue Router是Vue.js的官方路由管理器，用于构建单页面应用（SPA）。它允许你定义多个路由，每个路由映射一个组件，实现页面的无缝切换。
  • 状态管理（Vuex）：Vuex是Vue.js的官方状态管理模式，用于在多个组件之间共享状态。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

3.2实例

3.2.1简介

  • Vue实例是Vue.js框架中的核心概念，它代表了Vue应用中的一个独立单元，用于管理数据、模板、方法以及与视图相关的逻辑。
  • Vue实例通过new Vue()构造函数创建。在创建Vue实例时，可以传入一个选项对象，该对象包含了Vue实例所需的各种配置，如挂载元素（el）、数据（data）、方法（methods）、计算属性（computed）、侦听器（watch）等。

例如：

const app = new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  methods: {  
    reverseMessage() {  
      this.message = this.message.split('').reverse().join('');  
    }  
  }  
});

3.2.2主要组成部分

  1. 数据对象（data）：
    • 包含Vue应用的状态数据，这些数据将被响应式地绑定到视图上。
    • Vue会自动将data中的属性转换为getter和setter，从而实现数据的响应式更新。
  2. 模板（Template）：
    • Vue实例使用的HTML模板，定义了最终生成的视图结构。
    • 模板中可以使用Vue的模板语法来绑定数据、定义事件处理器等。
  3. 方法（methods）：
    • 在Vue实例中可以定义各种方法，用于处理业务逻辑、处理用户事件等。
    • 方法中的this自动绑定为Vue实例本身。
  4. 生命周期钩子（Lifecycle Hooks）：
    • Vue实例具有一系列的生命周期钩子函数，允许我们在不同阶段执行自定义逻辑。
    • 常用的生命周期钩子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。
  5. 计算属性（computed）：
    • 根据已有的数据计算衍生数据的方式，计算属性的值会根据依赖的数据动态更新。
    • 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时它们才会重新求值。
  6. 侦听器（watch）：
    • Vue实例可以侦听数据的变化，并在数据发生变化时执行相应的逻辑。
    • 侦听器适用于执行异步操作或开销较大的操作。
  7. 事件处理器：
    • 在Vue实例中可以绑定处理DOM事件的方法。
    • 事件处理器通过v-on指令或@符号绑定到DOM元素上。
  8. 指令（Directives）：
    • Vue提供了一些内置指令，如v-bind、v-model、v-if、v-for等，用于在模板中插入数据绑定和动态内容。
  9. 过滤器（Filters）：
    • Vue中的过滤器允许我们在模板中对数据进行格式化显示。
    • 需要注意的是，在Vue 2.x版本中过滤器仍然可用，但在Vue 3.x版本中已被移除，推荐使用计算属性或方法来实现相同的功能。

4、安装使用流程

Vue.js的安装和使用流程通常包括以下几个步骤：

1、安装Vue CLI：Vue CLI是Vue.js的官方命令行工具，用于快速搭建Vue项目。你可以通过npm（Node包管理器）来全局安装Vue CLI。

npm install -g @vue/cli

2、创建Vue项目：使用Vue CLI创建一个新的Vue项目。在命令行中运行vue create命令，并跟随提示选择配置选项。

vue create my-vue-project

3、进入项目目录：创建项目后，进入项目文件夹。

cd my-vue-project

4、启动开发服务器：在项目目录中，运行Vue CLI提供的开发服务器命令，启动一个热重载的本地开发服务器。

npm run serve

5、开发应用：在开发服务器运行的情况下，你可以开始编辑你的Vue项目了。主要的工作将在src文件夹内进行，这里包含了项目的源代码、组件、视图等。

6、构建和部署：当应用开发完成并准备好部署时，可以使用Vue CLI的构建命令来生成生产版本的应用。

npm run build

原文地址：https://blog.csdn.net/wosixiaokeai/article/details/140651669

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024