. 在组件中使用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. easy-rules

    我们在写业务代码经常遇到需要一大堆if/else,会导致代码可读性大大降低,有没有一种方法可以避免代码中出现大量的判断语句呢?答案是用规则引擎,但是传统的规则引擎都比较重,比如开源的Drools,不适 ...

  2. VIM - EX 命令 - 文件读写

    VIM - EX 命令 - 文件读写 1. 概述 vim 通过 ex 命令行, 与其他文件的读写操作 2. 场景 场景1 vim 打开文本 将当前文本的内容, 写入到其他文本 场景2 vim 打开文本 ...

  3. IDF-CTF-简单的Elf逆向Writeup

    ElfCrackMe1 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !imp ...

  4. 后台接口报500,前端获取报错详情message

    最近和前端对接口的时候,前端说后台接口报500,不能获取里面的东西,然后就开始了这个研究,网上查了一些资料,发现报500里面的报错详情是可以获取的. 前端在调用接口的时候,加个catch,注意!!!这 ...

  5. Windows下配置Erlang环境

    1.下载地址 http://www.erlang.org/downloads 2.下载文件 下载 OTP 22.2 Windows 64-bit Binary File 3.配置环境变量 将下载的安装 ...

  6. PHP 文件上传之如何识别文件伪装?——PHP的fileinfo扩展可!

    问题:文件上传时候需要验证上传的文件是否合法,文件伪装如何识别? 一个简单测试:把txt文件后缀直接改成jpg;上传 <!DOCTYPE html> <html> <ti ...

  7. eosio 编译与部署

    1. 名词解释 创世节点(BIOS) 用于创建初始区块,加载基础合约,供其它节点同步连接. 矿工节点(BP) 主要用于生产同步区块,计算合约产生的费用归矿工账号所有. 查询节点 不产生区块,同步区块信 ...

  8. 连通数[JSOI2010]-洛谷T4306

    咕咕咕 tarjan+拓排应该是正解吧 然而我上去就打了个tarjan和dijkstra (由于我抄题解抄多了,代码能力极差,于是我就gg了) 题解中有大佬直接用dfs过了8个点,再吸口氧就AC了 ( ...

  9. 6_6 小球下落(UVa679)<完全二叉树编号>

    有K个球从一完整二叉树(fully binary tree,FBT)的树根(root)一个一个往下掉.当这个球遇到非终端节点时,可能往左子树跑,也可能往右子树跑,如此直到这颗球到达终端节点(也就是树叶 ...

  10. python-turtle-画雪花-2种方法及效果的详解

    1.方法一: 代码: #python3.8 #xuguojun #2020.1.30 #导出模块 import turtle as t import random as r #定义画雪 def dra ...