欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue系列——vue-resources入门案例

程序员文章站 2022-07-15 13:10:21
...

vue-resources入门案例

通过学习vue-resource，做了简单的几个demo：
演示效果图示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app" class="container">
  <h1>vue-resource插件</h1>
  <a href="javascript:;" class="btn btn-primary" v-on:click="get">Get 请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="post">Post 请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="jsonp">Jsonp 请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">http 请求</a>
  <div>{{msg}}</div>
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      msg:''
    },
/*    mounted:function () {
      Vue.http.interceptors.push(function (request,next) {
        console.log("Request init!"),
          next(function (response) {
            console.log("Response init!")
            return response
          })

      })
    },*/
    methods:{
      get:function () {
        this.$http.get('package.json',{
          params:{
            userId:'12345',
            userName:'Jack'
          },
          headers:{
            token:'I AM A TOKEN'
          }
        }).then(res=>{
          this.msg=res.data;
        },error=>{
          this.msg=error;
        })
      },

      post:function () {
        this.$http.post('package.json',{
          userId:'5432',
          userName:'Tom'
        },{
          headers:{
            access_token:'hahhahhahha',
            token:'aaaaaaaaaaa',
            liuxzh:'jiayi'
          }
        }).then(function (res) {
          this.msg = res.data
        },function (error) {
          this.msg = error
        })
      },

      jsonp:function () {
        this.$http.jsonp('package.json').then(function (res) {
          this.msg = res.data;
        })
      },
      http:function () {
        this.$http({
          url:'package.json',
          params:{
            userId:'12345',
            userName:'JVMM'
          },
          headers:{
            token:'token definition from liuxzh',
            ahaname:'liuxzhz set'
          },
          timeout:15,
          before:function () {
            console.log("Request init!")
          }
        }).then(function (res) {
          this.msg = res.data;
        })
      }
    }
  })

</script>
</body>
</html>

vue系列——vue-resources入门案例

相关标签： vue vue-resource

上一篇： laravel5.5 __Resource路由__RESTFul风格控制器

下一篇： Android - Architecture (Resource & NetworkBoundResource)

推荐阅读