Андрей Седышев

Сервис для работы с АПИ, сервис для работы с local storage, сервис для работы с куками, сервис для вебсокетов, и для всего, на что хватит фантазии :-)
Вообще, как тут уже сказали - если в вашем проекте нет сервисов, то и папка для них не нужна. И не нужно их создавать, только потому, что так сделано в каком-то руководстве.

Вариант "в лоб" - не использовать "сахарок" в виде v-model, а использовать

<input :value="user.getAttribute('name')" @input="e => user.setAttribute('name', e.target.value)"/>

А вообще, зачем такая странная организация класса модели? Почему не отказались от определения свойств User явно? Была бы и наглядность и дополнение кода от IDE.

Второй вариант, если уж прям так хочется извращаться с подобной реализацией модели, использовать механизм геттеров/сеттеров самого языка:

// age будет высчитывать возраст по birthday
  Object.defineProperty(this, "age", {
    get: function() {
      var today = new Date();
      var yearDelta = today.getFullYear() - this.birthday.getFullYear();

      if (today.getMonth() > this.birthday.getMonth() ||
        (today.getMonth() === this.birthday.getMonth() && today.getDate() >= this.birthday.getDate())) {
        return yearDelta;
      }

      return yearDelta - 1;
    }
  });

Паттерн, о котором вы говорите, называется Fluent interface

Собственно, ссылка ведёт на пример реализации:

var Car = (function(){

	var speed, color, doors, pub;
		 
	function setSpeed(new_speed) {
		speed = new_speed;
		return pub;
	}
	 
	function setColor(new_color) {
		color = new_color;
		return pub;
	}
	 
	function setDoors(new_doors) {
		doors = new_doors;
		return pub;
	}

	pub = {
		'setSpeed': setSpeed,
		'setColor': setColor,
		'setDoors': setDoors,
	};

	return pub;

})
	
// Обычная реализация
myCar2 = Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
	 
// Текучий интерфейс
myCar = Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);

Да хотя бы так:

$(document).ready(function () {
  var $tabs = $('.s-services__tab_item');
  $tabs.first().addClass('active');
  $tabs.not('.active').hide();
  $('.s-services__controls_item').on('click',function (e) {
    e.preventDefault();

    var tabItem = $(this).closest('.s-services__controls_item'),
      tabContentItem = $('.s-services__tab_item'),
      tabItemPosition = tabItem.data('services');

    tabContentItem.filter('.s-services__tab_item-' + tabItemPosition)
      .fadeIn()
      .siblings()
      .hide();

    $(e.currentTarget)
      .addClass('active')
      .siblings()
      .removeClass('active');
  });
});

https://api.jquery.com/first/

jQuery - way:

А почему сервер возвращает 200, а не 301/302?
Решением в вашем случае будет отправка ответа от сервера с кодом 302 и кастомным заголовком (типа X-Redirect), и последующей его проверкой в js.

Так, например, сделано в Yii2:

if (Yii::$app->getRequest()->getIsAjax()) {
                if (Yii::$app->getRequest()->getHeaders()->get('X-Ie-Redirect-Compatibility') !== null && $statusCode === 302) {
                    // Ajax 302 redirect in IE does not work. Change status code to 200. See https://github.com/yiisoft/yii2/issues/9670
                    $statusCode = 200;
                }
                if (Yii::$app->getRequest()->getIsPjax()) {
                    $this->getHeaders()->set('X-Pjax-Url', $url);
                } else {
                    $this->getHeaders()->set('X-Redirect', $url);
                }
            } else {
                $this->getHeaders()->set('Location', $url);
            }

И проверка:

$(document).ajaxComplete(function (event, xhr) {
            var url = xhr && xhr.getResponseHeader('X-Redirect');
            if (url) {
                window.location.assign(url);
            }
        });

Ну, и нужно помнить, что IE считает AJAX, который вернул не 200, ошибочным ответом. ¯\_(ツ)_/¯

Загружайте внешний скрипт из js примерно таким образом:

var loadScriptAsync = function(uri) {
    return new Promise((resolve, reject) => {
        var tag = document.createElement('script');
        tag.src = uri;
        tag.async = true;
        tag.onload = () => {
            resolve();
        };
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    });
}

var scriptLoaded = loadScriptAsync('external-script.js');

Ну, и далее:

scriptLoaded.then(function(){
  //код для выполнения после загрузки внешнего скрипта
});

Источник: https://medium.com/@vschroeder/javascript-how-to-e...

<button class="btn-filter" data-filter="foo1">.foo1</button>
<button class="btn-filter" data-filter="foo2">.foo2</button>
<button class="btn-filter" data-filter="foo3">.foo3</button>
<button class="btn-filter" data-filter="all">All</button>

$('.btn-filter').on('click', function (e) {
	var $el = $(e.target);
  var className = $el.data('filter');
  if (className) { filter(className) }
});

https://jsfiddle.net/0ogtxpba/

Массив posts у вас есть и в props и в data. Не надо так.
Далее. В момент инициализации компонента, posts === undefined, т.к. заполнится массив только после отработки метода getAllPosts

Я просто пишу обёртки над jquery-плагинами.
Пример из официальной документации: https://vuejs.org/v2/examples/select2.html

function onSubmit () {
  document.getElementById('osForm').style.display = 'none';
  document.getElementById('form_one_success').style.display = 'block';
  setTimeout(function () {
    document.getElementById('form_one_success').style.display = 'none';
    document.getElementById('osForm').style.display = 'block';
  }, 5000);
}

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

var getUrlSha = function(url) {
    return $.ajax({
      type: 'GET',
      url: 'sha1.php',
      data: {
        url: url
      }
    });
  };

  var getCommentsCount = function(url, sign) {
    return $.ajax({
      type: 'POST',
      url: 'https://c1api.hypercomments.com/1.0/streams/get',
      dataType: 'jsonp',
      cache: false,
      crossDomain: true,
      data: {
        body: '{"widget_id":11070,"link":"' + url + '"}',
        signature: sign
      }
    });
  };

  function getSumComments(url) {
    return getUrlSha(url).then(function(sign) {
      return getCommentsCount(url, sign);
    });
  }


  getSumComments('https://www.metrtv.ru/articles/second_estate/11617').then(function(count) {
    console.log(count);
  });

https://jsfiddle.net/oag3kkgt/3/

Отправка e-mail - тема, в которой на самом деле очень много нюансов. От PHP тут мало что зависит, он просто передаёт ваше письмо MTA.
Если хотите добиться приемлемой доставляемости, используйте специальный сервис типа mailgun.com или аналогичных.