Dima Polos

Вместо изменения свойства top нужно менять свойство translate. В этом случае при анимации будет задействована видеокарта и она будет сильно плавнее.

includeHTML - позволяет "на-лету" вставлять HTML-блоки в разметку ("сшивать" через тег или используя javascript) и проверять вёрстку (отображение) локально: помимо http/https, поддерживается протокол file:/// .
При необходимости, теги можно легко заменить на include-функции для PHP.
Также можно создать полностью рабочее меню с разной разметкой страниц (layouts), которое будет полноценно функционировать при клике (даже без размещения на хостинге!).

browsersync любой браузер будет обновлять (и даже все браузеры сразу) + он удобнее в использовании и более конфигурируемый, никто уже лайврелоадами не пользуется года 2-3

Не знаю, что ещё можно добавить к уже сказанному в документации. Думаю, наглядная демонстрация поможет лучше понять, что к чему.

Пример номер раз - key нет. Пример номер два - key есть. Тыкаем кнопочку и смотрим, что происходит со значениями в инпутах. В первом случае они остаются на месте, во втором начинают ездить по кругу (аналогично элементам массива). Почему так? Возвращаемся к процитированному вами отрывку из документации, и осознаём, что в первом случае

Vue использует алгоритм, минимизирующий перемещение элементов

а во втором

Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей

Можно.

А вообще в unity можно собрать под WebGL https://docs.unity3d.com/Manual/webgl-browsercompa...

$('.products').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        centerPadding: '20px',
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1
                }
            }
        ]
    });

Вообще не нужно ничего конвертировать, это и так уже объект.

let x = [1, 2, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [1, 2, 3, [

], 4, 5], 4, 
[1, 2, 3, [], 4, 5],
5], 4, 5], 4, 5], 4, 5],
[1, 2, 3, [], 4, 5],
 4, 5];

console.log(typeof x) // внезапно "object"

в такой объект

UPD: после уточнения задачи:

function convert(data) {
	return Array.isArray(data) ? Object.assign({}, data.map(convert)) : data
}
// но там же под капотом все равно перебор

console.log(convert(arr))

https://jsfiddle.net/8cLs4601/

у main.js такой код
import {one, two} from "./nums";

• во-первых import появился только в ES6 и в браузерах вроде не доступен
  
• во-вторых вы импортировали, но не подключили nums.js — в браузере посмотрите, подгрузился ли он, я сразу скажу — нет, вам нужно собра
  

ть исходники (например через webpack)

Добавим в компонент свойство, указывающее, сколько элементов надо отображать:

data: () => ({
  numShow: 0,
  ...

С его помощью будем получать массив отображаемых элементов:

computed: {
  itemsToShow() {
    return this.items.slice(0, this.numShow);
  },
  ...

Создадим методы для показа следующего или скрытия предыдущего элемента - для этого достаточно делать +/- 1 количеству отображаемых элементов:

methods: {
  showNext() {
    this.numShow = Math.min(this.items.length, this.numShow + 1);
  },
  hidePrev() {
    this.numShow = Math.max(0, this.numShow - 1);
  },
  ...

Повесим этим методы в качестве обработчиков событий завершения показа и скрытия элемента:

<transition-group
  @after-enter="showNext"
  @after-leave="hidePrev"
  ...
>
  <div 
    v-for="(n, i) in itemsToShow"
    :key="n.id"
    ...
  >
  ...

Запуск процесса анимации - только из крайних положений, когда ничего не отображается или отображается всё:

methods: {
  run() {
    this.numShow += ({
      0: 1,
      [this.items.length]: -1,
    })[this.numShow] || 0;
  },
  ...

https://jsfiddle.net/6Ljzpeu2/

А вообще, в документации есть пример на эту тему.

1. У вас разметка неправильная, блоки не везде закрытые.
2. Вы не подключили основные стили слайдера.
3. Вот как надо: тыц

Тебе нужна модель. Таким образом при вводе значения в input, это значение будет и в твоей переменной. А в vue работаешь уже с этой переменной. Но знай, при ее изменении, значение в input тоже изменится.
<input id="date" type="date" v-model="start_day">

Вот тут работа с формами

так у вас span - и есть первый child внутри родительского блока box, поэтому к нему и применяются стили.
если вы хотите выделять только среди box__item то оберните их ещё в один див, или используйте nth-of-type, как верно подметили zoozag и Stimulate

window.getComputedStyle(element).transform
https://jsfiddle.net/hp06w4wq/2/

Осталось просуммировать эти координаты с начальными.

Правильный таск для gulp:

gulp.task('js', function() {
  return browserify({ entries: 'src/js/main.js'})
    .transform(babelify, { presets: ['es2015'] })
    .transform(vueify)
    .bundle()
      .pipe(source('app.js'))
      .pipe(gulp.dest('public/js'))
      .pipe(connect.reload());
});

Оберните формой и повесьте слушателя submit

<form method="post" action="send/to/server">
  <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
  <button id="send" onclick="buttonotprav()" class="controls-elements" type="submit">Отправить</button>
</form>

$('form').on('submit', event => {
  event.preventDeailt();
  ... // тут можно получить ответ от сервера, если ajax'ом сделать
})