vue 实现代码
以下是一个基础的 Vue.js 实现示例，包含组件化开发、数据绑定和事件处理等核心功能：
基础 Vue 实例
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')单文件组件示例
<!-- App.vue -->
<template>
<div id="app">
<h1>{{ title }}</h1>
<button @click="increment">Count: {{ count }}</button>
<ChildComponent :message="childMessage"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
title: 'Vue Demo',
count: 0,
childMessage: 'Hello from parent'
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
<style scoped>
#app {
font-family: Avenir, sans-serif;
text-align: center;
}
</style>子组件实现
<!-- ChildComponent.vue -->
<template>
<div class="child">
<p>{{ message }}</p>
<p>Reversed: {{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>Vue 3 Composition API 示例
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
Count: {{ count }}, Double: {{ doubleCount }}
</button>
</template>路由配置示例
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
}
]
})状态管理 (Vuex) 示例
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
}
},
actions: {
login({ commit }, credentials) {
return api.login(credentials).then(user => {
commit('setUser', user)
})
}
}
})以上代码展示了 Vue 2.x 和 Vue 3 的核心用法，包括组件通信、状态管理和路由配置等常见场景。实际开发中可根据项目需求选择合适的 API 风格和架构模式。
