Interpolation والتوجيهات

نظرة عامة على صياغة القوالب

الاستيفاء باستخدام Mustache

<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>

‏v-bind للسمات

<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>

الاختصار v-bind

<!-- Full syntax -->
<a v-bind:href="url">Link</a>

<!-- Shorthand -->
<a :href="url">Link</a>

‏v-on للأحداث

<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>

الاختصار v-on

<!-- Full syntax -->
<button v-on:click="save">Save</button>

<!-- Shorthand -->
<button @click="save">Save</button>

المعالجات المضمنة مقابل معالجات الأساليب

<!-- Inline expression -->
<button @click="count++">Add</button>

<!-- Method handler -->
<button @click="increment">Add</button>

<!-- Inline with the event object -->
<button @click="log($event)">Log</button>

‏v-text

<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>

‏v-html

<div v-html="rawHtml"></div>

<!-- If rawHtml = "<b>Bold</b>",
     it renders actual bold text -->

‏v-html وخطر XSS

وسائط التوجيهات

<!-- argument is the attribute name -->
<a :href="url">Link</a>

<!-- argument is the event name -->
<button @click="run">Run</button>

<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>

تحقق سريع

مراجعة: الاستيفاء والتوجيهات