小白如何快速入门Vue3-基本用法

小熊崽
1,234 阅读10分钟

小白如何快速入门Vue3（一）

Vue是一种流行的前端框架，目前被广泛应用于大量的前端开发项目中。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue还提供了许多有用的功能，如响应式数据、自定义指令和过滤器、路由和状态管理等。

本文将介绍如何创建一个vue3的项目，以及vue3的一些基础概念和用法。

如何创建一个vue3应用

如果你想使用Vue3，可以使用Vite来创建一个新的Vue3应用程序。以下是一些快速入门的步骤：

  1. 安装Vite:

    npm install -g vite

  2. 创建一个Vue3应用程序:

    create-vite my-app --template vue

  3. 进入新创建的应用程序目录:

    cd my-app

  4. 在终端输入以下命令来安装依赖：

    npm install

  5. 安装完成后，输入以下命令来启动应用程序：

    npm run dev

这将启动一个本地开发服务器，通过浏览器访问http://localhost:5173地址，可以直接看到对应的站点，并且你也可以通过修改对应的代码来测试页面的热更新功能。

在学习Vue3框架时，建议尝试使用Vue3提供的Composition API，这是Vue3中的新特性，可以帮助你更好地组织代码和逻辑。

什么是组件

在Vue3中，组件是可重用的代码块，用于定义应用程序的各个部分。每个组件都是一个Vue实例，可以包含模板、JavaScript代码和样式。组件可以嵌套在其他组件中，形成组件树，从而构建应用程序的整个界面。

Vue3中的组件使用单文件组件（.vue文件）进行定义，每个单文件组件包含三个部分：

  1. template模块：用于定义组件的HTML结构。
  2. script模块：用于定义组件的行为和逻辑。
  3. style模块：用于定义组件的样式。

以下是一个简单的Vue3单文件组件示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const title = ref('Hello World')
const message = ref('Welcome to my Vue3 component!')
</script>

<style scoped>
h1 {
  color: red;
}
</style>

上面的示例中，我们使用<template>标签来定义组件的模板，使用<script>标签来定义组件的行为和逻辑，使用<style>标签来定义组件的样式。其中，scoped属性表示该样式仅适用于组件内部的元素。

在vue3中，可以直接使用script setup的形式来更加简洁地定义组件，不需要再使用export default和data等关键字，直接使用ref来声明响应式变量即可在模板中使用。

组件的生命周期

Vue3组件的生命周期包括以下钩子函数：

  • beforeCreate：在实例创建之前调用，此时组件的数据观测和事件机制均未初始化。
  • created：在实例创建完成后调用，此时组件的数据观测已经完成，但是尚未开始渲染DOM节点。
  • beforeMount：在挂载开始之前被调用，此时尚未生成DOM节点。
  • mounted：在挂载完成之后被调用，此时DOM节点已经生成。
  • beforeUpdate：在数据更新之前被调用，此时DOM节点尚未重新渲染。
  • updated：在数据更新之后被调用，此时DOM节点已经重新渲染。
  • beforeUnmount：在实例销毁之前调用，此时组件实例还未销毁。
  • unmounted：在实例销毁之后调用，此时组件实例已经销毁，不再有任何数据和方法可以访问。

这些钩子函数可以用于在组件的生命周期中执行一些特定的任务，例如在mounted钩子函数中进行异步数据的获取和处理等。

组件的生命周期图示

组件的生命周期钩子函数执行顺序参考下图：

image.png

如何给组件传递属性

使用props传参

在Vue3中，可以通过props选项来向组件传递属性。以下是一个简单的Vue3组件的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  message: {
    type: String,
    default: 'Hello World'
  }
});
</script>

在上面的示例中，我们使用了defineProps来声明了两个属性：title和message。title属性是必需的，且类型为字符串，message属性是可选的，且类型为字符串，默认值为'Hello World'。在组件的模板中，我们可以通过{{ title }}和{{ message }}来引用这两个属性的值。

使用provide和inject传递属性

当vue3的组件嵌套多层时，使用props来向组件传递参数需要传多层，这个使用我们可以使用provide和inject选项来在组件之间共享数据。

provide选项用于向下传递数据，inject选项用于在组件中接收数据。以下是一个简单的Vue3组件之间共享数据的示例：

// Parent.vue
<template>
  <div>
    <child></child>
  </div>
</template>

<script setup>
import { provide } from 'vue'
import Child from './Child.vue'

provide('message', 'Hello World')
</script>

// Child.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

