<template>
<тег v-bind:class="{НазваниеКласса,Код}">
</template>Код
условие bool, по которому будет добавляться этот класс
Рубрика: Vue директива
v-…
атрибут к любому узлу и начинается с префикса вью
структура дериктивы
- v-НазваниеДериктивы=<<Значение>>
- v-НазваниеДирективы:Параметр=<<Значение>>
кавычки обрамляют начало и конец нашей директивы
т.е. код JavaScript с одной операцией
- Родительская компонента содержит переменную в data
<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>
<script>
export default{
data(){
return {
ИмяОбъекта: Значение
}
}
}
</script>- Дочерняя компонента comp
пропсы нельзя изменять
<script>
export default{
props:{
ИмяПропса:{
type:Array,
requered:true,
}
}
}
</script>
Рубрики
Vue директива v-on
- структура использования директивы в теге как атрибут
v-on: ИмяСобытия=<<ИмяФункции>>
Эта директива парсится
в момент наступления события ИмяСобытия
сокращенная запись использования
@: ИмяСобытия=<<ИмяФункции>>
- Использование директивы v-on в компоненте
повесить слушатель события и связать с кнопками
<template>
<div>
<button v-on:click="addLike">Likes</button>
<button v-on:click="addDislike">Dislikes</button>
</div>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>
<script>
export default{
data(){return {likes: 0,dislikes: 5}}
methods:{
addLike(){this.likes +=1;}
addDislike(){this.dislikes +=1;}
}
</script>
<style>
</style>создание функции внутри default
пример data
- Свойство data в компоненте всегда должна быть функцией, которая возвращает объект.
функция data возвращает объект
внутри возвращаемого объекта описываются все поля или модели
Интерполяция
синтаксис
{{Модель}}
- встраивание поля в шаблон и
регистрация поля data в компонент
src\App.vue
<template>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>
<script>
export default{
data(){
return {likes: 0,dislikes: 5}
}
}
</script>
<style>
</style>
Рубрики
Директива v-slot
Директива v-slot была представлена как новый единый синтаксис в версии 2.6.0
Предназначен для именованных слотов и слотов с ограниченной областью видимости.
Он заменяет атрибуты slot и slot-scope, которые в настоящий момент объявлены устаревшими, но _не_ удалены и документированы здесь. Обоснование введения нового синтаксиса описано в этом RFC.
Получаем более читабельный код, особенно, если имеем дело с вложенными слотами, когда действительно трудно понять что к чему.
можно использовать только для компонентов и тегов template, но не в чистых HTML-тегах.