Vue3 快速入门

使用 Vite 快速搭建 Vue 3 项目

1. 创建项目：

   npm create vite@latest my-vue-app --template vue
   cd my-vue-app
   npm install
   npm run dev

2. 目录结构：

   • src/: 主代码目录
   • main.js: 应用入口文件

Setup 语法糖与响应式对象

在 Vue 3 的 <script setup> 中，ref 和 reactive 是核心的响应式 API：

• ref: 用于定义单个值的响应式数据。

  <script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
  
  const increment = () => {
    count.value++;
  };
  </script>
  
  <template>
    <button @click="increment">{{ count }}</button>
  </template>

  注意：访问或更新 ref 的值需要通过 .value。

• reactive: 用于定义复杂对象的响应式数据。

  <script setup>
  import { reactive } from 'vue';
  
  const state = reactive({
    count: 0,
    message: 'Hello Vue 3'
  });
  
  const increment = () => {
    state.count++;
  };
  </script>
  
  <template>
    <button @click="increment">{{ state.count }} - {{ state.message }}</button>
  </template>

  注意：reactive 不需要 .value，直接操作对象属性即可。

区别

• ref 更适合简单的标量值。
• reactive 更适合复杂的嵌套对象。

常用指令

条件与循环

• v-if 和 v-else: 条件渲染。

  <template>
    <p v-if="isLoggedIn">欢迎回来！</p>
    <p v-else>请登录</p>
  </template>

• v-show: 控制元素显示。

  <template>
    <p v-show="isVisible">这是一条可见信息</p>
  </template>

• v-for: 列表渲染。

  <script setup>
  const items = [1, 2, 3, 4];
  </script>
  
  <template>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </template>

事件绑定

• @click: 点击事件。

  <template>
    <button @click="handleClick">点击我</button>
  </template>
  
  <script setup>
  const handleClick = () => {
    alert('按钮被点击了！');
  };
  </script>

• @input 和 v-model: 双向绑定。

  <template>
    <input v-model="text" />
    <p>{{ text }}</p>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const text = ref('');
  </script>

• @mouseenter 和 @mouseleave: 鼠标事件。

  <template>
    <div @mouseenter="onHover" @mouseleave="onLeave">悬停我！</div>
  </template>
  
  <script setup>
  const onHover = () => {
    console.log('鼠标进入');
  };
  
  const onLeave = () => {
    console.log('鼠标离开');
  };
  </script>

属性绑定

• v-bind: 动态绑定属性。

  <template>
    <img :src="imageUrl" alt="动态图片" />
  </template>
  
  <script setup>
  const imageUrl = 'https://example.com/image.jpg';
  </script>

• v-once: 一次性渲染。

  <template>
    <p v-once>{{ message }}</p>
  </template>
  
  <script setup>
  const message = '这段文字只渲染一次';
  </script>

自定义组件

子组件

定义一个简单的按钮组件：

<script setup>
import { defineProps } from 'vue';

defineProps({
  label: String
});
</script>

<template>
  <button>{{ label }}</button>
</template>

父组件

父组件传递 label 属性：

<script setup>
import MyButton from './MyButton.vue';
</script>

<template>
  <MyButton label="Click Me" />
</template>

父子组件数据传递

父传子

通过 props 传递数据：

<!-- 子组件 -->
<script setup>
import { defineProps } from 'vue';

defineProps({ message: String });
</script>

<template>
  <p>{{ message }}</p>
</template>

<!-- 父组件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<template>
  <ChildComponent message="Hello from Parent" />
</template>

子传父

通过 emit 通知父组件：

<!-- 子组件 -->
<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateMessage']);

const notifyParent = () => {
  emit('updateMessage', 'Message from Child');
};
</script>

<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<!-- 父组件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';

const handleUpdateMessage = (message) => {
  console.log(message);
};
</script>

<template>
  <ChildComponent @updateMessage="handleUpdateMessage" />
</template>