0xD34F

Чтобы несколько раз одно и то же дальше не писать, небольшой декоратор:

const queryIfSelector = f => x =>
  f(typeof x === 'string' ? document.querySelector(x) : x);

Как можно доставать данные из таблицы:

const getTableData = queryIfSelector(table =>
  Array.from(table.querySelectorAll('tbody tr'), tr =>
    Object.fromEntries(Array.from(tr.querySelectorAll('td'), td => [
      td.getAttribute('data-name'),
      td.querySelector('input').value,
    ]))
  )
);

// или

const getTableData = queryIfSelector(table =>
  Array.prototype.flatMap.call(table.tBodies, tbody =>
    Array.prototype.map.call(tbody.rows, tr =>
      Array.prototype.reduce.call(tr.cells, (acc, td) => (
        acc[td.dataset.name] = td.firstElementChild.value,
        acc
      ), {})
    )
  )
);

// или

const getTableData = queryIfSelector(table => {
  const result = [];
  const numHeadRows = table.querySelectorAll('thead tr').length;

  for (const input of table.querySelectorAll('tbody input')) {
    const td = input.closest('td');
    const i = td.parentNode.rowIndex - numHeadRows;
    const item = result[i] = result[i] || {};
    item[td.attributes['data-name'].value] = input.value;
  }

  return result;
});

Достаём:

const data1 = getTableData('#table1');
const data2 = getTableData(document.querySelector('#table2'));

Выполняете setState до получения ответа (метод onSearchChange).

Как называются - да без понятия, обычные компоненты:

const Component = Vue.extend(...);

Экземпляры создаёте не через шаблон/render-функцию других компонентов, а вручную вызываете конструктор и добавляете корневой элемент куда там вам надо:

document.body.appendChild(new Component(...).$mount().$el);

Удаление - так же вручную, вызываете метод $destroy и удаляете корневой элемент из DOM.

всё правильно, %d - это количество дней в пределах месяца

хотите увидеть полное количество дней - используйте %a

for (name, items) in cook_book:
  print('\n%s:' % name.capitalize())
  for (ingredient, quantity, unit) in items:
    print('%s, %d %s' % (ingredient, quantity * person, unit))

document.querySelector('textarea').addEventListener('keydown', e => e.preventDefault());

или

<textarea readonly></textarea>

$('table tr').get().reduce((acc, n) => acc.then(() => $.ajax(...)), $.Deferred().resolve());

UPD. https://jsfiddle.net/zgf93och/1/

Добавляете свойство, которое будет представлять выбранный пункт select'а. Вместо метода getMonthRate делаете вычисляемое свойство:

<select v-model="selected">
  <option v-for="item in options" :value="item.value">
    {{ item.title }}
  </option>
</select>

data: () => ({
  selected: null,
  ...
}),
computed: {
  monthRate() {
    if (this.selected === 'year') {
      return this.percent / 12 / 100;
    } else if (this.selected === 'month') {
      return this.percent / 100;
    } else {
      return 0;
    }
  },
},

UPD.

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

А насколько разной? То, что есть сейчас, можно значительно упростить: в качестве value вместо строк будут числа, напрямую подставляемые в формулу - 1/12 для year, 1 для month, 0 для остальных. Тогда вычисляемое свойство станет гораздо короче:

monthRate() {
  return this.percent * this.selected / 100;
},

Кого и куда будем вставлять:

const el = document.querySelector('здесь селектор родительского элемента');
const text = '|||';

Вставляем:

Array.prototype.forEach.call(
  el.children,
  (n, i) => i && n.before(text)
);

// или

for (const n of el.children) {
  if (n.nextElementSibling) {
    n.insertAdjacentText('afterend', text);
  }
}

// или

for (let i = 1; i < el.children.length; i++) {
  el.insertBefore(document.createTextNode(text), el.children[i]);
}

// или

(function insert(i, n = el.children.item(i)) {
  if (n) {
    n.replaceWith(text, n);
    insert(-~i);
  }
})(1);

// или

el.querySelectorAll(':scope > * + *').forEach(n => {
  n.outerHTML = text + n.outerHTML;
});

const gallerySelector = '.js-product__item';
const previewSelector = '.view__item img';
const mainImageSelector = '.js-product__img--current';
const showImage = preview => preview
  .closest(gallerySelector)
  .querySelector(mainImageSelector)
  .src = preview.src;

document.addEventListener('click', ({ target: t }) =>
  t.matches(previewSelector) && showImage(t)
);

// или

document.querySelectorAll(previewSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => showImage(e.target));

array_change_key_case

https://ru.reactjs.org/docs/faq-ajax.html#where-in...

const keys = [
  [
    { on: [ 'ё', 'Ё' ], off: [ '`', '~' ], name: 'Backquote' },
    { on: [ '1', '!' ], off: [ '1', '!' ], name: 'Digit1' },
    ...
  ],
  ...
];


document.querySelector('.keyboard').innerHTML = keys.map(row => `
  <div class="row">${row.map(n => `
    <div class="key">
      <span class="${n.name} on">
        <span class="case down">${n.on[0]}</span>
        <span class="case up">${n.on[1]}</span>
      </span>
      <span class="${n.name} off">
        <span class="case down">${n.off[0]}</span>
        <span class="case up">${n.off[1]}</span>
      </span>
    </div>`).join('')}
  </div>`).join('');

Какой атрибут? Key? Нет такого атрибута у элемента, key для другого нужен.

Хотите знать id в обработчике клика - сделайте какой-нибудь другой атрибут, не key. Например:

data-id={user.id}

const elemId = +e.currentTarget.dataset.id;

const urls = [
  'http://sitename.net/somedirectory/14545/',
  'http://sitename.net/somedirectory/14545/count-1145',
  'http://sitename.net/somedirectory/14545/specific-345',
  'http://sitename.net/somedirectory/14545/count-1145/specific-345',
];

const getParams = (url, params) =>
  params instanceof Array && params.length
    ? (url.match(RegExp(`(${params.join('|')})-\\d+`, 'g')) || [])
        .map(n => n.split('-'))
        .reduce((acc, n) => (acc[n[0]] = n[1], acc), {})
    : {};

const params = urls.map(n => getParams(n, [ 'count', 'specific' ]));

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

const getParams = url =>
  Object.fromEntries((url
    .match(/[a-z]+-\d+/g) || [])
    .map(n => n.split('-'))
  );

.dropdown-checkbox ul.opened {
  display: block;
}

<label @click="opened = !opened">click me</label>
<ul :class="{ opened }">
  ...

data: () => ({
  opened: false,
}),