Τα πρότυπα Vue είναι HTML ενισχυμένο με οδηγίες και παρεμβολή — γράφετε markup που μοιάζει με HTML, συν ειδικά χαρακτηριστικά (οδηγίες, που ξεκινούν με v-) και {{ }} για δυναμικές τιμές.
<template>
<h1>{{ title }}</h1> <!-- inserts the value of `title` -->
<p>{{ count * 2 }}</p> <!-- any JS expression works -->
<p>{{ isActive ? "On" : "Off" }}</p> <!-- ternaries, method calls, etc. -->
</template>
{{ }} αξιολογεί μια JavaScript έκφραση (όχι προτάσεις) και αποδίδει το αποτέλεσμα ως κείμενο, ενημερώνοντας αυτόματα όταν αλλάζουν τα δεδομένα.
<template>
<p v-if="loggedIn">Welcome</p> <!-- conditional rendering -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- loops -->
<img :src="imageUrl" /> <!-- v-bind: bind an attribute -->
<button @click="submit">Send</button> <!-- v-on: handle an event -->
<input v-model="name" /> <!-- two-way binding -->
</template>
<a :href="url">link</a> <!-- : is short for v-bind: -->
<button @click="fn">go</button> <!-- @ is short for v-on: -->
Οι συντομεύσεις : (bind) και @ (on) είναι ο ιδιωματικός τρόπος για να γράφετε Vue — σπάνια θα δείτε την πλήρη μορφή v-bind:/v-on:.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Χρησιμοποιήστε {{ }} για περιεχόμενο κειμένου και :attr για τιμές χαρακτηριστικών — δεν μπορείτε να τοποθετήσετε mustaches μέσα σε ένα χαρακτηριστικό.
Η σύνταξη προτύπου είναι η καρδιά της ανάπτυξης Vue UI.
Ο συνδυασμός παρεμβολής {{ }} και οδηγιών v- (με συντομεύσεις : και @) σας επιτρέπει να εκφράσετε δυναμικά, αντιδραστικά UI δηλωτικά — αναγνώσιμα όπως HTML, αλλά που καθοδηγούνται από δεδομένα.
Η κατάκτηση των κοινών οδηγιών είναι το μεγαλύτερο μέρος της καθημερινής ανάπτυξης Vue.