Detaillierte Erläuterung der vue.js-Syntax und allgemeiner Anweisungen

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung der Syntax und allgemeiner Anweisungen von vue.js. Vue.js ist eine sehr beliebte JavaScript MVVM-Bibliothek (Model-View-ViewModel). wird Ihnen eine gute Analyse liefern.

Wenn Sie es bisher gewohnt waren, jQuery zum Betreiben des DOM zu verwenden, legen Sie bitte beim Erlernen von Vue.js die Idee beiseite, das DOM manuell zu manipulieren, da Vue.js ist datengesteuert und Sie müssen das DOM nicht manuell manipulieren. Es bindet DOM und Daten durch eine spezielle HTML-Syntax. Sobald Sie die Bindung erstellt haben, bleibt das DOM mit den Daten synchron und jedes Mal, wenn sich die Daten ändern, wird das DOM entsprechend aktualisiert.

Natürlich können Sie Vue.js auch in Verbindung mit anderen Bibliotheken wie jQuery verwenden.

1. Verwendung

Der Prozess der Verwendung von Vue ist der Prozess der Definition der verschiedenen Komponenten von 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>

v-if-Direktive

<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>

Ich glaube, dass Sie die Methode nach dem Lesen der obigen Einführung beherrschen. Für weitere spannende Inhalte zahlen Sie bitte Aufmerksamkeit auf chinesische PHP-WebsiteAndere verwandte Artikel!

Verwandte Lektüre:

Verwenden von jQuery zum Deduplizieren und Sortieren von Arrays

Verwendung von require.js Die Methode wird in vorgestellt Detail

nvms Methode zur Verwaltung verschiedener Versionen von Knoten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der vue.js-Syntax und allgemeiner Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!