在上面的示例中，我们在Parent组件中使用了provide选项来向下传递了一个字符串Hello World。在Child组件中，我们使用了inject选项来接收这个字符串，并将其显示在模板中。

如何监听事件

vue3中的绑定事件

在Vue3中，可以使用v-on或者简写形式@来绑定事件。以下是一些常用的事件绑定方式：

  • @click：点击事件
  • @input：输入事件，用于监听表单输入框的输入事件
  • @submit：提交事件，用于监听表单提交事件
  • @keydown：键盘按键按下事件
  • @keyup：键盘按键松开事件
  • @mousemove：鼠标移动事件
  • @scroll：滚动事件
  • @resize：窗口大小改变事件

以下是一个示例，展示如何监听点击事件：

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script setup>
const handleClick = (event) => {
  console.log('Button clicked!')
}
</script>

在上面的代码中，我们使用@click绑定了一个点击事件处理函数handleClick，在点击按钮时会触发该函数，并在控制台输出Button clicked!。

vue3中的绑定事件修饰符

除了上面的事件绑定方式，Vue3还提供了一些修饰符，用于处理事件的行为。以下是一些常用的事件修饰符：

  • .prevent：阻止默认事件行为
  • .stop：阻止事件冒泡
  • .capture：使用事件捕获模式，即从父组件到子组件的顺序触发事件
  • .self：只有在事件发生在该元素本身时才触发事件处理函数
  • .once：只触发一次事件处理函数

以下是一个示例，展示如何使用修饰符来阻止默认事件行为：

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="inputValue">
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')

const handleSubmit = (event) => {
  console.log('Form submitted!')
}
</script>

在上面的代码中，我们使用.prevent修饰符来阻止表单的默认提交事件，而是使用自定义的handleSubmit函数来处理表单提交事件。

vue3中如何自定义事件

在Vue3中，组件可以通过使用$emit方法来触发自定义事件，使用$on方法来监听自定义事件。

以下是一个简单的示例，展示如何在子组件中触发自定义事件，并在父组件中监听该事件：

// Child.vue
<template>
  <button @click="handleClick">Click me!</button>
</template>

<script setup>
import { defineEmits } from 'vue'

const emits = defineEmits(['my-event'])

const handleClick = (event) => {
  emits('my-event', 'Hello World')
}
</script>

// Parent.vue
<template>
  <child @my-event="handleMyEvent"></child>
</template>

<script setup>
const handleMyEvent = (data) => {
  console.log(data) // 输出：Hello World
}
</script>

在上面的代码中，我们在Child组件中使用了defineEmits来声明了一个自定义事件my-event，然后在点击按钮时使用emits方法触发该事件，并传递了一个字符串Hello World。在Parent组件中，我们使用@my-event来监听该事件，并在回调函数中输出了传递的数据。

自定义事件和普通事件一样，可以带有修饰符，例如.prevent、.stop等修饰符。

指令

vue3中的内置指令

在Vue3中，指令是用于操作DOM元素的特殊属性。指令以v-开头，后面跟着指令的名称。在指令中，可以使用表达式和变量来操作DOM元素。

以下是一些常用的Vue3内置指令：

  • v-bind：用于动态绑定HTML属性和DOM属性，一般使用:符号代替。
  • v-if / v-else / v-else-if：用于根据条件渲染DOM元素。
  • v-for：用于循环渲染DOM元素。
  • v-on / @：用于绑定事件处理函数，也可以通过@来绑定事件。
  • v-model：用于双向绑定表单元素和组件。
  • v-show：用于根据条件显示或隐藏DOM元素。
  • v-text：用于设置元素的文本内容。
  • v-html：用于设置元素的HTML内容。
  • v-cloak：用于在Vue3实例完成编译前隐藏元素。

以上指令在Vue3中非常常用，可以帮助你更加方便地操作DOM元素和数据。

如何自定义指令

在Vue3中，除了使用内置指令，也可以使用directive函数来自定义指令。该函数接受两个参数：指令名称和一个对象，该对象包含指令的钩子函数。

1、全局注册指令：

在Vue3中，我们可以通过app.directive的形式，来全局注册指令，比如我们注册一个v-focus的质量，可以在应用程序的入口文件中使用app.directive方法来定义该指令，如下所示：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

2、组件内注册指令：

在vue3中，可以在<script setup>中自定义指令，以下是一个简单的Vue3自定义指令的示例：

<template>
  <div v-my-directive>Custom directive</div>
</template>

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

3、如果是使用选项式，则自定义指令需要在directives选项中注册。同上一个例子：

