Рубрика: Vue директива

v-…
атрибут к любому узлу и начинается с префикса вью

структура дериктивы

  1. v-НазваниеДериктивы=<<Значение>>
  2. v-НазваниеДирективы:Параметр=<<Значение>>

кавычки обрамляют начало и конец нашей директивы
т.е. код JavaScript с одной операцией

Рубрики
Vue.js Vue директива Vue кастомная директива

Собственная Директива

  • Файл директивы
    directives\VMyDirective.js
export default{
 name:MyDirective,
 //el - текущий элемент к которому привязана директива
 //хук - например Mounted
 Хук(el, binding){
 //binding.value значение передаваемое от директивы
 }
}
  • Хранилище собственных директив
    Удобнее содержать список собственных директив в одном файле как библиотеку.
    directives\index.js
import VMyDirective from './directives/VMyDirective';
export defualt[
 VMyDirective,
]
  • Регистрация цикла собственных директив
import App from './App';
//import VMyDirective from './directives/VMyDirective';
import directive from './directives';

const app = createApp(App);
//add.directive('mydirective',VMyDirective);
directives.forEach(directive=>{
 app.directive(directive.name,directive);
})
add.mount('#app');
  • Собственная директива
    используется каким-то компонентом
<template>
//binding- функция,объект и т.д.
<el v-mydirective="binding"></el>
</template>
Рубрики
Vue.js Vue основы Vue директива

Условная Директива

v-if

v-if директива if
bool выражение,которое возвращает true или false
если возвращает false, тогда тег удаляется
если возвращает true, тогда тег добавляется
<тег v-if="bool"/>

v-else

v-else директива else
если директива v-if возвращает false, тогда тег добавляется
если директива v-if возвращает true, тогда тег удаляется
<тег v-else/>
Рубрики
Vue.js Vue директива Var директива v-if

Директива «Отрисовка по условию» в Vue

Директива v-if или отрисовка по условию
вывести надпись, когда список например постов пустой

Если условие в v-if не выполняется, то элемент полностью удаляется из DOM дерева.

v-if
директива условие

если эта директива true, то блок, на котором прикреплена директива мы будем видеть (posts.length>0).
В обратной ситуации выведем какую то надпись

v-else
директива исключения

если не выполнилась v-if

v-else-if
директива исключения с условием

может сколько угодно быть. Так же создаётся условие и по цепочке проверяется до тех пор, пока какое то из условий не будет равняться true. И всю эту цепочку можно закончить директивой v-else.

v-show
директива похожая v-if

Если значение false, то блок получает стиль display:none.
Элемент просто скрывается, но в DOM дереве он всё ещё находится.

директива v-if во Vue.js
Vue.js
Рубрики
Vue.js Vue директива Vue директива v-model Vue project

Директива v-model

Директива v-model
PostForm

src\components\PostForm.vue 

<template>
<div class="app">
<form @submit.prevent>
<h4>Создание поста</h4>

<input 
type="text" 
v-model="post.title"
class="input"
placeholder="Название">

<input 
type="text" 
v-model:"post.body"
class="input"
placeholder="Описание">

<button 
class="btn"
вешаем слушатель события при нажатии на кнопку
@click="createPost"
>Создать</button>
</form>
</template>

<script>
export default{
data(){
return {
post{
title:'',
body:'',
}
}
}
methods:{
 createPost(event){
 this.post.id=Date.now();

 this.posts.push(newPost);
 this.title='';
 this.body='';
} 
}
</script>

<style >
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>
Рубрики
Vue.js Vue директива Vue директива v-for Vue project

Директива v-for

Директива v-for или циклы будет использоваться в компоненте на примере посты (3)
Добавление минимального количества стилей в секции style

директива v-for во Vue.js
Vue.js