Рубрика: JS фреймворки

фреймворки на JavaScript

Рубрики
Vue компонент Vue компонент.script Vue основы

Структура секции Script в компоненте

Структура секции Script в компоненте содержит логику компонента, которую можно вынести в Mixins для переиспользования в других компонентах.

<script>
export default{
name: 'full-name',//имя компонента для секции template
components:{...},
data:()=>{return object},
props:{...},
methods:{...},
hook(){...},
}
</script>
Структура секции Script в компоненте во Vue.js
Vue.js
Рубрики
Laravel+Vue3 project Vue компонент Vue основы Vue.js

Регистрация компонентов Vue3 для Laravel проекта

Первый Vue3 компонент в Laravel проекте
Регистрация компонента может проводится двумя видами во Vue.js

1. Глобальная
регистрация компонента

  • явная регистрация
    До сих пор мы создавали компоненты с помощью Vue.component
  • не явная регистрация

2. Локальная
регистрация компонента

Глобальная регистрация часто не идеальна. Например, если вы используете систему сборки, такую как Webpack, глобальная регистрация всех компонентов означает, что даже если вы прекратите использовать компонент, то он всё равно будет включён в вашу сборку приложения. Это излишне увеличит количество JavaScript, который должны будут загрузить ваши пользователи.

В таких случаях вы можете определить свои компоненты как обычные объекты JavaScript

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

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

  • Файл директивы
    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 Mixins Vue компонент Vue3 логика

Структура Mixins в Vue

  • Структура примеси файла
    mixins/ИмяМексина.js
export default {
 props:{prop1},
 data(){},
 methods:{},
 computed:{},
 watch:{},
...
}
  • Использование примеси в компоненте
    На примере обращение к пропсу prop1
<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
 mixins:[ИмяМексина],
}
</script>
Mixins во Vue.js
Vue.js
Рубрики
Composition Api Vue декомпозиция Vue3 логика

Composition API (setup) в компоненте

setup
функция принимает параметры props

ref
функция используется для того чтобы переменная стала реактивной, которая параметром принимает значение

Всё что мы вернём функции setup будет доступно в шаблоне компонента <template>

<template>
<div>{{myvar}}</div>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(Значение);
  return {myvar};
 }
}
</script>

Состав
Динамически изменить переменную
Value

  • создаём стрелочную функцию, в которой внутри тела изменяем значение переменной, обращаясь к полю value
  • отметим возвращение функции addmyvar из setup для доступа в шаблоне компонента
    (привязка к button прослушивание события click)
<template>
<div>{{myvar}}</div>
<button @click="addmyvar">add</button>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(0);
  const addmyvar = () =>{
    myvar.value+=1;
  }
  return {myvar,addmyvar };
 }
}
</script>