Vue入门必备：轻松掌握data调用本地JSON数据的技巧

在Vue.js中，data函数是组件的核心，它用于定义组件的数据模型。数据模型是组件状态的基础，也是实现数据双向绑定和响应式的基础。本文将详细介绍如何在Vue组件中使用data函数调用本地的JSON数据，帮助Vue入门者轻松掌握这一技巧。

引言

在Vue CLI脚手架中，每个组件的data选项必须是一个函数，这是为了保证每个组件实例都维护独立的一份数据对象。每次创建新的组件实例时，都会新执行一次data函数，得到一个新对象。这种设计类似于Java后端开发中面向对象的概念。

示例代码

工程结构图

src/
|-- components/
|   |-- App.vue
|   |-- BaseCount.vue
|-- data/
|   |-- advertising.json
|-- main.js

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).mount('#app')

App.vue

<template>
  <div class="App">
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components: {
    BaseCount
  }
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

BaseCount.vue

<template>
  <div class="base-count">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 组件数据
    }
  }
}
</script>

<style>
/* 组件样式 */
</style>

data/advertising.json

{
  "advertising": [
    {
      "title": "广告一",
      "content": "这里是广告内容一"
    },
    {
      "title": "广告二",
      "content": "这里是广告内容二"
    }
  ]
}

调用本地JSON数据

在Vue组件中，可以通过以下几种方式调用本地JSON数据：

1. 使用ES6的import引入

import jsonData from './data/advertising.json'

export default {
  data() {
    return {
      advertising: jsonData.advertising
    }
  }
}

1. 使用require引入

const jsonData = require('./data/advertising.json')

export default {
  data() {
    return {
      advertising: jsonData.advertising
    }
  }
}

1. 使用axios请求

import axios from 'axios'

export default {
  data() {
    return {
      advertising: []
    }
  },
  mounted() {
    axios.get('/data/advertising.json').then(response => {
      this.advertising = response.data.advertising
    })
  }
}

总结

本文介绍了如何在Vue组件中使用data函数调用本地JSON数据。通过ES6的import、require或axios请求，可以方便地获取并使用本地JSON数据。掌握这些技巧，可以帮助Vue入门者更好地理解和应用Vue的数据绑定和响应式特性。