Vue 3 语法和特性

基本语法

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated Message';
    }
  }
};
</script>

指令

v-bind 绑定属性

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

v-model 双向绑定

<input v-model="message">

v-for 循环

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

v-if 和 v-else 条件渲染

<div v-if="isVisible">Visible</div>
<div v-else>Hidden</div>

v-show 条件显示

<p v-show="isVisible">This is shown/hidden</p>

生命周期钩子

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Before Mount');
    });

    onMounted(() => {
      console.log('Mounted');
    });

    onBeforeUpdate(() => {
      console.log('Before Update');
    });

    onUpdated(() => {
      console.log('Updated');
    });

    onBeforeUnmount(() => {
      console.log('Before Unmount');
    });

    onUnmounted(() => {
      console.log('Unmounted');
    });
  }
};
</script>

组件

父子组件通信
子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  methods: {
    sendToParent() {
      this.$emit('custom-event', 'Data sent to parent');
    }
  }
});
</script>

父组件：

<template>
  <child-component @custom-event="handleChildEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data);
    }
  }
};
</script>

插槽（Slots）

在这里插入代<template>
  <div>
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

使用插槽

<my-component>
  <template #header>
    <h1>Custom Header</h1>
  </template>
  <p>Main Content</p>
  <template #footer>
    <p>Custom Footer</p>
  </template>
</my-component>

响应式数据

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    
    const user = reactive({
      name: 'John',
      age: 25
    });

    return {
      message,
      user
    };
  }
};
</script>

路由（Vue Router）
定义路由

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('./views/About.vue') }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

使用路由

<template>
  <router-view></router-view>
</template>