Рубрика: Vue.js

фреймворк
JavaScript
с открытым исходным кодом
для создания пользовательских интерфейсов

похожий
Angular, React

плюсы
реактивность данных (обновлять данные на лету)

ссылка для отладки в браузере chrome

Рубрики
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';

Рубрики
Vue store.getters Vue компонент Vue компонент.script

Getters в компоненте Template

Vuex позволяет использовать Getters в компоненте Template или «геттеры» в хранилище. Можете считать их вычисляемыми свойствами хранилища. Как и вычисляемые свойства, результаты геттера кэшируются, на основе его зависимостей и пересчитываются только при изменении одной из зависимостей.

Getters — это функции, которые повторно вычисляются при изменении переменной в модуле

Getters в компоненте Template во Vue.js
Vue.js
Рубрики
HTML Input Vue components Vue project Vue UI Теги

MyInput.vue

MyInput.vue

простой UI тег Input в HTML5, который реализуется в файле MyInput.vue как компонент

UI Input во HTML5 и реализация в MyInput.vue
тег Input

Рубрики
Vue директива Vue основы

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

Директива v-slot была представлена как новый единый синтаксис в версии 2.6.0

Предназначен для именованных слотов и слотов с ограниченной областью видимости.

Он заменяет атрибуты slot и slot-scope, которые в настоящий момент объявлены устаревшими, но _не_ удалены и документированы здесь. Обоснование введения нового синтаксиса описано в этом RFC.

Получаем более читабельный код, особенно, если имеем дело с вложенными слотами, когда действительно трудно понять что к чему.

можно использовать только для компонентов и тегов template, но не в чистых HTML-тегах.

директива v-slot во Vue.js
Vue.js
Рубрики
Vue компоненты Vue.js

Компонент Tabs

Компонент Tabs регистрируется глобально не явно и выводит универсальные вкладки через props

универсальный компонент Tabs во Vue.js
Vue.js