Explication détaillée de la syntaxe vue.js et instructions courantes

Cette fois, je vous apporte une explication détaillée de la syntaxe et des instructions communes de vue.js est une bibliothèque JavaScript MVVM (Model-View-ViewModel) très populaire. vous donnera une bonne analyse.

Si vous avez déjà eu l'habitude d'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. 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 sûr, lorsque vous utilisez Vue.js, vous pouvez également l'utiliser en conjonction avec d'autres bibliothèques, telles que jQuery.

1. Utilisation

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: &#39;Hello World!&#39;
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: &#39;#app&#39;,
      data: exampleData
    })
</script>

directive v-if

<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: &#39;#app&#39;,
      data: {
        yes: true,
        no: false,
        age: 28,
        name: &#39;keepfool&#39;
      }
    })
 </script>

v-show

<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: &#39;#app&#39;,
     data: {
       yes: true,
       no: false,
       age: 28,
       name: &#39;keepfool&#39;
     }
   })
 </script>

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour un contenu plus passionnant, veuillez payer. attention au site Web chinois phpAutres articles liés !

Lecture connexe :

Utilisation de jQuery pour dédupliquer et trier des tableaux

Utilisation de require.js La méthode est introduite dans détail

Méthode nvm de gestion des différentes versions de nœuds

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!