VueJS - Wprowadzenie

Vueto framework JavaScript do budowania interfejsów użytkownika. Jego główna część skupia się głównie na warstwie widoku i jest bardzo łatwa do zrozumienia. Wersja Vue, której będziemy używać w tym samouczku, to 2.0.

Ponieważ Vue jest zasadniczo zbudowany z myślą o programowaniu frontendowym, w nadchodzących rozdziałach będziemy zajmować się wieloma plikami HTML, JavaScript i CSS. Aby zrozumieć szczegóły, zacznijmy od prostego przykładu.

W tym przykładzie użyjemy wersji rozwojowej vuejs.

Przykład

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

Wynik

To pierwsza aplikacja, którą stworzyliśmy przy użyciu VueJS. Jak widać w powyższym kodzie, na początku pliku .html umieściliśmy vue.js.

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

Istnieje element div, który jest dodawany w treści, która drukuje “My first VueJS Task” w przeglądarce.

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

Dodaliśmy również komunikat w interpolacji, tj {{}}. Współdziała z VueJS i drukuje dane w przeglądarce. Aby uzyskać wartość wiadomości w DOM, tworzymy instancję vuejs w następujący sposób -

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

W powyższym fragmencie kodu wywołujemy instancję Vue, która pobiera id elementu DOM, czyli e1: '# intro', jest to id elementu div. Istnieją dane z komunikatem, któremu przypisano wartość‘My first VueJS Task’. VueJS współdziała z DOM i zmienia wartość w DOM {{message}} z’My first VueJS Task’.

Jeśli zdarzy nam się zmienić wartość komunikatu w konsoli, to samo zostanie odzwierciedlone w przeglądarce. Na przykład -

Szczegóły konsoli

W powyższej konsoli wydrukowaliśmy obiekt vue_det, który jest instancją Vue. Aktualizujemy wiadomość o“VueJs is interesting” i to samo zmienia się w przeglądarce natychmiast, jak widać na powyższym zrzucie ekranu.

To tylko podstawowy przykład pokazujący powiązanie VueJS z DOM i jak możemy nim manipulować. W kilku następnych rozdziałach dowiemy się o dyrektywach, składnikach, pętlach warunkowych itp.