Рубрики
Laravel

Настройки в шаблоне Laravel проекта

  • Первый модульный компонент Vue3 в Laravel проекте
    resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>
  • регистрируем компонент Vue в Laravel проекте
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
import MyTest from './components/MyTest.vue';

const app=createApp({});
app.component('my-test',MyTest);

app.mount('#app');
  • На шаблоне Laravel проекта
    (пример resources\views\index.blade.php)
    размещение Vue3 компонента в атрибуте id тега (примере my-test)
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app">
    <my-test/>
    </div>

    <script src="./js/app.js"></script>
    </body> 
</html>
  • создание роуминга Laravel
    для шаблона (пример resources\view\index.blade.php)
    как главной страницы
    на routes\web.php
...
Route::get('/', function () {
    return view('index');
});
...
Рубрики
Vue компоненты Vue.js

Структура компонента Vue3

Рубрики
Vue.js

Первый Vue3 компонент в Laravel проекте

  • Первый модульный компонент Vue3 в Laravel проекте
    resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>
  • регистрируем компонент Vue в Laravel проекте
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from 'components/../App.vue';
//компоненты
import comp1 from 'components/comp1.vue';
import comp2 from 'components/comp2.vue';
//создание главного компонента
//и регистрация внутри него других компонентов
const app=createApp(App);
app.component('comp-1',comp1);
app.component('comp-2',comp2);
app.mount('#app');
  • На шаблоне Laravel проекта
    (пример resources\views\index.blade.php)
    размещение Vue3 компонента в id=»app» (примере my-test)
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app"></div>
    <script src="./js/app.js"></script>
    </body> 
</html>
  • создание роуминга Laravel
    для шаблона (пример resources\view\index.blade.php)
    как главной страницы
    на routes\web.php
...
Route::get('/', function () {
    return view('index');
});
...
Рубрики
JavaScript основы ООП "Сlass"

Class

  • не наследуемый класс с именем Class1 без объявленных полей
Class1:Class {
}
  • не наследуемый класс с именем Class1 с объявленным полем внутри конструктора и обращением снаружи через get и set
Class1:Class {
 get Field(){
  return this.field;
 }
 set Field(val){
  this.field=val;
 }
 constructor(atr){
  this.field=atr;
 }
} 
  • наследование
    дочерний класс относительно другого класса
Animal:Class {
 constructor(name){
  this.name=name;
 }
 speak(){
  console.log(`${this.name} издаёт звук.`);
 }
}
Class Dog extends Animal {
  constructor(name){
  //вызывает конструктор super класса и передаёт параметр name 
  super(name); 
  }

  speak() {
    console.log(`${this.name} лает.`);
  }
}
let d = new Dog ('Митци');
d.speak(); // Митци лает
Рубрики
ООП "Паттерны"

ООП Patterns «Понятие»

Паттерн
шаблон проектирования

Часто встречающиеся решение определённой проблемы при проектировании архитектуры
(веб-приложения или любой другой программы)

Способ решения периодически возникающих проблем некоторых типовых задач

Паттерн — это не

  • не библиотека
  • не алгоритмы, которые предоставляют чёткий набор действий
  • не набор определённых функций
  • не набор определённых методов
  • не готовое решение, которое можно скопировать в свой проект