vue.js與后臺數(shù)據(jù)交互的實例講解

更新時間：2018年08月08日 10:00:07 作者：祥灬子

今天小編就為大家分享一篇vue.js與后臺數(shù)據(jù)交互的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

第一步：引入js庫：

<script src="../js/common/vue.min.js"></script>
<script src="../js/common/vue-resource.js"></script>

前端代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue example</title>
<link rel="stylesheet" href="../my/style.css" rel="external nofollow" >
<script src="../js/common/vue.min.js"></script>
<script src="../js/common/vue-resource.js"></script>
</head>
<body>
  <div id="app">
    <input type="button" @click="get()" value="點擊" />
  </div>
</body>
<script>
  new Vue({
    el : '#app',
    data : {
    },
    methods:{
      get:function(){
        this.$http.get('/getData').then((response) => {
          console.log(response);
          alert(response.data);
        },function(){
          alert('請求失??！');
        });
      }
    }
  });
</script>
</html>

后端接口響應：

  ....
  @RequestMapping("/getData")
  @ResponseBody
  public String getDatas() {
    return "data";
  }
  ....

效果：

以上這篇vue.js與后臺數(shù)據(jù)交互的實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用
當子組件使用setup后,父組件就不能像vue2那樣直接就可以訪問子組件內的屬性和方法,這個時候就需要在子組件內使用defineExpose宏函數(shù)來指定想要暴露出去的屬性和方法,本文介紹vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用,需要的朋友可以參考下
2024-05-05
cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開發(fā)之如何在vue項目中使用cesium,使用離線地圖資源問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue如何給組件動態(tài)綁定不同的事件
這篇文章主要介紹了vue如何給組件動態(tài)綁定不同的事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實現(xiàn)嵌套表格,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
Vue中$set()的使用方法場景分析
由于 Vue 會在初始化實例時進行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進行上述過程，這樣才能讓它是響應的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下
2023-02-02
使用mint-ui開發(fā)項目的一些心得(分享)
下面小編就為大家?guī)硪黄褂胢int-ui開發(fā)項目的一些心得(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue 綁定對象,數(shù)組之數(shù)據(jù)無法動態(tài)渲染案例詳解
這篇文章主要介紹了vue 綁定對象,數(shù)組之數(shù)據(jù)無法動態(tài)渲染案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-09-09
vue+vant實現(xiàn)商品列表批量倒計時功能
這篇文章主要介紹了vue+vant實現(xiàn)商品列表批量倒計時功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-01-01
Vue數(shù)據(jù)變化后頁面更新詳細介紹
這篇文章主要介紹了Vue在數(shù)據(jù)發(fā)生變化后是如何更新頁面的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10