全文链接
- 创建一个基本的Vue应用
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
- 在Vue组件中使用数据绑定
<template>
<div>{{ message }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
message: 'Hello Vue!'
};
}
});
</script>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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;
- 在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;
- 在Vue组件中使用异步请求(axios)
import axios from 'axios';
const response = await axios.get('/api/data');
const data = response.data;
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在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>
- 在Vue组件中使用混入
const myMixin = {
data() {
return {
message: 'Hello Vue!'
};
},
methods: {
sayHello() {
console.log(this.message);
}
}
};
export default defineComponent({
mixins: [myMixin]
});
- 在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>
- 在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>
- 在Vue组件中使用懒加载
const Home = defineAsyncComponent(() => import('./views/Home.vue'));
- 在Vue组件中使用错误处理
import { onErrorCaptured } from 'vue';
onErrorCaptured((error, vm, info) => {
console.error(error, vm, info);
});
- 在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>
- 在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>
- 在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>
- 在Vue组件中使用依赖注入
const MyPlugin = {
install(app) {
app.provide('myService', {
message: 'Hello Vue!'
});
}
};
createApp(App).use(MyPlugin).mount('#app');
- 在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!');
});
});