Résumé des instructions courantes dans vue.js

Cette fois, je vais vous apporter un résumé des instructions communes de vue.js. Quelles sont les précautions lors de l'utilisation des instructions communes de vue.js. Ce qui suit est un cas pratique, prenons un. regarder.

Vue.js est une bibliothèque JavaScript MVVM (Model-View-ViewModel) très populaire. Elle est construite avec des idées basées sur les données et les composants. Par rapport à Angular.js, Vue.js fournit une API plus simple et plus facile à comprendre, nous permettant de démarrer et d'utiliser rapidement Vue.js.

Si vous avez déjà été habitué à utiliser jQuery pour faire fonctionner le DOM, veuillez mettre de côté l'idée de manipuler le DOM manuellement lors de l'apprentissage de Vue.js, car Vue.js est basé sur les données et vous n'avez pas besoin de le faire manuellement. faire fonctionner le DOM. Il lie le DOM et les données via une syntaxe HTML spéciale. Une fois la liaison créée, le DOM restera synchronisé avec les données et chaque fois que les données changeront, le DOM sera mis à jour en conséquence.

Bien entendu, lorsque vous utilisez Vue.js, vous pouvez également l'utiliser avec d'autres bibliothèques, telles que jQuery.

1. Utiliser

Le processus d'utilisation de Vue est le processus de définition des différents composants de MVVM (Model-View-ViewModel).

<!--这里定义View-->
<p id="app">{{ message }}</p>
<script src="js/vue.js"></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: 'Hello World!'
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: '#app',
      data: exampleData
    })
</script>

2. Commandes courantes de Vue.js

Vue.js fournit quelques instructions intégrées couramment utilisées. Nous présenterons ensuite les instructions intégrées suivantes :

. • Commande v-if
• Commande v-show
• Commande v-else
• Commande v-for
• Commande v-bind
• Commande v-on

Vue.js a une bonne évolutivité et nous pouvons également développer des instructions personnalisées. Des instructions personnalisées seront introduites dans des articles ultérieurs.

Instruction v-if 2.1

v-if est suivi d'une expression

qui peut être convertie en un

<p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-if="yes">Yes!</h1>
      <h1 v-if="no">No!</h1>
      <h1 v-if="age >= 25">Age: {{ age }}</h1>
      <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
</p>
 <script src="js/vue.js"></script>
 <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
 </script>

type booléen

Ici, le résultat final est

<p id="app">
  <h1>Hello, Vue.js!</h1>
  <h1>Yes!</h1>
  <!---->
  <h1>Age: 28</h1>
  <!---->
</p>

V-show 2.2

 <p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-show="yes">Yes!</h1>
      <h1 v-show="no">No!</h1>
      <h1 v-show="age >= 25">Age: {{ age }}</h1>
      <h1 v-show="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
    </p>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
  </script>

Le code ici est juste v-if changé en v-show

La sortie est

<p id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<h1 style="display: none;">No!</h1>
<h1>Age: 28</h1>
<h1 style="display: none;">Name: keepfool</h1>
</p>

La différence ici est que le v-if ci-dessus ne génère pas directement le code html. Ici, utilisez display:none pour masquer

. Commande 2.3 v-else

<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 28,
        name: 'keepfool',
        sex: 'Male'
      }
    })
</script>

L'élément frère précédent doit avoir v-if ou v-else-if, la nouvelle version de vue.js a ajouté v-else-if. L'utilisation est la même que v-if, mais l'élément frère précédent doit avoir v-if ou v-else-if. La version de v-else est précédée de v-else-if. Elle peut être suivie de v-show, mais la nouvelle version de v-else ne peut pas être précédée de v-show.

2.4 v-pour commande

<p v-for="p in people">
   <h1>Age: {{ p.age }}</h1>
   <h1>Name: {{ p.name }}</h1>
   <h1>Sex: {{ p.sex }}</h1>
</p>
<script charset="utf-8" src="js/vue.js"></script>
<script type="text/javascript">
   var myModel = {
    people:[
      {
        age: 25,
        name: 'keepfool',
        sex: 'Male'
      },
      {
        age: 26,
        name: 'keepfool2',
        sex: 'FeMale'
      },
      {
        age: 27,
        name: 'keepfool3',
        sex: 'Male2'
      }
    ]
  };
 var vm = new Vue({
  el: '#app',
  data: myModel
})
</script>

L'élément parent utilise v-for et l'élément enfant peut parcourir la chaîne Array Object | v-for peut également être utilisé comme ceci :

<p v-for="(item, index) in items"></p>
<p v-for="(val, key) in object"></p>
<p v-for="(val, key, index) in object"></p>

Commande 2.5 v-bind

La directive v-bind peut prendre un paramètre après son nom, séparé par deux points. Ce paramètre est généralement l'attribut de l'

élément HTML

. Autre exemple :

<p id="app">
   <ul class="pagination">
     <li v-for="n in pageCount">
       <a href="javascripit:void(0)" rel="external nofollow" v-bind:class="activeNumber === n ? &#39;active&#39; : &#39;&#39;">{{ n }}</a>
     </li>
   </ul>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeNumber: 1,
        pageCount: 10
      }
    })
  </script>

<img v-bind:src="&#39;/path/to/images/&#39; + fileName">
<p v-bind="{ &#39;id&#39;: someProp, &#39;other-attr&#39;: otherProp }"></p>

Commande 2.6 v-on

<p id="app">
      <p><input type="text" v-model="message"></p>
      <p>
        <!--click事件直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
      </p>
      <p>
        <!--click事件使用内联语句-->
        <button v-on:click="say(&#39;Hi&#39;)">Hi</button>
      </p>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function() {
          // // 方法内 `this` 指向 vm
          alert(this.message)
        },
        say: function(msg) {
          alert(msg)
        }
      }
    })
  </script>

Commande 2.7 v-model

v-model crée une liaison de données bidirectionnelle sur les éléments de contrôle du formulaire

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Lecture recommandée :

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!