Comment vue.js implémente l'extraction et la mise à jour des données via des instructions personnalisées

Avant-propos

Les extraits de code de cet article se trouvent dans le composant fichier unique de vue, c'est-à-dire dans le fichier se terminant par .vue. Cet article n'explique qu'une seule méthode d'implémentation, ni la seule méthode ni la seule. la méthode la plus efficace. Bonne méthode. Si vous avez une meilleure méthode, veuillez laisser un message et nous pourrons en discuter.

Étape 1

Tout d'abord, assurez-vous de définir les variables :

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

Étape 2

Si vous souhaitez utiliser ajax, vous devez introduire jquery dans index.html afin qu'il puisse être utilisé globalement :

// index.html
 
<script type="text/javascript" src="./lib/js/jquery-2.1.1.min.js"></script>

Étape 3

Utilisez ensuite l'instruction personnalisée. Une fois le composant instancié, la méthode dans l'instruction personnalisée sera automatiquement exécutée :

Une fois le composant instancié, la valeur initiale ifUpdate sera la valeur initiale ifUpdate. premier paramètre. La méthode de l'instruction personnalisée initData est appelée une fois, puis la fonction de initData est appelée à nouveau chaque fois que la valeur du paramètre ifUpdate change. Les paramètres sont la nouvelle valeur et l'ancienne valeur de 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;
  }
}

Description du scénario d'utilisation

Après les commentaires de l'utilisateur, actualisez la liste des commentaires :

Après avoir obtenu le commentaire données pour la première fois, remplacez ifUpdate par false

Une fois que l'utilisateur ajoute un commentaire, les données seront transférées en arrière-plan et ifUpdate sera remplacé par true

La commande sera déclenchée en fonction du changement ifUpdate, et sera à nouveau déclenchée via ajax. Extraire les données en arrière-plan

Après l'extraction, réinitialisez ifUpdate sur false

Résumé

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article sera utile à tout le monde pour apprendre ou utiliser vue.js. Si vous avez des questions, vous pouvez laisser un message à. communiquer.

Pour des articles plus pertinents sur la façon dont vue.js implémente l'extraction et la mise à jour des données via des instructions personnalisées, veuillez prêter attention au site Web PHP chinois !