文章目录
老师博客地址
组件使用axios发送ajax请求
安装和配置axios
默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装。
在项目根目录中使用 npm安装包
npm install axios
接着在main.js
文件中,导入axios并把axios对象 挂载到vue属性中作为一个子对象,这样我们才能在组件中使用。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import axios from 'axios' // 从node_modules目录中导包
Vue.config.productionTip = false;
Vue.prototype.$axios = axios; // 把对象挂载到Vue中
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
vue3.x新版语法:
import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router,
}).$mount('#app');
在组件中使用axios获取数据
新建子组件GetWeather.vue
文件
<template>
<div>
<input type="text" v-model="city" placeholder="请输入要查询的城市">
<button @click="get_weather">获取天气</button>
<!-- <p>{{weather_info}}</p>-->
<p v-if="weather_info.status!=1000">请输入正确的城市</p>
<table v-if="weather_info.status==1000">
<tr><td colspan="6">{{weather_info.data.city}} 温度:{{weather_info.data.wendu}}</td></tr>
<tr>
<th>日期</th>
<th>最高温</th>
<th>最低温</th>
<th>风向</th>
<th>风级</th>
<th>天气类型</th>
</tr>
<tr>
<td>{{weather_info.data.yesterday.date}}</td>
<td>{{weather_info.data.yesterday.high}}</td>
<td>{{weather_info.data.yesterday.low}}</td>
<td>{{weather_info.data.yesterday.fx}}</td>
<td>{{weather_info.data.yesterday.fl}}</td>
<td>{{weather_info.data.yesterday.type}}</td>
</tr>
<tr v-for="info in weather_info.data.forecast">
<td>{{info.date}}</td>
<td>{{info.high}}</td>
<td>{{info.low}}</td>
<td>{{info.fengxiang}}</td>
<td>{{info.fengli}}</td>
<td>{{info.type}}</td>
</tr>
<tr><td colspan="6">{{weather_info.data.ganmao}}</td></tr>
</table>
</div>
</template>
<script>
export default {
name: "GetWeather",
data(){
return {
city: "",
weather_info: []
}
},
methods: {
get_weather(){
this.$axios.get('http://wthrcdn.etouch.cn/weather_mini',{
params:{
'city': this.city
}
}).then(response=>{
this.weather_info = response.data;
// console.log(typeof(response.data));
}).catch(error=>{
console.log(error.response);
})
}
}
}
</script>
<style scoped>
</style>
效果:
使用路由系统
下载路由组件
npm i vue-router -S
配置路由
在src目录下创建router路由目录,在router目录下创建index.js
路由文件
router/index.js
路由文件中,编写初始化路由对象的代码
// 引入路由类和Vue类
import Vue from 'vue'
import Router from 'vue-router'
// 注册路由类
Vue.use(Router);
// 初始化路由对象
export default new Router({
// 设置路由模式为‘history’,去掉默认的#
model: "history",
routes: [
// 路由列表
{ // 一个字典,代表一条url
// name: "路由别名",
// path: "路由地址",
// component: 组件类名,
}
]
})
打开main.js
文件,把router路由规则对象注册到vue中。
代码:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 注册路由规则对象
components: { App },
template: '<App/>'
});
在视图中显示路由对应的内容
在App.vue
组件中,添加显示路由对应的内容。
代码:
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
注意:如果在vue创建项目的时候,设置安装vue-router,则项目会自动帮我们生成上面的router目录和index.js里面的代码,以及自动到main.js里面注册路由对象。
使用ElementUI
对于前端页面布局,我们可以使用一些开源的UI框架来配合开发,Vue开发前端项目中,比较常用的就是ElementUI了。
我们可以在Vue项目中引入来使用,这个框架的使用类似于我们前面学习的bootstrap框架。
中文官网:http://element-cn.eleme.io/#/zh-CN
文档快速入门:http://element-cn.eleme.io/#/zh-CN/component/quickstart
快速安装ElementUI
在项目的根目录下执行下面的命令。
npm i element-ui -S
上面的代码等同于:npm install element-ui --save
执行效果:
配置ElementUI到项目中
在main.js
中导入ElementUI,并调用。代码:
// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);
效果: