一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

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

一、Vue 初识

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

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

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,具体代码如下:

<!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,使用个步骤如下:

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

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

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

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

通过 VSCode 的 LiverServer 打开页面:

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

打开浏览器的检查工具:

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

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

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

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

<!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 打开页面:

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

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

使用本地 Vue 的 JS 源码

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

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

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

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

<!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 进行开发,具体代码如下:

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

app.mount("#app")

使用 LiverServer 打开页面:

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

原文链接:https://juejin.cn/post/7314365637308170266 作者:RiemannHypo

(0)
上一篇 2023年12月20日 下午4:16
下一篇 2023年12月20日 下午4:27

相关推荐

发表评论

登录后才能评论