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

创建一个基本的Vue应用

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

createApp(App).mount('#app');
1
2
3
4

在Vue组件中使用数据绑定

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

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

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

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

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('');

    const updateMessage = (newMessage: string) => {
      message.value = newMessage;
    };

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <input v-model="inputMessage" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const inputMessage = ref('');

    const sendMessage = () => {
      emit('updateMessage', inputMessage.value);
    };

    return {
      inputMessage,
      sendMessage
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在Vue组件中使用组件通信（兄弟组件通信）

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

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

export default defineComponent({
  components: {
    ChildComponent1,
    ChildComponent2
  },
  setup() {
    const message = ref('');

    const updateMessage = (newMessage: string) => {
      message.value = newMessage;
    };

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

<!-- ChildComponent1.vue -->
<template>
  <div>
    <input v-model="inputMessage" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

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

    const sendMessage = () => {
      emit('updateMessage', inputMessage.value);
    };

    return {
      inputMessage,
      sendMessage
    };
  }
});
</script>

<!-- ChildComponent2.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

在Vue组件中使用路由

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在Vue组件中使用状态管理（Vuex）

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      counter: 0
    };
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  },
  actions: {
    incrementCounter({ commit }) {
      commit('increment');
    }
  },
  getters: {
    counterSquared(state) {
      return state.counter ** 2;
    }
  }
});

export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在Vue组件中使用异步请求（axios）

import axios from 'axios';

const response = await axios.get('/api/data');
const data = response.data;
1
2
3
4

在Vue组件中使用条件样式绑定

<template>
  <div :class="{ 'active': isActive }"></div>
</template>

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

export default defineComponent({
  setup() {
    const isActive = ref(true);

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

<style>
.active {
  background-color: blue;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在Vue组件中使用条件样式绑定（多个样式）

<template>
  <div :class="[isActive ? 'active' : '', isHighlighted ? 'highlighted' : '']"></div>
</template>

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

export default defineComponent({
  setup() {
    const isActive = ref(true);
    const isHighlighted = ref(false);

    return {
      isActive,
      isHighlighted
    };
  }
});
</script>

<style>
.active {
  background-color: blue;
}

.highlighted {
  color: yellow;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在Vue组件中使用条件样式绑定（动态类名）

<template>
  <div :class="className"></div>
</template>

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

export default defineComponent({
  setup() {
    const isActive = ref(true);
    const isHighlighted = ref(false);

    const className = computed(() => {
      let classes = '';

      if (isActive.value) {
        classes += 'active ';
      }

      if (isHighlighted.value) {
        classes += 'highlighted ';
      }

      return classes.trim();
    });

    return {
      isActive,
      isHighlighted,
      className
    };
  }
});
</script>

<style>
.active {
  background-color: blue;
}

.highlighted {
  color: yellow;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在Vue组件中使用条件样式绑定（内联样式）

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
</template>

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

export default defineComponent({
  setup() {
    const textColor = ref('blue');
    const fontSize = ref(16);

    return {
      textColor,
      fontSize
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在Vue组件中使用动画

<template>
  <transition name="fade">
    <div v-if="show">Hello Vue!</div>
  </transition>
</template>

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

export default defineComponent({
  setup() {
    const show = ref(true);

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在Vue组件中使用动态组件

<template>
  <component :is="currentComponent"></component>
</template>

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

export default defineComponent({
  components: {
    ComponentA,
    ComponentB
  },
  setup() {
    const currentComponent = ref('ComponentA');

    return {
      currentComponent
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在Vue组件中使用插槽

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>Header</h1>
      </template>
      <template v-slot:default>
        <p>Content</p>
      </template>
      <template v-slot:footer>
        <footer>Footer</footer>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在Vue组件中使用动态插槽

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:default="slotProps">
        <p>{{ slotProps.message }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在Vue组件中使用混入

const myMixin = {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
};

export default defineComponent({
  mixins: [myMixin]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在Vue组件中使用过滤器

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

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

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

    return {
      message
    };
  },
  filters: {
    uppercase(value: string) {
      return value.toUpperCase();
    }
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在Vue组件中使用自定义指令

<template>
  <div v-my-directive>Custom Directive</div>
</template>

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

export default defineComponent({
  directives: {
    'my-directive': {
      mounted(el: HTMLElement, binding: DirectiveBinding) {
        el.style.color = binding.value;
      }
    }
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在Vue组件中使用懒加载

const Home = defineAsyncComponent(() => import('./views/Home.vue'));
1

在Vue组件中使用错误处理

import { onErrorCaptured } from 'vue';

onErrorCaptured((error, vm, info) => {
  console.error(error, vm, info);
});
1
2
3
4
5

在Vue组件中使用自定义事件

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

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

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

    const incrementCounter = () => {
      counter.value++;
      emit('counter-updated', counter.value);
    };

    return {
      counter,
      incrementCounter
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在Vue组件中使用渲染函数

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

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

export default defineComponent({
  setup() {
    const message = 'Hello Vue!';

    return {
      message
    };
  },
  render() {
    return h('div', this.message);
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在Vue组件中使用生命周期钩子

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

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

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

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

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      message
    };
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在Vue组件中使用依赖注入

const MyPlugin = {
  install(app) {
    app.provide('myService', {
      message: 'Hello Vue!'
    });
  }
};

createApp(App).use(MyPlugin).mount('#app');
1
2
3
4
5
6
7
8
9

在Vue组件中使用单元测试

import { shallowMount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.html()).toContain('Hello Vue!');
  });
});
1
2
3
4
5
6
7
8
9

相关阅读:
互联网公司员工职级、研发效能度量、OKR与绩效考核
 全套办公软件Office 2019 mac专业版功能
 四、【React-Router6】高亮 NavLink
【Linux】信号简介与触发信号的几种方式
 Vue中组件化编码使用（实战练习一）
java毕业设计疫情防控信息管理系统Mybatis+系统+数据库+调试部署
 解决TensorRT加速推理SDXL出现黑图问题
 LeetCode(力扣)968. 监控二叉树Python
隐藏饼图的legend，重写legend列表。
怎么减少行锁对性能的影响？
原文地址：https://blog.csdn.net/qq_45914628/article/details/136159083