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

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

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

第一步：引入js庫(kù)：

<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="點(diǎn)擊" />
  </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('請(qǐng)求失?。?);
        });
      }
    }
  });
</script>
</html>

后端接口響應(yīng)：

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

效果：

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

您可能感興趣的文章:

相關(guān)文章

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