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.