黑马vue实现

Vue.js 基础实现步骤

安装 Vue.js 可以通过 CDN 或 npm 方式。对于快速原型开发，CDN 引入更为便捷：

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

使用 npm 安装适合大型项目：

npm install vue@next

创建 Vue 实例

在 HTML 中准备挂载点并初始化应用：

<div id="app">
  {{ message }}
</div>

<script>
  const { createApp } = Vue
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

数据绑定与指令

Vue 提供多种模板语法实现动态渲染：

<div id="bind">
  <span v-bind:title="hoverText">悬停查看动态提示</span>
  <p v-if="seen">条件渲染内容</p>
  <button v-on:click="reverseText">反转文本</button>
  <input v-model="inputText">
</div>

<script>
  createApp({
    data() {
      return {
        hoverText: '页面加载于 ' + new Date().toLocaleString(),
        seen: true,
        inputText: '双向绑定示例'
      }
    },
    methods: {
      reverseText() {
        this.inputText = this.inputText.split('').reverse().join('')
      }
    }
  }).mount('#bind')
</script>

组件化开发

注册并使用自定义组件：

const app = createApp({})

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

app.mount('#todo-list-app')

模板中使用组件：

<div id="todo-list-app">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

<script>
  createApp({
    data() {
      return {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '其他食材' }
        ]
      }
    }
  }).mount('#todo-list-app')
</script>

状态管理（Vuex）

对于复杂状态管理，可引入 Vuex：

npm install vuex@next

创建 store 实例：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在组件中使用：

const app = createApp({ /* 根组件 */ })
app.use(store)

app.component('MyComponent', {
  template: `<div>{{ $store.state.count }}</div>`,
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
})

路由管理（Vue Router）

安装并配置路由：

npm install vue-router@4

路由配置文件示例：

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

const app = createApp({})
app.use(router)
app.mount('#app')

组合式 API

Vue 3 引入 setup 语法：

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const count = ref(0)

      function increment() {
        count.value++
      }

      onMounted(() => {
        console.log('组件挂载完成')
      })

      return {
        count,
        increment
      }
    }
  }
</script>

<template>
  <button @click="increment">点击计数: {{ count }}</button>
</template>

项目脚手架

使用 Vite 创建 Vue 项目：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

或使用 Vue CLI：

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve