vue实例讲解之axios的使用

本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件。

这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展。

axios的使用步骤:

1.安装axios npm install axios --save-dev

2.页面中引入axios import axios from ‘axios‘

3.为了方便使用我们将axios挂到vue.prototype.$http这个原型上

Vue.prototype.$http = axios

4.在页面中直接调用axios的相关方法

基础步骤理清楚之后,下面开始项目:

在项目的static目录下建立一个data文件,里面建立一个article.dada文件来存放模拟的数据。

结构如下:

然后在入口文件main.js import axios

代码如下:

接着在news.vue组件里面使用axios,以下是核心代码。

完成之后页面效果如下:

项目代码地址:

时间: 2024-10-10 06:19:04

vue实例讲解之axios的使用的相关文章

Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

vue.js路由参数简单实例讲解------简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

Vue入门系列(五)Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

关于Vue实例的生命周期created和mounted的区别

什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例. 再上图,对生命周期图的标注 特别值得注意的是created钩子函数和mounted钩子函数的区

vue项目实践-添加axios封装api请求

安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-urlencoded 通过设置 transformRequest 属性 data => qs.stringify(data) 可以正常表单形式提交 import axios from 'axios' const instance =

Vue之vuex和axios

Vuex : vuex是一个专门为Vue.js设计的集中式状态管理架构. 状态: 可以理解为在data中需要共享给其他组件使用的部分. Vuex和单纯的全局对象的不同: 1. Vuex的状态存储是响应式的. 当vue组件从store中读取状态的时候, 若store中的状态发生改变, 那么相应的组件也会得到高效更新. 2. store中的状态不能直接进行改变, 改变store中的状态的唯一途径就是显示的提交(commit)mutation. 这样使得我们可以方便的跟踪每一个状态的变化, 从而让我们

Vue 实例详解与生命周期

Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个 Vue 实例生成.编译.挂着.销毁等过程进行 js 控制. Vue 实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且 Vue 初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作

Android 实例讲解HorizontalScrollView实现左右滑动

本博文主要讲解怎么使用HorizontalScrollView实现左右滑动的效果. HorizontalScrollView实际上是一个FrameLayout ,一般通过只放置一个LinearLayout子控件.如果要使其添加其他的控件,就使用LinearLayout子控件来添加其他的控件,最后达到丰富其内容的效果.其中,LinearLayout设置的orientation布局为Horizontal.HorizontalScrollView不可以和ListView同时用,因为ListView有自

vue实例整理1

一 介绍 (1)       声明式渲染, 文本插值 <div id="app"> <p>{{message}}</p> </div> <script src="scripts/vue.js"></script> <script> new Vue({ el:'#app', data:{ message:'Hello Vue.js!' } }) </script> (2)