Is iad teimpléadí Vue HTML fhalaithe le treoruithe agus idirghabhála — scríobhann tú marcanna a bhraistint ar HTML, móide na tréithe speisialta (treoruithe, ag tosú le v-) agus {{ }} do luachanna dinimiciúla.
<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>
Measúnn {{ }} slonn JavaScript (ní ráitis) agus dhéanann sé an toradh a thaispeáint mar théacs, ag nuashonrú go huathoibríoch nuair a athraíonn na sonraí.
<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: -->
Is iad na gearraithí : (bind) agus @ (on) an bealach idiomatach chun Vue a scríobh — ní fhicfidh tú an fhoirm iomlán v-bind:/v-on: go minic.
<div class="static">{{ text }}</div> <!-- {{}} for CONTENT -->
<div :class="dynamicClass"></div> <!-- :attr for ATTRIBUTES -->
Baineann {{ }} d'úsáid le ábhar téacs agus :attr do luachanna tréithe — ní féidir leat mustaches a chur i ngan fhios laistigh d'athrú.
Is é comhréir an teimpléid croílár an UI Vue a scríobh.
Ligint duit an teaglaim de idirghabhála {{ }} agus treoruithe v- (le gearraithí :/@) UI dinimiciúil, freagartha a léiriú go dearbhthábhachtach — inléite ar nós HTML, ach á dhríochtadh ag na sonraí.
Is é a bheith i réim ar na treoruithe coitianta an mé-bhunchuid d'fhorbairt Vue laethúil.