Vue3-01

发表于 2023-09-03 更新于 2023-09-07 分类于 Vue3 本文字数： 1.4k 阅读时长 ≈ 5 分钟

本文介绍了 Vue3 的基本概念。题外话：距离上次上传博客过了很久，期间一直在解决笔记本的系统与硬件的问题，现在终于解决了，可以继续写博客了，有时间我会把这个过程写下来。

Vue3

Vue3 是 Vue.js 的下一个主要版本。Vue3 的目标是为了提升开发体验，同时也考虑了性能的提升。

官网：https://v3.cn.vuejs.org/

Vue API 风格

Vue 有两种 API 风格，一种是 2.x 版本的 Options API，另一种是 3.x 版本的 Composition API。

2.x 的风格称为 Options API，因为我们是通过一个个的 Options 来描述组件的，比如 data、methods、props 等等。

e.g. Options API

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

3.x 的风格称为 Composition API，因为我们是通过组合的方式来描述组件的，比如 setup 函数、ref 函数等等。

e.g. Composition API

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};

我们该如何选择？

在实际开发中，我们可以同时使用 Options API 和 Composition API，但是不建议在一个组件中同时使用 Options API 和 Composition API。

当我们不需要使用构建工具时，或打算在低复杂度的场景下使用 Vue 时，我们可以使用 CDN 的方式引入 Vue，这种方式下我们推荐使用 Options API。
当我们需要使用构建工具时，或打算在高复杂度的场景下使用 Vue 时，我们可以使用 npm 的方式引入 Vue，这种方式下我们推荐使用 Composition API。

开发前准备

Node.js
ES6
CLI

创建项目

1	npm init vue@latest

配置

鉴于我是初学者，目前用不到 vue 提供的这些功能，所以我选择了默认配置(即全部 NO)。

安装依赖

1	npm install

由于国内网络原因，我们可以使用淘宝镜像来安装依赖。

1	cnpm install

运行项目

1	npm run dev

随后控制台会提示我们访问地址，我们在浏览器中打开即可。

Vue 项目目录结构

1
2
3

├─node_modules
├─public
└─src

上面是一个精简的 Vue 项目目录结构，在这个目录中，vite.config.js 是 Vue 的配置文件。index.html 是 Vue 项目的入口文件，我们可以在这个文件中引入其他文件。package.json 是 Vue 项目的配置文件，我们可以在这个文件中配置 Vue 项目的依赖、脚本等等。

我们可以看到，Vue 项目的源码都在 src 目录下，public 目录下的内容是我们可以直接访问的。

src 目录下的内容如下：

1 2	├─assets └─components

这个目录还存在 App.vue 文件，这个文件是 Vue 项目的根组件，我们可以在这个文件中使用其他组件。
main.js 是 Vue 项目的入口文件，我们可以在这个文件中创建 Vue 实例。

assets 目录下的内容是我们可以直接访问的，比如图片、字体等等。

components 目录下的内容是我们可以直接访问的，比如组件等等。

初次使用 Vue，这个目录下存在一些文件，我们可以在这些文件中看到 Vue 的一些用法。所以推荐初学者可以先看一下这些文件。不用后直接删除即可，之后还要修改 App.vue 文件。

App.vue 修改为：

<template>
</template>

<script>
</script>

模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

文本插值

最基本的数据绑定是文本插值，使用“Mustache”语法（双大括号）的文本插值：

1	<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

点击查看示例

e.g.

<template>
  <h3>模板语法-插值</h3>
  <div>
    <span>Message: {{ msg }}</span>
    <button @click="changeMsg">Change Message</button>
    <p>{{ hello }}</p>
  </div>
</template>

<script>
  // 这是一个组件
  export default {
    // data 是一个函数，返回一个对象
    data() {
      return {
        msg: "Hello Vue! 你好，Vue！",
        hello: "Hello! 你好！", // 这是新增的
      };
    },
    // methods 是一个对象
    methods: {
      changeMsg() {
        this.msg = "Hello World! 你好，世界！";
      },
    },
  };
</script>

使用 JavaScript 表达式

Vue.js 支持在插值中使用 JavaScript 表达式，但是每个绑定都只能包含单个表达式。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

正确的实例：

<script>
export default {
  data() {
    return {
      number: 1,
      ok: true,
      message: "Hello World!",
    };
  },
};
</script>

<template>
  <h3>使用 JavaScript 表达式</h3>
  <div>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
  </div>

我们不推荐在模板中放入过多的逻辑，因为模板的目的是描述视图，而不是写入逻辑。

原始 HTML

双大括号会将数据解释为纯文本，而非 HTML。为了输出真正的 HTML，我们需要使用 v-html 指令：

1 2	<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>