Вернуться назад

Vue

Простой пример, где мы выводим сообщение в div.

<!-- index.html -->

    <div id="app">Говно: {{ message }}</div>
    <script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
  setup() {
      const message = "Строка, которую мы вставим в div.";
      return {
          message
      }
  }
});

kukuruza.mount("#app");

Raw HTML (v-html)

<div id="app">
    <div>Вот сообщение: <span v-html="message"></span></div>
</div>

<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const message = "Это моё сообщение.";
        return {
            message
        }
    }
});

kukuruza.mount("#app");

Добавим счётчик:

<!-- index.html -->

<div id="app">
    <button @click="count++">Кнопка</button>
    <div>Счётчик: {{ count }}</div>
</div>

<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
  setup() {
      const count = ref(0);
      return {
          count
      }
  }
});

kukuruza.mount("#app");

Template:

По сути, это предыдущий пример, но только HTML-содержимое <div id="app"> мы перенесли в JavaScript в template. А из template Vue вставит этот HTML в <div id="app"> как innerHTML.

<!-- index.html -->

<div id="app"></div>
<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const count = ref(0);
        return {
            count
        }
    },
    template: "<button @click='count++'>Кнопка</button><div>Счётчик: {{ count }}</div>"
});

kukuruza.mount("#app");

v-bind:

Благодаря v-bind: мы можем привязывать аттрибуты HTML-элементов к переменным Vue.

В этом примере мы привязываем значение атрибута class к переменной в JavaScript. И из Vue присваиваем значение этой переменной и она применяется к атрибуту.

<!-- index.hml -->

<link href="main.css" rel="stylesheet">

<div id="app">
    <!-- Здесь мы привязали значение аттрибута class к переменной currentClass из Vue -->
    <div v-bind:class="currentClass">Просто обычный текст, к которому мы хотим применить какой-нибудь класс.</div>
</div>

<script type="module" src="vue_example.js"></script>

/* main.css */

.kaka1 {
   color: red;
}
.kaka2 {
   color: blue;
}

// vue_example.js

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const currentClass = "kaka2";
        return {
            currentClass
        }
    }
});

kukuruza.mount("#app");

Булевые значения атрибутов

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>
<div id="app">
    <button v-bind:disabled="isDisabled">Кнопка</button>
</div>

<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const isDisabled = true;
        return {
            isDisabled
        }
    }
});

kukuruza.mount("#app");

Динамическая привязка нескольких атрибутов

Здесь мы сразу присвоим значения трём атрибутам: id, class и style.

<!-- index.html -->

<link href="main.css" rel="stylesheet">

<div id="app">
    <div v-bind="piperda">Обычный текст, к которому мы динамически привяжем сразу три атрибута.</div>
</div>

<script type="module" src="vue_example.js"></script>

/* main.css */

.kaka1 {
   color: red;
}
.kaka2 {
   color: blue;
}

// vue_example.js

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const piperda = {
            id: "hren",
            class: "kaka2",
            style: "background-color: lightgreen"
        }
        return {
            piperda
        }
    }
});

kukuruza.mount("#app");