🎬 HoRain云小助手：个人主页

 🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

---

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

目录

⛳️ 推荐

专栏介绍

1. 创建 Vue 应用

2. 模板语法

3. 响应式数据

4. 条件渲染

5. 列表渲染

6. 事件处理

7. 表单输入绑定

8. 计算属性

9. 监听器

10. 组件基础

11. 生命周期钩子

12. Style 和 Class 绑定

总结

---

Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架，它引入了组合式 API（Composition API）等新特性，同时保留了选项式 API（Options API）的支持。以下是 Vue 3 的一些基础语法和核心概念。

1. 创建 Vue 应用

使用 createApp 方法创建应用实例，并挂载到 DOM 元素上。

import { createApp } from 'vue'
const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})
app.mount('#app')

2. 模板语法

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

• ​​文本插值​​：使用双大括号 {{ }}。

  <div>{{ message }}</div>

• ​​原始 HTML​​：使用 v-html 指令输出真正的 HTML 内容。

  <div v-html="rawHtml"></div>

• ​​属性绑定​​：使用 v-bind 或简写 : 动态绑定属性。

  <img :src="imageSrc" alt="Image">

• ​​JavaScript 表达式​​：在插值和指令中使用 JavaScript 表达式。

  <div>{{ number + 1 }}</div>
  <div :id="`list-${id}`"></div>

3. 响应式数据

Vue 3 提供了 ref 和 reactive 来创建响应式数据。

• ​​ref​​：用于基本数据类型。

  import { ref } from 'vue'
  const count = ref(0)
  console.log(count.value) // 访问值

• ​​reactive​​：用于对象或数组。

  import { reactive } from 'vue'
  const state = reactive({ count: 0 })
  console.log(state.count) // 访问属性

4. 条件渲染

使用 v-if、v-else-if、v-else 和 v-show 进行条件渲染。

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Other Type</div>
<div v-show="isVisible">Visible</div>

5. 列表渲染

使用 v-for 渲染列表。

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>

6. 事件处理

使用 v-on 或简写 @ 监听事件。

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

事件修饰符（如 .stop、.prevent）用于处理事件细节。

<button @click.stop="handleClick">Stop Propagation</button>
<form @submit.prevent="handleSubmit">Submit</form>

7. 表单输入绑定

使用 v-model 实现表单输入的双向绑定。

<input v-model="message" type="text">
<p>{{ message }}</p>

8. 计算属性

使用 computed 创建依赖其他属性的计算属性。

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

9. 监听器

使用 watch 或 watchEffect 响应数据变化。

import { watch, ref } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
})

10. 组件基础

组件是 Vue 应用的基本构建块。使用 defineProps 和 defineEmits 进行组件通信。

<!-- ChildComponent.vue -->
<template>
  <button @click="emit('increment')">Add</button>
</template>
<script setup>
defineProps(['count'])
const emit = defineEmits(['increment'])
</script>

11. 生命周期钩子

Vue 3 提供了生命周期钩子，如 onMounted、onUpdated 等。

import { onMounted, ref } from 'vue'
const count = ref(0)
onMounted(() => {
  console.log('Component mounted')
})

12. Style 和 Class 绑定

使用 :class 和 :style 动态绑定样式和类。

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

总结

Vue 3 的基础语法包括模板语法、响应式数据、条件与列表渲染、事件处理、表单绑定、计算属性与监听器、组件基础等。组合式 API 提供了更灵活的代码组织方式，特别适合复杂组件逻辑的复用和维护。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