vue从入门到进阶的30个vue代码示例

全文链接

1. 创建一个基本的Vue应用

import {
    createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

2. 在Vue组件中使用数据绑定

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

<script lang="ts">
import {
    defineComponent } from 'vue';

export default defineComponent({
   
  data() {
   
    return {
   
      message: 'Hello Vue!'
    };
  }
});
</script>

3. 在Vue组件中使用计算属性

<template>
  <div>{
   {
    reversedMessage }}</div>
</template>

<script lang="ts">
import {
    defineComponent, computed } from 'vue';

export default defineComponent({
   
  data() {
   
    return {
   
      message: 'Hello Vue!'
    };
  },
  computed: {
   
    reversedMessage() {
   
      return this.message.split('').reverse().join('');
    }
  }
});
</script>

4. 在Vue组件中使用条件渲染

<template>
  <div v-if="showMessage">{
   {
    message }}</div>
</template>

<script lang="ts">
import {
    defineComponent } from 'vue';

export default defineComponent({
   
  data() {
   
    return {
   
      message: 'Hello Vue!',
      showMessage: true
    };
  }
});
</script>

5. 在Vue组件中使用列表渲染

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

<script lang="ts">
import {
    defineComponent } from 'vue';

export default defineComponent({
   
  data() {
   
    return {
   
      items: [
        {
    id: 1, name: 'Item 1' },
        {
    id: 2, name: 'Item 2' },
        {
    id: 3, name: 'Item 3' }
      ]
    };
  }
});
</script>

6. 在Vue组件中使用事件处理

<template>
  <button @click="incrementCounter">{
   {
    counter }}</button>
</template>

<script lang="ts">
import {
    defineComponent, ref } from 'vue';

export default defineComponent({
   
  setup() {
   
    const counter = ref(0);

    const incrementCounter = () => {
   
      counter.value++;
    };

    return {
   
      counter,
      incrementCounter
    };
  }
});
</script>

7. 在Vue组件中使用表单绑定

<template>
  <input v-model="message" />
</template>

<script lang="ts">
import {
    defineComponent, ref } from 'vue';

export default defineComponent({
   
  setup() {
   
    const message = ref('');

    return {
   
      message
    };
  }
});
</script>

8. 在Vue组件中使用组件通信（父子组件通信）

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="message" @updateMessage="updateMessage" />
  </div>
</template>

<script lang="ts">