vue：ajax与框架搭建

最新推荐文章于 2022-09-23 22:15:22 发布

船长㉿

最新推荐文章于 2022-09-23 22:15:22 发布

阅读量498

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43647163/article/details/86365660

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

#1、通过脚手架搭建vue项目：

a、全局安装

npm install -g @vue/cli

b、创建项目

vue create projectName

#2、组件的应用

a、创建一个组件文件(后缀名为.vue)文件

b、通过import引入

c、通过components注册组件

d、用上一个步骤创建的组件名引入到页面(组件名当标签用)

#3、ajax请求

a、通过插件axios进行异步请求

安装：npm install axios --save

用法：

1、通过import引入axios

2、直接调用

语法：axios.get(url)

.then(callback(success))成功请求

.catch(callback(err))捕捉错误的请求

get请求需要传递参数的话可以通过？将参数拼接到url后面

axios.psot(url,data)

.then(callback(success))

.catch(callback(err))

psot请求：

data：表示传递的参数，数据类型为对象

b、跨域请求

通过jsonp插件进行请求

用法：

1、通过import引入jsonp

2、直接调用

语法：

jsonp(url，data，callback(err,success))

url:请求的地址

data：发送的数据，数据类型是一个对象。

callback(err,success)：回调函数

err：捕获错误信息

success：捕获成功的数据

  <div class="home">
    <h1 @click="getData">点击我获取数据</h1>
    <h2 v-text="Name"></h2>
  </div>

import axios from 'axios'
import jsonp from 'jsonp'
export default {
 name: 'home',
 components: {
   HelloWorld
 },
 data:function(){
 	return {
 		list:[],
 		Name:""
 	}
 },
created:function(){//数据请求
   var that = this;
 	axios.get("https://easy-mock.com/mock/5b712abe3ec6e13ce517da93/Ranking/rankingList")
 				.then(function(res){
 					console.log(res)
 					console.log(that)
 					that.list = res.data.data.result;
 					console.log(that.list)
 					that.Name=(that.list)[0].name
 				})
 				.catch(function(err){//请求失败是时候会出现err
 					console.log(err)
 				})
 	jsonp("http://api.douban.com/v2/movie/top250?start=1&count=10",null,function(err,res){
 		if(!err){
 			console.log(res)
 		}else{
 			console.log(err)
 		}
 	})
},
methods:{
	getData(){
		console.log(this.list);
	}
}
}