Vue.Wprowadzenie szablonu JS
Vue.JS, który jest używany do budowania interfejsów użytkownika (UII) i aplikacji jednostronicowych (SPA), łączy wiele najlepszych funkcji JavaScript Frameworks Angular i React, a wielu programistów lubi korzystać z Vue.JS, ponieważ zapewnia neutralne środowisko.
Jak html, vue.JS ma składnię szablonu i możemy użyć składni szablonu do powiązania DOM z danymi komponentów. W tym artykule pokażemy, jak wstawić dane do składni szablonu i sposobów interpolacji różnych rodzajów danych.
Interpolacja tekstu
Jeśli chcemy powiązać zmienną z instancji względnej komponentu, możemy użyć podwójnych klamrów kręconych, która jest również określana jako składnia „wąsów”.
LinuxhintText
Vue.JS oferuje dwukierunkowe wiązanie, co oznacza, że za każdym razem, gdy wartość zmiennej zostanie zmieniona, element zostanie ponownie renderowany. Jeśli jednak nie chcemy, aby był aktualizowany, możemy użyć V-once dyrektywa.
LinuxhintText
Surowa interpolacja HTML
Vue.JS nie pozwala na wiązanie danych zwykłego tekstu, ale możemy powiązać surowy tekst HTML za pomocą V-HTML dyrektywa. W poniższym przykładzie mamy zmienną w komponencie nazywanym RAWHTML który zawiera surowy tekst HTML.
dane()powrót
MSG: „Hello vue”,
rawHtml: "
Linuxhint jest Świetnie
"Możemy wiązać RAWHTML Zmienna za pomocą V-HTML dyrektywa w następujący sposób.
msg
div tag będzie miał P Tag w nim.
Atrybuty interpolacji
W surowym interpolacji HTML nie użyliśmy podwójnych klamrów kręconych do powiązania zmiennej. Dlatego jeśli chcemy powiązać zmienną wewnątrz atrybutu HTML, możemy użyć V-bind dyrektywa.
Wyrażenia
Vue.JS zapewnia nie tylko funkcje wiązania zmiennej. Vue.JS może być używany do pisania różnych rodzajów wyrażeń w podwójnych klamrach.
Count + 1sprawdzać ? "prawda fałsz"
arr.sortować().odwracać()
Owinięcie
W tym artykule wprowadziliśmy Vue.Prosta, ale użyteczna składnia JS. Jest jednak o wiele więcej do nauczenia się o Vue.JS. Możesz odwiedzić oficjalną stronę Vue.JS tutaj, a możesz uczyć się o JavaScript z Linuxhint.com.