vue最簡單的前后端交互示例詳解-創(chuàng)新互聯(lián)

一、學(xué)習(xí) vue 面臨的問題

創(chuàng)新互聯(lián)公司公司2013年成立，先為堆龍德慶等服務(wù)建站，堆龍德慶等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為堆龍德慶企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

最近想學(xué)一門前端技術(shù)防身，看到博客園中寫 vue 的多，那就 vue 吧。都說 vue 的官方教程寫得好，所以我就從官方教程開始學(xué)習(xí)。官方教程說“Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用?！钡沁@個概念是個什么鬼？還是讓人一頭霧水嘛。而且我一開始也沒有搞清楚 vue 的定位，只知道它是一個前端庫，但是確實(shí)不知道它的優(yōu)勢是什么，還以為它是一個學(xué)會就能一勞永逸的萬能的框架呢。官方教程一開始就講怎么綁定頁面上的元素和 JavaScript 中的數(shù)據(jù)，而且是雙向綁定，自動更新，功能確實(shí)很強(qiáng)大。但是遲遲沒有講怎么和服務(wù)器端進(jìn)行交互，怎么獲取服務(wù)器端的數(shù)據(jù)。（后來經(jīng)過反復(fù)閱讀教程，才發(fā)現(xiàn)其實(shí)它一開始就說了“Vue 的核心庫只關(guān)注視圖層”，是我自己忽略了。）

二、最簡單的前后段交互示例

吹再多的口水，也不如一個能運(yùn)行的示例來得實(shí)在。這個例子也是從 vue 的官方教程中抄來的。首先，先建立一個 index.html 文件，編輯其內(nèi)容，如下：

<!DOCTYPE html>
<html>
<head>
 <title>My first Vue app</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
 <div id="watch-example">
  <p>
   Ask a yes/no question:
   <input v-model="question">
  </p>
  <p>{{ answer }}</p>
 </div>

 <script>
  var watchExampleVM = new Vue({
   el: '#watch-example',
   data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
   },
   watch: {
    // 如果 question 發(fā)生改變，這個函數(shù)就會運(yùn)行
    question: function (newQuestion, oldQuestion) {
     this.answer = 'Waiting for you to stop typing...'
     this.debouncedGetAnswer()
    }
   },
   created: function () {
    // `_.debounce` 是一個通過 Lodash 限制操作頻率的函數(shù)。
    // 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率
    // AJAX 請求直到用戶輸入完畢才會發(fā)出。想要了解更多關(guān)于
    // `_.debounce` 函數(shù) (及其近親 `_.throttle`) 的知識，
    // 請參考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
   },
   methods: {
    getAnswer: function () {
     if (this.question.indexOf('?') === -1) {
      this.answer = 'Questions usually contain a question mark. ;-)'
      return
     }
     this.answer = 'Thinking...'
     var vm = this
     axios.get('https://yesno.wtf/api')
      .then(function (response) {
       vm.answer = _.capitalize(response.data.answer)
      })
      .catch(function (error) {
       vm.answer = 'Error! Could not reach the API. ' + error
      })
    }
   }
  })
 </script>
</body>
</html>

標(biāo)題名稱：vue最簡單的前后端交互示例詳解-創(chuàng)新互聯(lián)
文章地址：http://bm7419.com/article48/cdephp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、Google、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容