货物

什么是单页应用，什么是 Vue.js

Vue.js 是一种渐进式开源 JavaScript 框架，用于开发交互式 Web 用户界面和单页应用程序。

Vue.js 主要专注于应用程序的可视化部分，也称为前端开发。 Vue.js 日益流行，因为它很容易与其他项目和库集成。安装和使用非常简单。

内容

什么是 Vue.js？

Vue.js 是一个渐进式 JavaScript 框架开放源码用于开发交互式 Web 用户界面和单页应用程序 (SPA)。 Vue.js 通常被称为 Vue，发音为“view.js”或“view”。

什么是单页应用程序 (SPA)？

单页应用程序或 SPA 是一种 Web 应用程序或网站，可为用户提供类似于桌面应用程序的非常流畅、响应迅速且快速的体验。单页应用程序在单个页面上包含菜单、按钮和块。当用户单击其中之一时，它会动态重写当前页面，而不是从服务器加载全新页面。这就是其响应速度背后的原因。

Vue 基本上是为前端开发而构建的，因此它必须处理大量 HTML、JavaScript 和 CSS 文件。 Vue.js 使用户可以轻松地使用称为指令的 HTML 属性来扩展 HTML。 Vue.js 提供内置指令和许多指令 defi用户可以改进 HTML 应用程序的功能。

Vue.js 的特性

以下是 Vue.js 最重要的特性列表：

组成部分

Vue.js 组件是该框架的重要特性之一。它们用于扩展基本的 HTML 元素以封装可重用代码。您可以在 Vue.js 应用程序中创建可重用的自定义元素，这些元素以后可以在 HTML 中重用。

模板

Vue.js 提供了基于 HTML 的模板，可用于将呈现的 DOM 与 Vue 实例数据相关联。所有 Vue 模板都是有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。 Vue.js 将模型编译成虚拟 DOM 渲染函数。 Vue 在刷新浏览器之前将组件渲染到虚拟 DOM 内存中。 Vue 还可以计算要重新渲染的最少组件数，并在更改应用程序状态时应用最少的 DOM 操作量。

反应

Vue 提供了一个使用简单的 JavaScript 对象并优化重新渲染的响应系统。在此过程中，每个组件都会跟踪其响应式依赖项，因此系统确切地知道何时以及要重新渲染哪些组件。

路由

页面导航是在 vue-router 的帮助下完成的。您可以为单页应用程序使用官方支持的 vue-router 库。

过渡

Vue 允许你在 DOM 中插入、更新或移除元素时使用不同的过渡效果。

如何安装 Vue.js？

有多种使用 Vue.js 的方法。您可以通过访问其官方网站来安装它，也可以开始使用 CDN 库中的 Vue.js 文件。以下是在项目中使用 Vue.js 的一些方法。

直接在 HTML 文件中

如果你想使用标签 <script> 直接将 Vue.js 导入到您的 HTML 文件中，您需要从官方网站下载它。

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>

我们去Vue.js官网 https://vuejs.org/v2/guide/installation.html 根据需要下载 vue.js。

使用 CDN

您还可以在您的应用程序中使用来自 CDN 的 Vue.js 文件。使用元素内的链接 https://unpkg.com/vue@3/dist/vue.global.js <script>，如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

使用 Vue.js 的好处

Vue.js 是广泛用于 Web 开发和构建单页应用程序 (SPA) 的最新软件技术之一。从名字就可以猜到，它主要用于项目的 UI 或显示方面。

让我们看看在项目中使用 Vue.js 的好处：

非常小的尺寸

Vue.js 的最大优势之一是它的体积非常小。 JavaScript 框架的成功在很大程度上取决于它的大小，这个令人兴奋的 JavaScript 插件只有 18-21KB，因此您可以非常轻松地下载并立即使用它。

易于理解和编码

Vue.js 框架结构非常简单，非常容易理解。这是该框架流行的原因之一。如果您熟悉 HTML 和 JavaScript，则可以轻松地使用 Vue.js 进行编码。由于结构简单，用户可以轻松地将 Vue.js 添加到他们的 Web 项目中并开发应用程序。

与现有应用程序的简单集成

Vue.js 拥有适用于一切的许多组件，并且可以非常快速地与现有应用程序集成。您可以将它与任何用 JavaScript 编写的应用程序集成。

天生灵活

Vue.js 的灵活性也让 React.js、Angular.js 和任何其他新的 JavaScript 框架的开发人员很容易理解。它提供了很大的灵活性，可以使用虚拟节点来编写 HTML 文件、JavaScript 文件和纯 JavaScript 文件。

组成部分

您可以创建可在 Vue.js 应用程序中重用的自定义元素。

简单、完整和详细的文档

Vue.js 提供了非常简单、完整和详细的文档，因此对 HTML 和 JavaScript 了解不多的开发人员也可以使用它进行编程。

虚拟DOM

Vue.js 使用类似于 ReactJS、Ember 等其他现有框架的虚拟 DOM。虚拟 DOM 是原始 HTML DOM 的轻量级内存中树表示，并且在不影响初始 DOM 的情况下进行更新。

双向沟通

Vue.js 通过其模型视图视图模型 (MVVM) 架构提供双向通信，简化了 HTML 块的处理。

Vue.js 声明式渲染

该框架附带一个系统，允许我们使用简单直接的模型语法以声明方式将数据呈现到 DOM。

这是一个例子：

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

Vue.js 框架允许我们 defi称为指令的 HTML 属性，用于向 HTML 应用程序提供功能。

Vue.js 中有两种类型的指令：

综合指令 e
指令 defi由用户完成。

Vue.js 使用双大括号 {{}} 作为数据的占位符，Vue.js 指令是使用 v- 前缀的 HTML 属性。

Vue 应用程序连接到单个 DOM 元素并完全控制它。在上面的例子中，它是#app。

使用 Vue，我们可以将 HTML 视为入口点，其他一切都发生在创建的 Vue 实例中。
让我们看一个尝试元素和属性绑定的示例：

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>

在这种情况下，新的 v-bind 属性就是指令。指令与 v- 前缀一起使用，表明它们是 Vue 提供的唯一属性，用于将特殊的响应行为应用于渲染的 DOM。

例子的结果如下