使用vue2.0开发,在public文件夹下的index.html使用$.ajax获取数据,怎么在.vue文件中使用,不用缓存
时间: 2024-03-05 13:52:42 浏览: 151
一个完整的使用vue2.0、vue-cli3.0、iView3.0包含前后端的项目.zip
在Vue.js中使用数据请求,可以使用Vue.js提供的Axios库来完成。Axios是一个基于Promise的HTTP客户端,可以用于浏览器和node.js中。它支持所有现代浏览器,包括IE8+,并且可以使用ES6的语法。
下面是一个简单的Vue.js组件,演示如何使用Axios在.vue文件中获取数据:
```
<template>
<div>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
items: []
}
},
mounted () {
this.getData()
},
methods: {
getData () {
axios.get('/api/data').then(response => {
this.items = response.data
}).catch(error => {
console.log(error)
})
}
}
}
</script>
```
在这个组件中,我们引入了Axios库,并在mounted钩子中调用了getData方法。在getData方法中使用Axios发起了一次GET请求,请求的地址是'/api/data'。请求成功后,将返回的数据赋值给组件的items数组,最终在模板中渲染出来。
注意,在使用Axios时,需要注意跨域问题,如果请求的地址和当前页面不在同一个域名下,需要在服务端添加允许跨域访问的设置。同时,为了避免缓存的问题,可以在请求地址中添加时间戳或随机数参数,确保每次请求地址都不同。
阅读全文