VUE前置知识

权泉全
119 阅读5分钟

Vue.js 是什么

  • Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  • Vue.js（通常简称为Vue）是一款用于构建用户界面的渐进式JavaScript框架。它由尤雨溪（Evan You）于2014年创建并在开源社区中广泛使用和推广。Vue的目标是通过提供简单易用的工具和灵活的架构，使开发人员能够快速构建交互式的Web界面。

以下是Vue的一些主要特点和优势：

  1. 响应式数据绑定：Vue使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新。开发人员只需关注数据的状态变化，而无需手动操作DOM。
  2. 组件化开发：Vue提供了组件化开发的能力，将用户界面划分为独立、可重用的组件，每个组件有自己的逻辑和样式。组件的复用性和可维护性大大提高，同时也促进了团队协作。
  3. 轻量高效：Vue的核心库非常轻量，压缩后仅约30KB大小。Vue通过优化和精简的设计，提供了出色的性能和快速的加载速度。
  4. 灵活性：Vue采用了一种渐进式的设计理念，允许开发者根据项目的需求逐步采用Vue的特性。Vue可以与其他库和现有项目无缝集成，也可作为一个简单的页面增强工具使用。
  5. 丰富的生态系统：Vue拥有庞大而活跃的开源社区，有许多第三方插件、组件库和工具可供选择。这些资源丰富了Vue的功能和扩展性，提供了更多开发选项和便利。
  6. 易学易用：Vue具有简洁的API和清晰的文档，使得学习和使用Vue变得容易。Vue的语法和模板与HTML和JavaScript紧密结合，降低了学习曲线，使开发者能够快速上手。

启发：

  • VUE虽然没有完全遵循 MVVM 模型，但是Vue的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM

  • MVVM是Model-View-ViewModel的简写
  1. M: 模型Model 对应data中的数据
  2. V： 视图 View
  3. VM：视图模型 ViewModel Vue实例对象，它是一个桥梁
  • 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，ViewModel能够观察到数据的变化，并对视图对应的内容进行更新，这个特性被称为数据响应式或者叫数据驱动。

简介：

  • MVVM是一种软件架构模式，它由三个主要组件组成：模型（Model）、视图（View）和视图模型（ViewModel）。MVVM模式的设计目标是将用户界面（视图）与业务逻辑（模型）之间的关注点分离，同时提供数据绑定机制，使开发者能够更轻松地构建可维护和可测试的应用程序。

下面是MVVM模式中各组件的职责：

  1. 模型（Model） ：模型代表应用程序的数据和业务逻辑。它包含了数据的定义、获取、处理和存储的方法。模型通常是应用程序的后端，可以是数据库、API接口或其他数据源。
  2. 视图（View） ：视图是用户界面的可见部分，它负责展示数据给用户，并接收用户的输入。视图可以是页面、窗口、控件或其他用户界面元素。
  3. 视图模型（ViewModel） ：视图模型是视图和模型之间的中介层。它包含了视图展示所需的数据和业务逻辑，与视图进行双向的数据绑定。视图模型负责从模型获取数据，并将其转化为视图可以理解和展示的形式。它也监听视图上的用户交互，并根据用户的操作更新模型的数据。
  • MVVM模式的核心概念是数据绑定，它使得视图和视图模型之间的数据同步变得自动化。当模型的数据发生变化时，视图模型会自动更新视图上展示的数据，反之亦然。这种双向绑定机制减少了开发者手动操作DOM的需求，简化了应用程序的开发和维护。

MVVM模式的优势包括：

  • 提供了松耦合的架构，使开发者能够更好地分离关注点。
  • 数据绑定机制简化了界面和数据的同步处理。
  • 视图模型可以独立于视图进行单元测试。
  • 通过视图模型的抽象层，可以更好地支持多个视图对同一模型的复用。

MVVM模式在许多前端框架和库中得到广泛应用，特别是Vue.js和Knockout.js等。它提供了一种可扩展和可维护的方式来开发现代化的用户界面。

vue基础使用步骤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 准备一个容器 -->
    <div id="app">
      <p>{{msg}}</p>
    </div>
    <!-- 2. 引框架 -->
    <script src="./vue.js"></script>
    <script>
      // 3.实例化Vue
      const vm = new Vue({
        el: "#app", //el就是element元素的意思 它是用来和我们上面准备好的容器产生关系
        data: {
          //数据
          msg: "hello world",
        },
      });
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