Pourquoi utiliser Vuejs

Vue.js est une bibliothèque JS simple à utiliser et facile à utiliser. Elle peut implémenter une liaison de données réactive et des composants de vue combinés

Vue.js est en fait une interface utilisateur JavaScript. Library, il s'agit d'un cadre progressif pour créer des interfaces Web basées sur les données. L'objectif est d'utiliser des API pour implémenter des composants de liaison de données réactifs et de vues combinées aussi simplement que possible. Dans l'article suivant, je présenterai en détail pourquoi utiliser Vue. .js

[Cours recommandés : Vue.js]

Raison de l'utilisation de vue.js

vue.js est facile à démarrer, simple et dispose de nombreux outils, notamment API, performances, etc. Il ne nécessite qu'un seul script pour faites-en l'expérience merveilleuse

Le point d'entrée de chaque application Vue est créé via une instance. Cette instance configurera ensuite le reste de l'application et obtiendra des membres enfants au fur et à mesure que l'application se développera. Exemple :

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <p>{{ message }}</p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;这是我的第一个Vue.js文件!&#39;
  }
})
</script>

Configurez l'instance en. transmettre un objet qui contient des informations sur l'application et l'endroit où elle doit être chargée.

Attribut el : Spécifie sur quel élément il doit être installé, et la valeur est l'élément ID défini.

attribut data : Pour être lié aux données spécifiées dans la vue des données, cet attribut a un objet avec une valeur accessible via le modèle.

Remarque : l'application div avec ID est l'endroit où nous installons l'application.

Utilisez des doubles accolades pour lier les données au modèle et utilisez un message pour le spécifier dans l'objet de données lors de la liaison de la valeur de configuration. .

Liaison de données

Une fonctionnalité très utile dans les frameworks JS est la possibilité de Liez les données aux vues avant de prendre des décisions. Nous pouvons dire à Vue de se lier uniquement si la valeur est résolue en vraie

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <h2 v-if="demo1">为true时显示demo1</h2>
  <h2 v-else="demo2">为true时显示demo2</h2>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   demo1:true
  }
})
</script>

peut nous fournir une API simple pour parcourir un ensemble de données liées, la directive v-for l'utilise à cet effet, nous n'avons besoin que d'un tableau de données :

Besoin d'utiliser site dans les sites Syntaxe spéciale de le formulaire, sites est le tableau de données source et site est un alias pour l'itération de l'élément du tableau

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <ul>
  	<li v-for="site in sites">{{site.name}}</li>
  </ul>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   sites:[
{name:&#39;张三&#39;},
{name:&#39;李四&#39;},
{name:&#39;王五&#39;}
   ]
  }
})
</script>

La liaison bidirectionnelle dans Vue est très simple et une seule instruction est nécessaire pour implémenter v-model. Implémentons la liaison bidirectionnelle en attachant une directive v-model à la saisie de texte et affichons les données simultanément pour voir la valeur dans la zone de saisie

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
 <p>
 	<input type="text" v-model="mentor">{{mentor}}
 </p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
  message:&#39;这是双向绑定&#39;,
  mentor:&#39;&#39;,
  mentors:[]
  }
})
</script>

Résumé : Ci-dessus, c’est tout le contenu de cet article, j’espère qu’il sera utile à l’apprentissage de chacun.

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!