Директивы Vue3

Директивы Vue — ключевая возможность Vue.js. Их можно использовать в HTML-шаблонах какv-специальные атрибуты, начинающиеся с v-, для привязки реактивных данных к DOM-элементам или выполнения операций над DOM-элементами.

Директивы Vue — этоv-специальные HTML-атрибуты с префиксом, которые придают HTML-тегам дополнительную функциональность.

По сравнению с традиционными методами JavaScript использование Vue для создания реактивных страниц намного проще и требует меньше кода.

Ниже приведены несколько часто используемых директив Vue:

ДирективаОписание
v-bind Используется для привязки данных экземпляра Vue к атрибутам HTML-элементов.
v-if Используется для условного рендеринга элементов или компонентов на основе значения выражения.
v-show v-show — это директива, предоставляемая Vue.js для условного показа или скрытия элемента на основе значения выражения.
v-for Используется для рендеринга элементов или компонентов в цикле на основе значений массива или свойств объекта.
v-on Используется для привязки обработчиков событий к HTML-элементам, чтобы они могли вызывать методы или функции в экземпляре Vue.
v-model Используется для создания двусторонней привязки данных между элементами формы и данными экземпляра Vue.

Помимо этих часто используемых директив, Vue также предоставляет некоторые другие директивы, такие как v-text, v-html и т. д., а также пользовательские директивы, позволяющие разработчикам более гибко манипулировать DOM-элементами.

Пример

Ниже приведены несколько примеров использования директив Vue:

Использованиеv-modelдирективы для реализации двусторонней привязки данных для данных формы:

Пример

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Попробуйте сами »

Использованиеv-bindдирективы для привязки данных экземпляра Vue к атрибутам HTML-элементов:

Пример

<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      imageSrc: '/static.jyshare.com/images/code-icon-script.png?v=2'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Попробуйте сами »

Использованиеv-ifиv-elseдиректив для условного рендеринга элементов или компонентов на основе значения выражения:

Пример

<div id="app" class="demo">
    <p v-if="showMessage">Привет Vue!</p>
    <p v-else>До свидания, Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Попробуйте сами »

Использованиеv-forдирективы для отображения элементов или компонентов в цикле согласно значениям свойств массива:

Пример

<div id="app" class="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

Попробуйте сами »

Используйте директиву v-on для привязки обработчиков событий к HTML-элементам:

Пример

<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="/static.jyshare.com/images/svg/img_lightBulb.svg?v=2">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Вкл/Выкл</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false
    }
  }
})
app.mount('#app')
</script>

Попробуйте сами »

Ниже приведён пример использованияv-showдирективы:

Пример

<div id="hello-vue" class="demo">
    <button v-on:click="showMessage = !showMessage">Показать/Скрыть</button>
    <p v-show="showMessage">Привет, Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Попробуйте сами »
Другие расширения