Vue3.x 全家桶 | 01 - Vue Hello World

一、Vue 初识

Vue 是一个 Web 前端框架，是一个 用于构建用户界面的渐进式 JavaScript 框架。

Vue 框架基于标准的 HTML、CSS、JavaScript 构建，并且提供了一套声明式的、组件化编程模型；所谓渐进式即我们可以在项目开发中一点点来引入和使用 Vue，而不一定需要全部使用 Vue 来开发整个项目。

二、Vue 引入

前面说到 Vue 是一个渐进式的框架，因此我们可以在 HTML 中引入并使用 Vue 框架，引入 Vue 框架的方式有两种：

直接在页面中使用 script 标签和 CDN 的方式引入
直接使用 script 标签引入下载到本地的 Vue 源码（JavaScript 文件）

除此之外也可以使用 npm 工具来安装并使用，或者通过 Vue CLI 或者 Vite 工具来创建 Vue 项目。

使用 CDN 方式引入 Vue

使用 VSCode 创建 HTML 页面，并创建一个 div.app 元素，使用 script 标签引入 Vue 的 CDN 地址 https://unpkg.com/vue@next，具体代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  
  <script src="https://unpkg.com/vue@next"></script>
</body>
</html>

接着我们就可以使用 Vue 来进行开发了，Vue 的源码中提供了一个全局对象 Vue，使用个步骤如下：

调用 Vue 全局对象的 createApp 方法创建一个 app
将 app 挂载到具体的元素上

再增加一个 script 标签，在该标签中使用 Vue 全局对象，具体代码如下：

js 复制代码

// 使用 createApp 方法创建一个元素
const app = Vue.createApp ({
  // app 元素的内容
  template: "<h1>你好，Vue</h1>"
})

// 将创建的 app 元素对象挂载到具体的 div.app 元素上
app.mount("#app")

通过 VSCode 的 LiverServer 打开页面：

打开浏览器的检查工具：

可以看到我们通过 createApp 方法创建的一个 h1 元素被嵌入到了 div.app 中，这就是挂载，是通过元素对象的 mount 方法实现的。

当然这里的 app 只是一个对象的名字，我们可以给他一个其他的名字，也可以挂载到别的已存在的元素上。

我们可以在创建一个 HTML 文件来使用 Vue 全局对象的 createApp 方法和 mount 方法，具体代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div class="info"></div>
  <hr>
  <div class="box"></div>
  
  <script src="https://unpkg.com/vue@next"></script>
  <script>

    const name = Vue.createApp({
      template: '<span>这是挂载到 info div 中的内容</span>'
    })

    const item = Vue.createApp({
      template: '<strong>这是挂载到 box div 中的内容</strong>'
    })

    name.mount('.info')
    item.mount('.box')

  </script>
</body>
</html>

使用 LiverServer 打开页面：

createApp 方法在调用的时候需要传入一个对象 {}，该对象的其中一个属性就是 template，根据以上的例子，template 中就是我们要显示的 HTML 的内容。

使用本地 Vue 的 JS 源码

在使用 CDN 的方式引入的时候有一定的网络消耗，使用本地 Vue 源码引入的方式效率会更高，我们可以将 CDN 地址拷贝并在浏览器中打开：

我们可以将全部的源码拷贝到一个本地的 vue.js 文件中，并在 script 标签中引入。

创建一个 HTML 页面，并引入 vue.js 文件，具体代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app"></div>
  
  <script src="./lib/vue.js"></script>
</body>
</html>

接着再增加一个 script 标签，使用 Vue 进行开发，具体代码如下：

js 复制代码

const app = Vue.createApp({
  template: "<h1>Hello Vue</h1>"
})

app.mount("#app")

使用 LiverServer 打开页面：