vue2.0之axios使用详解

[javascript] viewplain copy方法一:直接在.vue文件中引入使用在.vue文件中使用 import axios from 'axios'; export default { name: 'news', data () { return {

路小二

7700人浏览 · 2017-08-18 23:46:18

路小二 · 2017-08-18 23:46:18 发布

[javascript]view plaincopy 
   
 方法一:直接在.vue文件中引入使用  
   
 在.vue文件中使用  
 <script>  
   import axios from 'axios';  
   export default {  
     name: 'news',  
     data () {  
       return {  
       }  
     },  
     methods: {  
       getNewsFn(){  
         axios.get(this.dataURL + '/getNews').then((news) => {  
             this.news = news.data;  
           }  
         ).catch((err) => {  
             console.log(err);  
           }  
         );  
       }  
     }  
   }  
 </script>  
   
   
 方法二:注册为全局的函数  
   
 首先在main.js文件中引入  
 import axios from '../node_modules/axios';  
   
 Vue.prototype.axios = axios;  
   
 new Vue({  
   el: '#app',  
   router,  
   store,  
   axios,  
   echarts,  
   template: '<App/>',  
   components: { App }  
 });  
 其次在.vue文件中使用  
   defaultData(){  
         let _this = this;  
         _this.axios.get('http://' + _this.$store.state.defaultHttp + '?action_type=comp_news&comp_id=' + _this.$store.state.compValue + '&offset=0&len=' + _this.pageNum, {}, {  
             headers: {}  
         }).then(function (response) {  
               
         }).catch(function (response) {  
             console.log(response);  
         });  
     }          

[javascript]view plaincopy 
    
 方法一:直接在.vue文件中引入使用  
   
 在.vue文件中使用  
 <script>  
   import axios from 'axios';  
   export default {  
     name: 'news',  
     data () {  
       return {  
       }  
     },  
     methods: {  
       getNewsFn(){  
         axios.get(this.dataURL + '/getNews').then((news) => {  
             this.news = news.data;  
           }  
         ).catch((err) => {  
             console.log(err);  
           }  
         );  
       }  
     }  
   }  
 </script>  
   
   
 方法二:注册为全局的函数  
   
 首先在main.js文件中引入  
 import axios from '../node_modules/axios';  
   
 Vue.prototype.axios = axios;  
   
 new Vue({  
   el: '#app',  
   router,  
   store,  
   axios,  
   echarts,  
   template: '<App/>',  
   components: { App }  
 });  
 其次在.vue文件中使用  
   defaultData(){  
         let _this = this;  
         _this.axios.get('http://' + _this.$store.state.defaultHttp + '?action_type=comp_news&comp_id=' + _this.$store.state.compValue + '&offset=0&len=' + _this.pageNum, {}, {  
             headers: {}  
         }).then(function (response) {  
               
         }).catch(function (response) {  
             console.log(response);  
         });  
     }          

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^