<template>
  <input v-focus />
</template>

<script>
export default{
  setup() {},
  directives: {
    // 指令名
    focus: {
      // 生命周期
      mounted(el) {
        // 处理DOM的逻辑
        el.focus();
      },
    }
  }
}
</script>

指令的生命周期函数（钩子函数）有哪些

Vue3中的指令钩子和Vue组件生命周期类似，主要包括以下几个：

  • created：在绑定元素的 attribute 前或事件监听器应用前调用
  • beforeMount：在元素被插入到 DOM 前调用
  • mounted：在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
  • beforeUpdate：在组件更新之前调用，此时DOM节点尚未重新渲染。
  • updated：在组件更新之后调用，此时DOM节点已经重新渲染。
  • beforeUnmount：在组件卸载之前调用，此时组件实例还未销毁。
  • unmounted：在组件卸载之后调用，此时组件实例已经销毁，不再有任何数据和方法可以访问。

在自定义指令时，可以使用这些钩子函数来执行一些特定的任务，例如在组件更新后进行异步数据的获取和处理等。

指令的钩子函数的参数有哪些

Vue3中自定义指令所有的钩子函数都包含了以下四个参数：

  • el：指令所绑定的元素，可以使用el来直接操作DOM元素。
  • binding：一个对象，包含以下属性：
    • name：指令的名称，不包括v-前缀。
    • value：指令的绑定值，可以是表达式或变量。
    • oldValue：指令的旧绑定值。
    • expression：指令的绑定表达式，例如v-my-directive="foo + bar"中的foo + bar。
    • arg：指令的参数，例如v-my-directive:foo中的foo。
    • modifiers：一个对象，包含指令的修饰符，例如v-my-directive.foo.bar中的.foo和.bar。
  • vnode：Vue3编译生成的虚拟节点。
  • prevVnode：上一个虚拟节点，仅在updated钩子函数中可用。

注意：以上参数都是可选的，可以只使用需要的参数。

什么是插槽

在Vue3中，slot是一种特殊的元素，用于在组件的模板中插入内容。slot可以接收任意类型的内容，包括文本、HTML标记、Vue组件等。

基本用法

以下是一个简单的Vue3组件中使用slot的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

<script setup>
const title = 'Hello World'
</script>

在上面的代码中，我们在组件模板中使用了slot元素，用来插入任意类型的内容。在使用该组件时，可以在组件标签中插入内容，例如：

<my-component>
  <p>Hello World</p>
</my-component>

在上面的代码中，我们在my-component标签中插入了一个<p>元素，该元素将会出现在组件模板中的slot元素处。

具名插槽

在Vue3中，slot还支持具名插槽，用于处理多个插槽的情况。以下是一个具名插槽的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script setup>
const title = 'Hello World'
</script>

在上面的代码中，我们定义了两个具名插槽content和footer，用于分别插入内容和页脚。在使用该组件时，可以使用v-slot指令来插入具名插槽的内容，例如：

<my-component>
  <template v-slot:content>
    <p>Hello World</p>
  </template>
  <template v-slot:footer>
    <p>Footer</p>
  </template>
</my-component>

在上面的代码中，我们使用v-slot指令来插入具名插槽的内容，可以使用<template>元素来定义插槽的内容。

除了上面的用法，我们还可以使用#来代替v-slot使用具名插槽的简写，代码示例如下：

<my-component>
  <template #content>
    <p>Hello World</p>
  </template>
  <template #footer>
    <p>Footer</p>
  </template>
</my-component>

作用域插槽

在Vue3中，slot还支持作用域插槽，用于向插槽中传递数据。以下是一个作用域插槽的示例：

<template>
  <div>
    <slot v-bind:user="user">
      {{ user.name }}
    </slot>
  </div>
</template>

<script setup>
const user = {
  name: 'Alice',
  age: 18
}
</script>

在上面的代码中，我们使用了v-bind指令来向插槽中传递user对象，然后在插槽中使用了{{ user.name }}来显示用户的名字。

在使用该组件时，可以使用v-slot指令来定义插槽的内容，并使用slot-scope属性来接收传递的user对象，例如：

<my-component>
  <template v-slot:default="slotProps">
    <p>Hello, {{ slotProps.user.name }}</p>
  </template>
</my-component>

总结

本文主要讲了如何创建一个vue3应用，以及vue3的组件、props传参、事件监听、自定义指令以及插槽等相关基础概念，下一篇将会介绍vue3的一下常用API，未完待续。

avatar
文章
阅读
粉丝