Vue3 简介及入门实例

村雨遥

发布于 2022-06-08 18:06:47

5960

发布于 2022-06-08 18:06:47

文章被收录于专栏：JavaParkJavaPark

前言

之前已经学习过来 HTML、 CSS 以及 JavaScript 的相关知识，也算是基本了解了关于这前端三件套的一些基本用法。今天就来了解下，当前前端开发中最炙手可热的当红辣子鸡 - Vue。本文主要介绍 Vue 的一些入门知识和最经典的 Vue 入门 Hello World 程序，如果你想了解的是更高级的使用技巧，那么完全可以忽略。

Vue 简介

Vue 是什么

Vue 是一套用于构建用户界面的 渐进式框架，不同于其他框架， Vue 被设计为可以自底向上逐层应用，核心库只关注视图层，具有易上手，与第三方库整合方便等优点。此外， Vue 还支持多种现代化的工具链以及类库，使得它能够为复杂的单页应用提供驱动。

Vue 的特点

采用组件化模式，从而提高了代码复用率，更容易维护。
声明式编码，程序员无需直接操作 DOM ，从而提高开发效率。
利用虚拟 DOM + 优秀 Diff 算法，最大化复用 DOM 节点。

Vue 的安装

Vue 的安装主要有两种方式，一种是通过在文件中直接用 <script> 标签引入的方式，另一种则是则是使用 npm 的方式，接下来我们就来看看两种方式是如何进行安装的。

标签引入的方式

假设我们创建了一个 HTML 文件，那么我们此时只需要引入其中以下两个版本中其中一个就可以了。而两者的区别顾名思义，所谓开发环境版本，就是我们日常开发学习所使用的版本，它包含了完整的警告和提示模式，方便我们定位错误，提高我们的开发效率。而生产环境版本，则是对开发环境进行了精简，剔除了其中的警告，尽可能优化了尺寸和速度，针对上线生产所用，有助于生产环境效率的提升。针对生产环境版本，更加推荐大家链接到一个明确的版本号和构建文件，从而避免新版本对老版本中特性造成破坏，影响用户体验。

开发环境版本

<script src="https://unpkg.com/vue@next"></script>

生产环境版本

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

npm 安装

以上的两种方式更适合于我们日常学习和小型应用开发，而如果我们要使用 Vue 构建大型应用时，官方更加推荐我们使用 NPM 进行安装，它能够更好的配合类似 webpack 、 Rollup 等打包器的使用，而且 Vue 也提供了配套的工具来进行单文件组件的开发，而安装的方式也很简单，只要我们的电脑上安装了 Node.js，那我们就可以通过命令行来进行最新稳定版 Vue 的安装了，安装的命令如下。

npm install vue@next

Vue 入门实例

首先，我们创建一个 .html 文件，用于交互。

<!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>

  </body>

</html>

接着我们引入 Vue3 的相关包，这里引入的方式和之前 JavaScript 中介绍的引入的方式一样，直接在 head 部分进行引入即可。

<!-- 引入 Vue3 -->
<script src="https://unpkg.com/vue@next"></script>

然后就是在 body 标签中添加模板用于将数据渲染到 DOM 的系统。

const app = {
    data() {
        return {
            message: 'Hello World!'
        }
    }
}
Vue.createApp(app).mount('#app')

最后得到我们的完整文件如下。

<!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>Vue 3 入门实例</title>
    <!-- 引入 Vue3 -->
    <script src="https://unpkg.com/vue@next"></script>
  </head>

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

    <script>
      const app = {
        data() {
          return {
            message: 'Hello World!'
          }
        }
      }
      Vue.createApp(app).mount('#app')
    </script>
  </body>

</html>

将文件用浏览器打开，在页面中应该就会显示如下信息了。