Vue'da UI component qismi template deb nomlanadi

<template>
  <button>Bos!</button>
</template>

Dynamic kontentni ko'rsatish

<span>Message: {{ msg }}</span>

HTML ni raw (oddiy text) holatida renderlash

<p>Kontent: {{ rawHtml }}</p>
<p>v-html bilan: <span v-html="rawHtml"></span></p>

Oddiy dynamik content: <span style="color: red">Qizil.</span>

v-html bilan: Qizil.

Attributelar bilan ishlash

<div v-bind:id="dynamicId" v-bind:class="card"></div>

<div :id="dynamicId"></div>

Ikkala variant ham to'g'ri siz v-bind ni qisqartirib yozishiz mumkin : singari.

Agar ikkovi birga yozilsa ham ishlaydi

<div v-bind:id="dynamicId" v-bind:class="card"></div>
<div :id="dynamicId"></div>

Dynamik holatda attributelarni bog'lash

const objectOfAttrs = {
  id: "container",
  class: "wrapper",
  style: "background-color:green",
};

<div v-bind="objectOfAttrs"></div>

Javscript expressionlar

{{ number + 1 }}

{{ ok ? "YES" : "NO" }}

{{ message.split("").reverse().join("") }}

<div :id="`list-${id}`"></div>

Funksiyalar e'lon qilish

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>