Рубрика: Vue основы

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

Vue директива v-on

  • Автор записи Автор: bo52
  • Дата записи 17.04.2022
  • структура использования директивы в теге как атрибут
    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>
Рубрики
Vue Mixins Vue.js

Примеры Vue Mixins

  • Автор записи Автор: bo52
  • Дата записи 17.04.2022

mydialog
компонент модальное окно

у него есть props show и в зависимости от этого пропса данное окно видимое или не видимое
есть функция, которая изменяет значение этого атрибута, например делает emit

  • использование для компонента
    List
    кастомный выпадающийся список
  • создание мексина
    может быть видим или не видим.
    есть функция, которая значение это меняет
    mixins\toggleMixin.js
export default{
 props:{
  show:{type:Boolean,default:false}
 },
 methods:{
   hideDialog(){
     this.$emit('update:show',false);
   }
 },
}
  • вызов миксина (пропса)
    в каком то компоненте в проекте
<template>
{{show}}
</template>
<script>
import toggleMixin from './mixins/toggleMixin';
export default {
 mixins:[toggleMixin],
}
</script>
Рубрики
Vue компонент.script.data

data в компоненте

создание функции внутри 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>
data в компоненте во Vue.js
Vue.js
Рубрики
Vue вызов в компоненте Vue основы

Вызов в компоненте

Событие

Объект вызывается как событие тега без возвращения значения

<template>
<a @click="Объект">test</a>
</template>

Атрибут

Присвоить значению атрибута тега от Объекта

<template>
<a :title="Объект">test</a>
</template>

Объект

  • имя функции
  • значение
  • javascript выражение
Рубрики
Laravel Vue webpack.mix.js

Абсолютный и Относительный путь для Vue.js в Laravel

Абсолютный путь

  • файл webpack.mix.js в корне проекта
    (пример сократить путь к компонентам)
const mix = require('laravel-mix');

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
     'components':path.resolve(__dirname,'resources/components/')
    },
  },
});

любой файл, связанный с vue 

../Project/resources/components/dir1/dir2/comp.js
import comp from 'root/dir1/dir2/comp';
../Project/resources/components/dir1/dir2/comp.vue
import comp from 'root/dir1/dir2/comp.vue';