vue实现代码实例

Vue 实现代码实例

以下是一些常见的 Vue 实现代码实例，涵盖基础语法、组件通信、状态管理等场景。

基础 Vue 实例

创建一个简单的 Vue 实例，绑定数据到模板：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message Changed!'
    }
  }
}
</script>

组件通信（父子组件）

父组件向子组件传递数据：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :message="parentMessage" @notify="handleNotify" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Message from parent'
    }
  },
  methods: {
    handleNotify(payload) {
      console.log('Received from child:', payload)
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendToParent() {
      this.$emit('notify', { data: 'Hello from child' })
    }
  }
}
</script>

Vuex 状态管理

使用 Vuex 管理全局状态：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

// Component.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>

Vue Router 实现路由

配置基本路由：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

// App.vue
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

表单双向绑定

实现表单数据的双向绑定：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="form.name" placeholder="Name">
      <input v-model="form.email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted:', this.form)
    }
  }
}
</script>

这些实例涵盖了 Vue 开发中的常见场景，可以根据实际需求进行调整和扩展。