0xD34F

<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}}

$elems.not(i => i % N).addClass('xxx');

// или

elems.forEach((n, i) => n.classList.toggle('xxx', !(i % N)));

// или

for (let i = 0; i < elems.length; i += N) {
  elems[i].classList.add('xxx');
}

$str = '< p > text </p>';

$count = 0;
$str = preg_replace_callback('/< ?\/?\w+ ?\>/', function() use(&$count) {
  $count++;
  return "#p$count";
}, $str);

$str = '< p > text </p> <b> fdsgdfsg</b> <p>???</p> <div>hello, world!!< /div>';

$count = [];
$str = preg_replace_callback('/< ?\/?(\w+) ?\>/', function($matches) use(&$count) {
  $key = $matches[1];
  $count[$key] = isset($count[$key]) ? $count[$key] + 1 : 1;
  return "#$key$count[$key]";
}, $str);

array2.forEach(n => {
  const obj = array1.find(m => m.name === n.name);
  if (obj) {
    Object.assign(obj, n);
  } else {
    array1.push({ ...n });
  }
});

$(document).on('click', '[data-slide-to]', function() {
  $(this).closest('.carousel').carousel(+this.dataset.slideTo);
});