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
事件。