黑马vue实现
Vue.js 实现基础步骤
安装 Vue.js 最新稳定版，通过 npm 或 yarn 进行安装：
npm install vue
# 或
yarn add vue创建 Vue 实例，挂载到 DOM 元素上：
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
})
app.mount('#app')组件化开发
单文件组件（.vue 文件）结构示例：
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: '组件示例'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>注册全局组件：
app.component('my-component', {
template: '<div>全局组件</div>'
})核心功能实现
数据绑定：
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>条件渲染：
<div v-if="show">显示内容</div>
<div v-else>其他内容</div>列表渲染：
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>状态管理
Vuex 基础用法：
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})组件中使用：
this.$store.commit('increment')
console.log(this.$store.state.count)路由配置
Vue Router 安装与配置：
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})路由视图与导航：
<router-view/>
<router-link to="/">首页</router-link>生命周期钩子
常用生命周期示例：
export default {
created() {
// 实例创建后调用
},
mounted() {
// DOM挂载后调用
},
updated() {
// 数据更新后调用
}
}API 请求实现
使用 axios 示例：
import axios from 'axios'
export default {
data() {
return {
posts: []
}
},
async created() {
try {
const response = await axios.get('https://api.example.com/posts')
this.posts = response.data
} catch (error) {
console.error(error)
}
}
}
