Quelle est la différence entre vue.js et l'applet WeChat ?

La différence entre vue.js et l'applet WeChat : 1. Une fois la vue instanciée, les données sont initialisées et les données dans data peuvent être obtenues via [this.] ; données de la page, il s'agit d'obtenir les données de la page via [this.data] pour obtenir l'objet de la page.

[Articles connexes recommandés : vue.js]

vue.js et WeChat Différences entre les mini-programmes :

1. Le mini-programme WeChat possède son propre ensemble de conteneurs de vue de composants, qui regroupent certains des effets de vue de page que nous pouvons habituellement utiliser ;

Par exemple : swiper, scroll-view, composant de formulaire

Dans le projet Vue, nous pouvons introduire la bibliothèque de composants tiers swiper, et le composant de formulaire est davantage combiné avec element-ui Ou utiliser ant -ui ou iview pour implémenter la page de formulaire.

2. Rendu conditionnel et rendu de liste

En js, nous savons tous que pour le jugement conditionnel, le plus couramment utilisé est if(){}else{} , et dans les frameworks d'applets vue et WeChat, il encapsule ce type de méthode et l'implémente via l'appel d'instructions.

In vue :

v-if="Math.random() > 0.5"或者v-if=”true”  //当指令的表达式返回 truthy 值的时候内容会被渲染

Les personnes habituées au framework vue, les conséquences de ne pas être exposées aux mini-programmes WeChat pendant une longue période :

wx-if=”Math.random() > 0.5”   //报错倒是不会，但是并没有按条件执行

Puis exécutez-le , il n'y a rien de mal à cela, n'est-ce pas ? Les données n'ont tout simplement pas pu être extraites. J'ai vérifié le code plusieurs fois et j'étais convaincu qu'il n'y avait absolument aucun problème. Ensuite, je suis allé consoler les données d'arrière-plan et les données de cashback ont ​​pu être consolées. Ce n'est qu'à ce moment-là que j'ai réalisé que le rendu conditionnel de l'applet WeChat n'était peut-être pas correct. Ensuite, j'ai vérifié la documentation de l'applet WeChat et j'ai découvert que dans WeChat, une variable est liée à l'interface via la syntaxe de

. {{ }}. Fonctionnement correct du rendu de la liste

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”

dans vue Lorsque

<p v-for=”(index,item) in array” :key=”item.id”></p>；

dans l'applet WeChat, utilisez l'attribut de contrôle wx:for sur le composant pour lier un tableau, et le composant peut être rendu à plusieurs reprises en utilisant les données de chaque élément du tableau.

Par défaut, le nom de la variable d'indice de l'élément actuel du tableau est par défaut index, et le nom de la variable de l'élément actuel du tableau est par défaut élément

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Utilisez wx:for ; -item pour spécifier la variable de l'élément actuel du tableau,

Utilisez wx:for-index pour spécifier le nom de la variable de l'indice actuel du tableau :

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

3. Acquisition de données

Après l'instanciation de vue , initialisez les données, et les données dans data peuvent être obtenues via cela Fonctionnement normal : Dans l'applet

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
}

, après avoir initialisé le. données de la page, les données de la page sont obtenues via this.data pour obtenir l'objet page,

data:{
  message:”呵呵”
},
methods:{
  this.data.message = “呵呵哒”;   //视图界面上的值并没有发生改变
}

Sans parler accidentellement de ce.message, mais plus tard j'ai soudain réalisé qu'il s'agissait d'un petit programme, puis le le problème est revenu, la valeur sur l'interface d'affichage n'a pas changé.

Ensuite, interrogez le document (à partir de la description officielle du document de l'applet WeChat) :

1 La modification directe de ces données n'est pas valide et ne peut pas changer le statut du. page. Cela entraînera également des données incohérentes.

2. Les données définies à la fois ne peuvent pas dépasser 1 024 Ko. Veuillez essayer d'éviter de définir trop de données à la fois.

3. La relation entre this.data et this.setData est que ce qui est stocké dans this.setData est une copie de this.data, et l'interface obtient les données de la copie de this.data hébergée dans this.setData. Ainsi, lorsque nous modifions this.data, l'interface ne sera pas mise à jour directement, car la copie dans this.setData à ce moment n'est toujours pas mise à jour.

En bref, la fonction setData actualise les données et les affiche sur la page. This.data modifie les données, mais ne modifie pas le contenu de la page d'affichage.

Alors, faites-le correctement

methods:{
  this.data.message = “呵呵哒”;
  this.setDate({
     message:this.data.message
});
console.log(this.data.message)
}

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!