首頁 > web前端 > js教程 > 主體

vue.js透過自訂指令實作資料拉取更新的實作方法

高洛峰
發布: 2017-01-12 13:38:43
原創
1476 人瀏覽過

前言

這篇文章的程式碼片段位於vue 的單一檔案元件中,即以.vue 結尾的檔案中,本文說明的只是一種實作方法,既不是唯一的方法也不是最好的方法,如果大家有更好的方法可以留言,大家進行討論。

第一步

首先,一定要先定義變數:

// app.vue <script>
 
data () { 
  return {
   // 定义 getData
   getData:{},
   // 定义自定义指令的绑定值
   ifUpdate:true
  }
}
登入後複製

第二步

然後要使用ajax 的話,要在index.html 裡引入jque

然後要使用ajax 的話,要在index.html 裡引入jquery,這樣就可以全局使用了:

// index.html
 
<script type="text/javascript" src="./lib/js/jquery-2.1.1.min.js"></script>
登入後複製

   


第三步

接著使用自訂指令,在元件實例化後,會自動執行自訂指令裡的方法:

元件實例化後會立即以初始值次呼叫自訂指令 initData 的方法,之後每次參數值 ifUpdate 變化時會再次呼叫 initData 的函數,參數為 ifUpdate 的新值與舊值。

// app.vue <template>
 
// 在页面节点(自由选择)中绑定自定义指令
<div v-initData="ifUpdate" ></div>
登入後複製
// app.vue <script>
 
// 定义自定义指令
directives:{
  initData:function(val, oldVal){
   if(!val){
    return;
   }
   var self = this;
   $.getJSON( "ajax/test.json", function( data ) {
     self.vm.getData = data;
   });
   // 下次 ifUpdate 值更新为 true 时就会再次使用上面的 ajax 去获取数据
   self.vm.ifUpdate = false;
  }
}
登入後複製


使用場景說明

用戶評論後,刷新評論列表:


     首次取得評論資料後,將  變為true


     指令根據 ifUpdate 變化觸發,再次透過 ajax 從後台拉取資料


     拉取完後將本文全部追蹤對大家學習或使用vue.js能有所幫助,如果有疑問大家可以留言交流。

更多vue.js透過自訂指令實作資料拉取更新的實作方法相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!