Vue3学习第一例：Vue3架构入门

Vue3学习第一例：Vue3架构入门

新手入门指南

由于Vue3的实例教程相对较少，且官网案例可能较为抽象，对于初学者来说可能会感到有些困惑。尤其是当学习者已经掌握了Python的Django框架时，可能会觉得Vue的学习曲线有些陡峭。不过，别担心，我们一步一步来。

在创建一个新的Vue项目后，你会发现public文件目录下自动生成了一个index.html文件。这个文件里有一个div标签，这就是我们在简易案例中需要挂载的入口点。可能刚开始你会有些摸不着头脑，但只要你跟着步骤走，就会发现其实并不难。

Vue程序的入口是main.js文件。在这个文件中，我们需要完成以下几个关键步骤：

1. 导入createApp函数

【javascript】
import createApp from “./js/vue.js”;

注意，这里的路径可能因你的项目结构而异，但通常vue.js文件会放在项目的src目录下。

2. 导入待渲染的Vue组件

【javascript】
import App from “./views/Home.vue”;

这里的Home.vue就是我们的根组件，它位于src/views文件夹下。

3. 创建并挂载应用实例

【javascript】
createApp(App).mount(“#app”);

这行代码的作用是将App组件挂载到id为”app”的div元素上。

接下来，让我们通过一个具体的例子来了解Vue模块化的应用方式——Vue组件嵌入。

情景描述：

在首页上定制一个Button按钮，点击后可以显示或隐藏一段特定内容。这段内容可以是权限声明，也可以是其他任何你想要展示的信息。

定制Modal.vue组件（位于src/views/Modal.vue）：

【html】
<template>
<div class=”modal”>
<slot></slot>
</div>
</template>

这里使用了Vue的插槽功能，允许父组件向Modal组件中插入自定义内容。

主界面的Home.vue组件（位于src/views/Home.vue）：

在template部分：

【html】
<button @click=”toggleModal”>{{ modalFlag ? “Hide” : “Show” }}</button>
<modal v-if=”modalFlag”>
<p>Modals would be appeared here when modalFlag is true.</p >
</modal>

在script部分：

【javascript】
import Modal from “./Modal.vue”;
import { ref } from “vue”;

export default {
name: “Home”,
components: { Modal },
setup() {
const modalFlag = ref(false);
const onModalClick = () => {
modalFlag.value = !modalFlag.value;
};
return { modalFlag, onModalClick };
}
};