0xD34F

const $picker = $('.datepicker-here');
$picker.datepicker({
  onRenderCell(date, cellType) {
    if (cellType === 'day') {
      const picker = $picker.data('datepicker');
      const selectedDate = picker && picker.selectedDates[0];
      if (selectedDate && date > selectedDate && date <= +selectedDate + 86400000 * 3) {
        return {
          disabled: true,
        };
      }
    }
  },
});

Добавьте return this в конец каждого метода.

Задать элементу transition:

.item {
  transition: transform 1s;
}

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

.move {
  transform: translateY(150px);
}

Переключать класс при клике:

$(document).on('click', '.item', function() {
  $(this).toggleClass('move');
});

https://jsfiddle.net/rx2tgc0m/

ИЛИ

Можно обойтись без js - перед элементом прячем чекбокс; сам элемент делаем label'ом, который будет переключать состояние этого чекбокса; смещаем элемент, если перед ним находится отмеченный чекбокс:

<input type="checkbox" id="xxx">
<label class="item" for="xxx">
  ...

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .item {
  transform: translateY(150px);
}

https://jsfiddle.net/56y7vwjd/

Реализуем поддержку директивы v-model компонентом f-select - он должен принимать параметр value, который будет определять значение элемента <select> внутри компонента, а при выборе пользователем какого-то пункта выбранное значение должно отправляться родителю:

<select
  :value="value"
  @input="$emit('input', $event.target.value)"
  ...

Добавим в родительский компонент свойство country, и свяжем его c экземпляром компонента, который ответственен за выбор страны:

<f-select
  v-model="country"
  ...

Теперь для экземпляра компонента, ответственного за выбор города, можно значение параметра disabled поставить в зависимость от выбора страны:

<f-select
  :disabled="!country"
  ...

jsfiddle.net/4ugta2v5

Есть такая штука - делегирование называется.

Пример с добавлением новых элементов.

Оберните текст в span'ы и задавайте background им:

<div class="xxx"><span>hello, world!!</span></div>
<div class="xxx"><span>fuck the world</span></div>
<div class="xxx"><span>fuck everything</span></div>
<div class="xxx"><span>69</span></div>
<div class="xxx"><span>187</span></div>
<div class="xxx"><span>666</span></div>

.xxx {
  display: inline-block;
  width: 250px;
}

.xxx > span {
  background: #ddf;
}

Так?

data: () => ({
  items: [ '...', '...', ... ],
}),

<a v-for="(n, i) in items" :href="`#item_${i}`">{{ n }}</a>
<ul>
  <li v-for="(n, i) in items" :id="`item_${i}`">{{ n }}</li>
</ul>

Так нормально будет?

SELECT COUNT(*) FROM users

$result[0] < 0

То есть, по-вашему, может быть отрицательное количество пользователей. Ну-ну.

<div class="range">
  <input type="range" min="0" max="100" step="1" value="20">
  <input type="text" value="20">
</div>

const range = document.querySelector('.range [type="range"]');
const text = document.querySelector('.range [type="text"]');
range.oninput = () => text.value = range.value;
text.oninput = () => range.value = text.value;

// или

document.querySelector('.range').addEventListener('input', e => {
  e.currentTarget.querySelectorAll('input').forEach(n => n.value = e.target.value);
});

// или

const inputs = document.querySelectorAll('.range input');
const onInput = e => inputs.forEach(n => n.value = e.target.value);
inputs.forEach(n => n.addEventListener('input', onInput));

Если export default встречается более одного раза, то при импорте будет непонятно, что именно надо импортировать.

Вы в :hover забыли transition написать перед opacity и transform.

Во-первых, вместо клика надо обрабатывать событие change.

Во-вторых, вместо того, чтобы каждый раз назначать обработчик всем чекбоксам, добавим делегированный обработчик контейнеру. То же, кстати, касается и удаления.

$('.add-task').click(function() {
  const task = $('.input-task').val();
  if (!task) {
    alert('пусто');
    return false;
  }

  $('.todos-container').append(`
    <div class="todo-container">
      <label>
        <b class="task-text">${task}</b>
        <input class="toggle-task" type="checkbox">
      </label>
      <button class="del-task">delete</button>
    </div>
  `);

  $('.input-task').val('');
});

$('.todos-container')
  .on('change', '.toggle-task', function() {
    $(this)
      .closest('.todo-container')
      .find('.task-text')
      .toggleClass('task-done', this.checked);
  })
  .on('click', '.del-task', function() {
    $(this).closest('.todo-container').remove();
  });

.task-done {
  text-decoration: line-through;
}

require('../../models/knowledges')

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

data: () => ({
  showChars: 0,
  ...
}),

Вырезаете соответствующее количество символов из полной строки и отображаете:

computed: {
  typedString() {
    return this.string.slice(0, this.showChars);
  },
},

<h2>{{ typedString }}</h2>

Запускаете интервал, по которому увеличиваете длину отображаемой строки:

mounted() {
  const intervalID = setInterval(() => {
    if (++this.showChars === this.string.length) {
      clearInterval(intervalID);
    }
  }, 50);
},

https://jsfiddle.net/397wqoby/

Что нужно добавить?

В первую очередь нужно убрать - отдельные функции расчёта суммы. Ну а добавить общую. Которая будет считать сумму полностью, и висеть на элементах, от значений которых зависит сумма, как обработчик события change.

Потому что центрируется содержимое section, а не содержимое содержимого section. Хотите, чтобы текст в h1 был по центру - добавьте text-align: center;.

Я слышал, что есть метод insert - указываете позицию, и элементы, которые хотите вставить.