vue-resource 的get和post学习

vue-resource 的get和post学习<template>
  <div class="winter">

      <button @click="getUser">点我1</button>
      <button @click="postWq">点我2</button>
         <div v-for="item in msg">
             <p>{{item.id}}</p>
        <p>{{item.name}}</p>
        <p>{{item.age}}</p>
         </div>
        <p>{{msg2.id}}</p>
        <p>{{msg2.name}}</p>
        <p>{{msg2.age}}</p>

  </div>
</template>

<script>

 export default{
  name:‘winter‘,
  data() {
      return{
          msg:‘‘,
          msg2:‘‘

      }
  },
  methods:{

      getUser(){

          this.$http.get("http://localhost:5000/api/values").then((res)=>{
              console.log(this.msg=res.body)//请求成功打印数据(数据后台给的)
          })
          .catch((res)=>{alert(1)})//请求失败弹出1
      },
      postWq () {
      let ws = {‘id‘: 1, ‘name‘: ‘你好‘, ‘age‘: 20}
      this.$http.post(‘http://localhost:5000/api/values‘, ws).then(a => {
        console.log(this.msg2 = a.data)//请求成功打印数据1 你好 20
      }).catch((e) => {
        alert(1)//请求失败弹出1
      })
    }
  }
  }
</script>
时间: 2024-08-22 21:10:55

vue-resource 的get和post学习的相关文章

vue resource 携带cookie请求 vue cookie 跨域

vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请

NeteaseCloudWebApp模仿网易云音乐的vue自己从开源代码中学习到的

github地址: https://github.com/javaSwing/NeteaseCloudWebApp 1.Vue.prototype.$http = Axios // 类似于vue-resource的调用方法,之后可以在实例里直接用this.$http.get()等 2.

vue resource 携带cookie请求 vue cookie 跨域(六)

1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请求都会携带cookie ,也可以指定接口请求携带cookie this.$

【js】Vue 2.5.1 源码学习 (八)响应式入口observe

大体思路(七) 本节内容: deps 依赖收集的数组对象 => Dep 构造函数 /** ==> observe() * var ob * ==> if --isObject * ==> if -- shouldObserve isExtensible is_Vue 是否可扩展 * ==> ob = new Observe(value); * == if ob.vmCount++ * ==> reutrn ob * Observe(value){ * this.valu

【js】vue 2.5.1 源码学习 (九) 响应数组对象的变

大体思路(八) 本节内容: 1.Observe 如何响应数组的变化 代理原型 数组变异方法 shell cacheArrProto methods 新添加的数组需要加到显示系统里面,拦截 push等的方法 swith(method){ case:"push"/"unshift" : 存储东西} observer.prototype.observeArray = function(items){ observe(item[i]) } observe ==> va

从vue resource到axios

从零开始学习Vue.js,学习笔记

一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上

vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB

Vue学习所得小结(一)

一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View ViewModel M:每个页面中单独的数据: V:每个页面中的HTML机构: VM:调度者,V从VM中获取数据,实现数据的双向绑定! 二.VUE代码实现MVVM: 前期为了理解VUE.JS,先采用引入的方式进行VUE的操作: 三.部分vue指令: 1.v-cloak:能解决插值表达式{{  }} 闪

Vue学习之vue-resource小结(五)

一.Vue实现数据交互的方式: 1.Vue除了vue-resource之外,还可以使用‘axios’的第三方包实现数据的请求: 2.常见的数据请求类型有: get.post.jsonp 3.JSONP的实现原理: 由于浏览器的安全性限制,不允许AJAX访问,协议不同.域名不同.端口号不同的数据接口,浏览器认为这种访问不安全: 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称为JSONP(注意:根据