. 在组件中使用axios获取数据

1. 安装和配置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/>'
});

2.在组件中使用axios获取数据

新建子组件GetWeather.vue文件

前提是将GetWeather注册到App.vue下

<template>
<div id="GetWeather">
<input type="text" v-model="city" placeholder="请输入要查询的城市">
<button @click="get_weather">获取天气</button>
<p>{{weather_info}}</p>
<hr>
<div v-for="k,v in weather_info.data">
<p>{{v}}:{{k}}</p>
</div>
</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;
}).catch(error => {
console.log(error.response)
})
}
} }
</script> <style scoped> </style>

GetWeather.vue

效果如下:

本质上来说,我们还是原来的axios,所以也还会受到同源策略的影响。

二.项目搭建vue-router与element-UI

1. 新建一个vue项目

vue init webpack 项目名

根据需要在生成项目时,我们选择对应的选项。

根据上面的提示,我们已经把vue项目构建好了,接下来我们可以在pycharm编辑器中把项目打开并根据上面黄色提示,运行测试服务器。

2. 初始化项目

清除默认的Helloworld.vue组件和App.vue中的默认模板代码和默认样式。

修改后的效果:

接下来查看效果就是一张白纸。

3. 安装路由vue-router

(1)下载路由组件

npm i vue-router -S

执行效果:

(2)配置路由

在src目录下创建router路由目录,在router目录下创建index.js路由文件

router/index.js路由文件中,编写初始化路由对象的代码:

// 引入路由类和Vue类
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home"
// 注册路由类
Vue.use(Router); // 初始化路由对象
export default new Router({
// 设置路由模式为‘history’,去掉默认的#
mode: "history",
routes: [ // 相当于django的urls.py 下的 urlpatterns
// 路由列表
// { // 一个字典,代表一条url
// name: "路由别名",
// path: "路由地址",
// component: 组件类名,
// },
{
name: "Home",
path: "/",
component: Home,
},
{
name: "Home",
path: "/home",
component: Home,
}
]
})

index.js

打开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' // elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI); Vue.config.productionTip = false; /* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
components: {App},
template: '<App/>' });

main.js

(3)在视图中显示路由对应的内容

在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里面注册路由对象。

4.引入ElementUI

对于前端页面布局,我们可以使用一些开源的UI框架来配合开发,Vue开发前端项目中,比较常用的就是ElementUI了。

ElementUI是饿了么团队开发的一个UI组件框架,这个框架提前帮我们提供了很多已经写好的通用模块,我们可以在Vue项目中引入来使用,这个框架的使用类似于我们前面学习的bootstrap框架,也就是说,我们完全可以把官方文档中的组件代码拿来就用,有定制性的内容,可以直接通过样式进行覆盖修改就可以了。

中文官网:http://element-cn.eleme.io/#/zh-CN

文档快速入门:http://element-cn.eleme.io/#/zh-CN/component/quickstart

(1)快速安装ElementUI

在项目的根目录下执行下面的命令。

npm i element-ui -S

上面的代码等同于:npm install element-ui --save

执行命令效果:

(2) 配置ElementUI到项目中

在main.js中导入ElementUI,并调用。代码:

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);

mian.js

效果:

这样就成功引入了ElementUI。

vue 之 axios Vue路由与element-UI的更多相关文章

  1. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  2. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  3. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  4. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  5. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  6. FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  7. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. Vue + Element UI 实现权限管理系统(搭建开发环境)

    技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

  9. Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境

    技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

随机推荐

  1. 【StarUML】时序图

    时序图是可视化地展示对象与对象之间的联系的图,与其他的图相比,它跟侧重于表现为了完成一个用例,对象之间是怎么协同工作的. 之前学习的组件图.用例图都能表现对象之间的联系,侧重的是"有哪些联系 ...

  2. 搭建 VUE + NODE.JS + ElementUI 学习过程中问题总结

    1.exports 和 module.exports require 用来加载代码,而 exports 和 module.exports 则用来导出代码. module.exports 初始值为一个空 ...

  3. winform datagridview 同步滚动

    //首先添加 Scroll事件//同步滚动 private void dgYY_Scroll(object sender, ScrollEventArgs e) { ) { dgFee.FirstDi ...

  4. 题解 P1717 【钓鱼】

    P1717 钓鱼 贪心+堆的方法其他题解已经讲的很清楚了,这里放出萌新简洁的dp做法,如果有正确性问题希望大佬能够指出qwq #include<cstdio> using namespac ...

  5. mybatis - mapper.java 的创建

    一. Mapper.java 创建过程 在前面注册 bean 的时候, 对beanClass 进行了替换, 为 MapperFactoryBean. 那么创建实例的时候, 会调用 MapperFact ...

  6. css3的一些特效

    前段时间有位同事分享了一个网站,里边是一些css3特效,看着挺好,分享一下: [http://daneden.github.io/animate.css/ ] 所有的特效都集中在一个css层叠样式表中 ...

  7. 排序算法大荟萃——希尔(Shell)排序算法

    1.基本思想:先取一个小于n的整数d1作为第一个增量,把文件的全部记录分成d1个组.所有距离为d1的倍数的记录放在同一个组中.先再各族中进行直接插入排序,然后取第二个增量d2<d1重复上述的分组 ...

  8. SaaS paas iaas是什么

    saas:软件即服务,必须对云服务商的定价及合同 条款进行仔细审查保证其安全性,如果存在纠纷云商切断服务话企业可能立马面临困境. paas:平台即服务 iaas :基础架构即服务.

  9. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真(02)

    Silvaco的破解用了好久好久,而且之后拷了上次例子的代码,Tonyplot的输出存在报错,还是四连. 当然这个点一下还是会出图的.但是,源代码稍微改了下结构,又有报错,而且程序直接终止. go a ...

  10. 15 个优秀开源的 Spring Boot 学习项目

    Spring Boot 算是目前 Java 领域最火的技术栈了,松哥年初出版的 <Spring Boot + Vue 全栈开发实战>迄今为止已经加印了 8 次,Spring Boot 的受 ...