VueJS - Einführung

Vueist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Sein Kernteil konzentriert sich hauptsächlich auf die Ansichtsebene und ist sehr leicht zu verstehen. Die Version von Vue, die wir in diesem Tutorial verwenden werden, ist 2.0.

Da Vue hauptsächlich für die Frontend-Entwicklung entwickelt wurde, werden wir uns in den kommenden Kapiteln mit vielen HTML-, JavaScript- und CSS-Dateien befassen. Um die Details zu verstehen, beginnen wir mit einem einfachen Beispiel.

In diesem Beispiel verwenden wir die Entwicklungsversion von vuejs.

Beispiel

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

Ausgabe

Dies ist die erste App, die wir mit VueJS erstellt haben. Wie im obigen Code zu sehen ist, haben wir vue.js am Anfang der HTML-Datei eingefügt.

<script type = "text/javascript" src = "js/vue.js"></script>

Es gibt ein Div, das in den Körper eingefügt wird, der druckt “My first VueJS Task” im Browser.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

Wir haben auch eine Nachricht in einer Interpolation hinzugefügt, dh {{}}. Dies interagiert mit VueJS und druckt die Daten im Browser. Um den Wert der Nachricht im DOM abzurufen, erstellen wir eine Instanz von vuejs wie folgt:

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

Im obigen Code-Snippet rufen wir die Vue-Instanz auf, die die ID des DOM-Elements verwendet, dh e1: '# intro', es ist die ID des div. Es gibt Daten mit der Nachricht, denen der Wert zugewiesen wurde‘My first VueJS Task’. VueJS interagiert mit DOM und ändert den Wert im DOM {{message}} mit’My first VueJS Task’.

Wenn wir den Wert der Nachricht in der Konsole ändern, wird dies auch im Browser angezeigt. Zum Beispiel -

Konsolendetails

In der obigen Konsole haben wir das Objekt vue_det gedruckt, das eine Instanz von Vue ist. Wir aktualisieren die Nachricht mit“VueJs is interesting” und das gleiche wird sofort im Browser geändert, wie im obigen Screenshot gezeigt.

Dies ist nur ein einfaches Beispiel, das zeigt, wie VueJS mit DOM verknüpft wird und wie wir es manipulieren können. In den nächsten Kapiteln erfahren Sie mehr über Direktiven, Komponenten, Bedingungsschleifen usw.