0xD34F

Как я понимаю, при клике я каждый раз вызываю функцию и переменная val опять принимает значение равное нулю?

$(document).on('click', '.value-btn-plus, .value-btn-minus', function() {
  const $this = $(this);
  const change = $this.hasClass('value-btn-plus') ? 1 : -1;

  $this
    .closest('.input-box')
    .find('.value-text')
    .text((i, text) => Math.max(0, +text + change));
});

document.addEventListener('click', ({ target: t }) => {
  const change = +t.matches('.value-btn-plus') || -t.matches('.value-btn-minus');
  if (change) {
    const valueEl = t.closest('.input-box').querySelector('.value-text');
    valueEl.innerText = Math.max(0, +valueEl.innerText + change);
  }
});

const numberValidator = str => /^\d+$/.test(str);

// можно и наоборот - вместо проверки, что все символы являются цифрами,
// убедиться, что отсутствует хотя бы один не являющийся цифрой
const numberValidator = str => !/\D/.test(str);

Про let слышал, но нужно сделать без него

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() { 
      console.log(i);
    }, 1000);
  })(i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() { 
    console.log(+this);
  }.bind(i), 1000);
}

for (var i = 0; i < 10; i++) {
  setTimeout(console.log, 1000, i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(new Function(`console.log(${i})`), 1000);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(10 - i--);
  }, 1000);
}

<div class="container">
  <div class="yellow"></div>
  <textarea></textarea>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

textarea {
  background: #47f;
  line-height: 20px;
  resize: none;
}

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  const maxHeight = 300;
  const height = 20 * this.value.split('\n').length;
  this.style.height = `${Math.min(height, maxHeight)}px`;
});

textarea.dispatchEvent(new Event('input'));

из-за того, что при первичном рендере input №2 не существует, на него не применяется библиотека VeeValidate

при нажатии значение меняется у объекта для фильтрации... но не обновляет таблицу

Angular ignores changes within (composite) objects.

$('.pups').each(function() {
  this.innerHTML -= -2;
});

// или

$('.pups').text((i, text) => Number(text) + 2);

// или

document.querySelectorAll('.pups').forEach(n => {
  n.innerText = -~-~n.innerText;
});

// или

for (const n of document.getElementsByClassName('pups')) {
  n.textContent = parseInt(n.textContent) + 2;
}

могу ли я теперь использовать его на странице как...

как сделать так, чтобы внутри элемента можно было писать какие-то теги и все это запихнуло в контент?

import { query, animateChild } from '@angular/animations';

animations: [
  trigger('parentAnimation', [
    transition(':leave', [
      query('@itemAnim', [
        animateChild()
      ])
    ])
  ]),
  trigger('itemAnim', [
    transition(':enter', [
      animate(500)
    ]),
    transition(':leave', [
      group([
        animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })),
        animate('0.5s 0.2s ease', style({ opacity: 0 }))
      ])
    ])
  ])
]

if (this.paused) {
  this.play();
} else {
  this.pause();
}

// или

this[this.paused ? 'play' : 'pause']();

Сделать замену при нажатии кнопки Enter?

• Многократные вызовы setInterval - при каждом событии scroll (из-за этого счётчики работают гораздо быстрее, чем запланировано)
  
• Общая для всех счётчиков переменная текущего значения (вследствие чего шаг счётчиков вовсе не единица)
  
• Неверное условие окончания работы счётчика; или неверное место увеличения текущего значения счётчика - после его перезаписи (отсюда несоответствие заданного и реального максимальных значений счётчиков)
  
• После того как все счётчики завершили свою работу вы не прекращаете вызывать count (да, внешне это никак не проявляется, но всё равно - как-то небрежно)
  

let intervalId = null;

$(window).on('scroll', function() {
  const scr = $(this).scrollTop();
  const elem = $('.count-wrapper').offset().top;

  if (scr > elem - 400 && !intervalId) {
    intervalId = setInterval(count, 10);
  }
}).scroll();

function count() {
  let countEnd = true;

  $('.count span').each(function() {
    const num = $(this).data('num');
    const currNum = $(this).text();

    if (currNum < num) {
      $(this).text(+currNum + 1);
      countEnd = false;
    }
  });

  if (countEnd) {
    clearInterval(intervalId);
  }
}

на второй возникает ошибка, что я делаю не так?

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

data: () => ({
  input: '',
}),
watch: {
  input(v) {
    this.input = v.split('1').join('2');
  },
},

<textarea v-model="input" @input="onInput"></textarea>

data: () => ({
  input: '',
}),
methods: {
  onInput() {
    this.input = this.input.split('1').join('2');
  },
},

Все делал по этой документации...

<section v-if="show" transition="fade"></section>

<transition name="fade">
  <section v-if="show"></section>
</transition>

transition(name="fade")
  section(v-if="show")

{{#Status}}
  <div>{{Title}}</div>
  {{#Items}}
    <div>{{Name}}: {{Count}}</div>
  {{/Items}}
{{/Status}}