Vue3 基础语法 5

Vue3 是一个响应式的前端框架，旨在帮助开发者更好地构建用户界面。下面是 Vue3 的基础语法教程，包括组件、模板、数据绑定、方法和生命周期等方面。

1. 创建 Vue3 项目

首先，我们需要创建一个 Vue3 项目。使用 Vue CLI，输入以下命令：

vue create my-vue3-app

选择 Vue 3.x 作为框架，然后安装依赖项。

2. Vue3 组件

Vue3 组件是一个小的、独立的代码块，用于构建用户界面。组件可以包含 HTML、CSS 和 JavaScript 代码。

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

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World',
      message: 'This is a Vue3 component'
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为 MyComponent 的组件。组件包含一个模板（<template>）和一个脚本（<script>）。模板中，我们使用双花括号 {{ }} 将数据绑定到 HTML 中。脚本中，我们定义了一个 data 方法，返回一个对象，其中包含组件的初始数据。

3. 模板

Vue3 模板使用 HTML 语法，用于定义组件的结构和内容。模板可以包含以下几种类型的元素：

• HTML 元素，例如 <div>, <h1>, <p>
• Vue3 指令，例如 v-bind, v-on, v-model
• Vue3 语法，例如 {{ }}, v-if, v-else

以下是一个使用 Vue3 模板的示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1 v-if="title">Hello {{ title }}!</h1>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'World',
      message: 'This is a Vue3 component'
    }
  }
}
</script>

在上面的代码中，我们使用 v-if 指令来条件渲染 <h1> 和 <p> 元素。v-if 指令将根据组件的数据来决定是否渲染元素。

4. 数据绑定

Vue3 使用数据绑定来将组件的数据与 HTML 元素关联起来。在 Vue3 中，我们可以使用以下几种类型的数据绑定：

• 双花括号 {{ }}：将数据绑定到 HTML 元素的内容中
• v-bind：将数据绑定到 HTML 元素的属性中
• v-on：将数据绑定到 HTML 元素的事件处理函数中

以下是一个使用数据绑定的示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p v-bind:title="message">This is a Vue3 component</p>
    <button v-on:click="handleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'World',
      message: 'This is a Vue3 component'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

在上面的代码中，我们使用双花括号 {{ }} 将 title 数据绑定到 <h1> 元素的内容中。我们使用 v-bind 将 message 数据绑定到 <p> 元素的 title 属性中。我们使用 v-on 将 handleClick 方法绑定到 <button> 元素的 click 事件处理函数中。

5. 方法

Vue3 组件可以包含方法，用于处理用户交互或执行其他任务。方法可以在组件的 methods 对象中定义。

以下是一个使用方法的示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'World',
      message: 'This is a Vue3 component'
    }
  },
  methods: {
    handleClick() {
      this.title = 'Hello!'
      this.message = 'You clicked the button!'
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为 handleClick 的方法，该方法将在 <button> 元素被点击时执行。方法中，我们使用 this 关键字来访问组件的数据对象，并将 title 和 message 数据更新为新的值。

6. 生命周期

Vue3 组件有多个生命周期钩子，用于在组件的不同阶段执行代码。生命周期钩子可以在组件的 setup 函数中定义。

以下是一个使用生命周期钩子的示例：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    console.log('Component created!')
  },
  mounted() {
    console.log('Component mounted!')
  },
  updated() {
    console.log('Component updated!')
  }
}
</script>

在上面的代码中，我们定义了三个生命周期钩子：setup、mounted 和 updated。setup 钩子在组件创建时执行，mounted 钩子在组件挂载到 DOM 中时执行，updated 钩子在组件数据更新时执行。

7. 组件间通信

Vue3 组件可以使用 props 和 events 来通信。 props 是一种将数据从父组件传递到子组件的方式。 events 是一种将数据从子组件传递到父组件的方式。

以下是一个使用 props 的示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :title="title" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

在上面的代码中，我们在父组件中定义了一个名为 title 的数据，然后将其传递给子组件作为 props。子组件中，我们使用 title props 来渲染 <h1> 元素。

以下是一个使用 events 的示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @click="handleClick" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="$emit('click')">Click me!</button>
  </div>
</template>

<script>
export default {
  emits: ['click']
}
</script>

在上面的代码中，我们在父组件中定义了一个名为 handleClick 的方法，然后将其绑定到子组件的 click 事件处理函数中。子组件中，我们使用 $emit 方法来触发 click 事件，父组件中，我们使用 @click 指令来监听 click 事件。