当前位置：首页 > VUE

黑马vue实现

2026-03-28 01:05:50VUE

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 示例：

黑马vue实现

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)
    }
  }
}