Vue3.x 全家桶 | 01 - Vue Quickstart

Riemann Hypothesis

于 2024-03-01 22:51:19 发布

阅读量1.1k

点赞数 30

分类专栏： Vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/JingnanJia/article/details/136375098

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

iShot_2023-12-21_18.33.21.png

一、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，具体代码如下：

<!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 全局对象，具体代码如下：

// 使用 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 方法，具体代码如下：

<!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 文件，具体代码如下：

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

三、Vue 的插值语法

前面我们已经了解了 Vue 这个全局对象，可以通过调用 createApp 方法来创建一个元素对象，并且元素对象可以调用 mount 方法来挂载到 HTML 页面中某个已存在的元素上。

但是我们使用 createApp 方法所创建的元素的内容是写死的，但其实这部分内容可以保存到一个变量中来实现，Vue 中的变量可以通过 createApp 方法传入的对象参数的 data 属性来定义，并且要求 data 属性必须是一个函数，该函数返回一个对象，对象的属性名就是变量名，属性值就是变量的内容。

<!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>
  <script>
    const app = Vue.createApp({
      // 使用 data 属性的属性值函数返回的对象
      template: "<h2>{{message}}</h2>",
      // 传入一个属性，一个函数, 函数返回一个对象
      data: function(){
        return {
          title: 'Hi',
          message: '你好 Vue3'
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

当然我们也可以使用 data 属性值函数中定义的 title 变量，只需要把 {{message}} 变为 {{title}} 即可

data 属性值函数返回的是一个对象，可以在这个对象中定义多个变量（属性），而在 template 中 {{message}} 这种使用的语法称为 插值语法，使用插值语法在渲染数据的时候就不需要直接操作 DOM 了。

四、`v-for` 语法初识

与编程语言中的 for 循环类似，Vue 中内置了可以对列表数据进行遍历的 v-for 指令；在 Vue 中 v-for 指令可以循环遍历数组、数字或者对象数据，并生成相应的 DOM 元素。

创建新的 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>
  <script>
  </script>
</body>
</html>

使用 Vue 对象的 createApp 方法创建元素，该方法中需要传入一个 data 属性和一个 template 属性，data 属性的值是一个函数，用于返回数据，这里返回的就是我们需要渲染的列表数据，而 template 属性的值就是 HTML 文本，是挂载到 div#app 元素上的 HTML 结构：

const app = Vue.createApp({
  template: `
    <h2>Tesla Vehicles</h2>
  `,
  data: function(){
    return {
      vehicles: ['Model 3','Model Y','Model S', 'Model X', 'Roadster 2', 'Semi']
    }
  }
})

app.mount("#app")

使用 v-for 指令的方式非常简单，只需要在 item 元素上添加 v-for 属性，并且指定 v-for="[列表项] in [列表名称]"，就可以将列表中的每一项遍历出来，我们可以使用插值语法将遍历的每一项渲染出来，并生成一个 DOM 元素，具体代码如下：

const app = Vue.createApp({
  template: `
    <h2>Tesla Vehicles</h2>
    <ul>
        <li v-for="vehicle in vehicles"> {{vehicle}} <li>
  `,
  data: function(){
    return {
      vehicles: ['Model 3','Model Y','Model S', 'Model X', 'Roadster 2', 'Semi']
    }
  }
})

app.mount("#app")

使用 LiverServer 打开页面，效果如下：

遍历对象与遍历列表类似：

const app = Vue.createApp({
  template: `
    <h2>Tesla Vehicles</h2>
    <ul>
      <li v-for="(k,v) in vehicle">{{k}} - {{v}}</li>
    </ul>
  `,
  data: function(){
    return {
      vehicle: {
        "name": "Model 3",
        "brand": "Tesla",
        "factory": "Shanghai Giga Factory"
      }
    }
  }
})

app.mount("#app")

Vue.js也提供了v-for的一些高级用法，例如使用of关键字指定循环的对象属性值，或者使用in关键字指定键名和键值。

Riemann Hypothesis

关注

30
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
Vue3.x 全家桶 | 01 - Vue Quickstart

方法所创建的元素的内容是写死的，但其实这部分内容可以保存到一个变量中来实现，Vue 中的变量可以通过。属性必须是一个函数，该函数返回一个对象，对象的属性名就是变量名，属性值就是变量的内容。只是一个对象的名字，我们可以给他一个其他的名字，也可以挂载到别的已存在的元素上。属性的值是一个函数，用于返回数据，这里返回的就是我们需要渲染的列表数据，而。属性值函数返回的是一个对象，可以在这个对象中定义多个变量（属性），而在。我们可以将全部的源码拷贝到一个本地的 vue.js 文件中，并在。
复制链接

扫一扫