{"id":298571,"date":"2020-02-12T15:00:14","date_gmt":"2020-02-12T15:00:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=298571"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=298571","title":{"rendered":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Vue.js"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\">JavaScript \u2014 \u044d\u0442\u043e \u0434\u0443\u0448\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 JavaScript-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. Vue.js \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043d\u0435\u0441\u0442\u0438 \u043a \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c.<\/p>\n<p>  Vue.js \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0415\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Vue, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vue.js \u0438 \u0441 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gc\/bh\/g1\/gcbhg1ndc0-kd3usv2yigyzstjo.jpeg\"><\/a><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e Vue.js-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u043e \u043d\u0435\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445. <a href=\"https:\/\/github.com\/vivekcgi\/sample-notes-app\">\u0412\u043e\u0442<\/a> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <a href=\"https:\/\/github.com\/vivekcgi\/sample-notes-app-service\">\u0412\u043e\u0442<\/a> \u2014 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0435\u0433\u043e \u0431\u044d\u043a\u0435\u043d\u0434\u0430. \u041c\u044b, \u043f\u043e \u0445\u043e\u0434\u0443 \u0434\u0435\u043b\u0430, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0449\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Vue.js \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/font><\/h2>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u2014 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438.<\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 Vue.js 3:\n<pre><code class=\"javascript\">vue create notes-app<\/code><\/pre>\n<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:\n<pre><code class=\"javascript\">{ \u00a0\u00a0&quot;name&quot;: &quot;notes-app&quot;, \u00a0\u00a0&quot;version&quot;: &quot;0.1.0&quot;, \u00a0\u00a0&quot;private&quot;: true, \u00a0\u00a0&quot;scripts&quot;: { \u00a0\u00a0\u00a0\u00a0&quot;serve&quot;: &quot;vue-cli-service serve&quot;, \u00a0\u00a0\u00a0\u00a0&quot;build&quot;: &quot;vue-cli-service build&quot;, \u00a0\u00a0\u00a0\u00a0&quot;lint&quot;: &quot;vue-cli-service lint&quot; \u00a0\u00a0}, \u00a0\u00a0&quot;dependencies&quot;: { \u00a0\u00a0\u00a0\u00a0&quot;axios&quot;: &quot;^0.19.1&quot;, \u00a0\u00a0\u00a0\u00a0&quot;buefy&quot;: &quot;^0.8.9&quot;, \u00a0\u00a0\u00a0\u00a0&quot;core-js&quot;: &quot;^3.4.4&quot;, \u00a0\u00a0\u00a0\u00a0&quot;lodash&quot;: &quot;^4.17.15&quot;, \u00a0\u00a0\u00a0\u00a0&quot;marked&quot;: &quot;^0.8.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;vee-validate&quot;: &quot;^3.2.1&quot;, \u00a0\u00a0\u00a0\u00a0&quot;vue&quot;: &quot;^2.6.10&quot;, \u00a0\u00a0\u00a0\u00a0&quot;vue-router&quot;: &quot;^3.1.3&quot; \u00a0\u00a0}, \u00a0\u00a0&quot;devDependencies&quot;: { \u00a0\u00a0\u00a0\u00a0&quot;@vue\/cli-plugin-babel&quot;: &quot;^4.1.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;@vue\/cli-plugin-eslint&quot;: &quot;^4.1.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;@vue\/cli-service&quot;: &quot;^4.1.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;@vue\/eslint-config-prettier&quot;: &quot;^5.0.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;babel-eslint&quot;: &quot;^10.0.3&quot;, \u00a0\u00a0\u00a0\u00a0&quot;eslint&quot;: &quot;^5.16.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;eslint-plugin-prettier&quot;: &quot;^3.1.1&quot;, \u00a0\u00a0\u00a0\u00a0&quot;eslint-plugin-vue&quot;: &quot;^5.0.0&quot;, \u00a0\u00a0\u00a0\u00a0&quot;prettier&quot;: &quot;^1.19.1&quot;, \u00a0\u00a0\u00a0\u00a0&quot;vue-template-compiler&quot;: &quot;^2.6.10&quot; \u00a0\u00a0} }<\/code><\/pre>\n<\/li>\n<li>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 <code>package.json<\/code>:\n<pre><code class=\"javascript\">npm install<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0430\u0437\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0448\u0430\u0433\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043d\u0438\u043c.<\/p>\n<h2><font color=\"#3AC1EF\">\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/font><\/h2>\n<p>  \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f (routing) \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 Vue.js-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 <code>vue-router<\/code>. \u042d\u0442\u043e \u2014 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043b\u044f Vue.js-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u0421\u0440\u0435\u0434\u0438 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0442\u043c\u0435\u0442\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<ul>\n<li>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b\/\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/li>\n<li>\u041c\u043e\u0434\u0443\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u0430.<\/li>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430, \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c, \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c.<\/li>\n<li>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Vue.js.<\/li>\n<li>\u0423\u0434\u043e\u0431\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a.<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 HTML5-API history, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f URL-\u0445\u044d\u0448\u0435\u0439, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 IE9.<\/li>\n<li>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u0432 \u043f\u0430\u043f\u043a\u0435 <code>router<\/code>, \u0444\u0430\u0439\u043b <code>index.js<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">import Vue from &quot;vue&quot;; import VueRouter from &quot;vue-router&quot;; import DashboardLayout from &quot;..\/layout\/DashboardLayout.vue&quot;;  Vue.use(VueRouter);  const routes = [ \u00a0\u00a0{ \u00a0\u00a0\u00a0\u00a0path: &quot;\/home&quot;, \u00a0\u00a0\u00a0\u00a0component: DashboardLayout, \u00a0\u00a0\u00a0\u00a0children: [ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path: &quot;\/notes&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name: &quot;Notes&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component: () =&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0import(\/* webpackChunkName: &quot;home&quot; *\/ &quot;..\/views\/Home.vue&quot;) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0] \u00a0\u00a0}, \u00a0\u00a0{ \u00a0\u00a0\u00a0\u00a0path: &quot;\/&quot;, \u00a0\u00a0\u00a0\u00a0redirect: { name: &quot;Notes&quot; } \u00a0\u00a0} ];  const router = new VueRouter({ \u00a0\u00a0mode: &quot;history&quot;, \u00a0\u00a0base: process.env.BASE_URL, \u00a0\u00a0routes });  export default router;<\/code><\/pre>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>routes<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b.<\/p>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 <code>children<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 \u0435\u0433\u043e \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0444\u0430\u0439\u043b <code>DashboardLayout.vue<\/code>). \u0412\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<pre><code class=\"html\">&lt;template&gt; \u00a0\u00a0&lt;span&gt; \u00a0\u00a0\u00a0\u00a0&lt;nav-bar \/&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;container is-fluid body-content&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;router-view :key=&quot;$router.path&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0&lt;\/span&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u2014 \u0442\u0435\u0433 <code>router-view<\/code>. \u041e\u043d \u0438\u0433\u0440\u0430\u0435\u0442 \u0440\u043e\u043b\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443.<\/p>\n<h2><font color=\"#3AC1EF\">\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/font><\/h2>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f Vue.js-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u043d\u0438 \u0434\u0430\u044e\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 DOM \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445.<\/p>\n<p>  \u041f\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<ol>\n<li>\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0439\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/li>\n<li>\u041d\u0435 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443.<\/li>\n<li>\u0412\u043a\u043b\u044e\u0447\u0430\u0439\u0442\u0435 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u044d\u0442\u043e \u043a\u043e\u0434, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u0440\u043e\u0434\u0435 \u0433\u043e\u0434\u0430, \u043f\u043e\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/li>\n<li>\u041d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0434, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0441 \u043d\u0435\u043a\u0438\u043c\u0438 API.<\/li>\n<\/ol>\n<p>  \u0417\u0434\u0435\u0441\u044c, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>NavBar<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f DOM-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0445\u0441\u044f \u043a \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>NavBar.vue<\/code>:<\/p>\n<pre><code class=\"html\">&lt;template&gt; \u00a0\u00a0&lt;nav class=&quot;navbar&quot; role=&quot;navigation&quot; aria-label=&quot;main navigation&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;navbar-brand&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=&quot;navbar-item&quot; href=&quot;\/home\/notes&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img align=&quot;center&quot; src=&quot;@\/assets\/logo.png&quot; width=&quot;112&quot; height=&quot;28&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0role=&quot;button&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;navbar-burger burger&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aria-label=&quot;menu&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aria-expanded=&quot;false&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data-target=&quot;navbarBasicExample&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span aria-hidden=&quot;true&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span aria-hidden=&quot;true&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span aria-hidden=&quot;true&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0&lt;\/nav&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 <code>DashboardLayout.vue<\/code>:<\/p>\n<pre><code class=\"javascript\">&lt;template&gt; \u00a0\u00a0&lt;span&gt; \u00a0\u00a0\u00a0\u00a0&lt;nav-bar \/&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;container is-fluid body-content&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;router-view :key=&quot;$router.path&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0&lt;\/span&gt; &lt;\/template&gt;  &lt;script&gt; import NavBar from &quot;@\/components\/NavBar&quot;; export default { \u00a0\u00a0components: { \u00a0\u00a0\u00a0\u00a0NavBar \u00a0\u00a0} }; &lt;\/script&gt;  &lt;style scoped&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/font><\/h2>\n<p>  \u0412 \u043b\u044e\u0431\u043e\u043c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0447\u0440\u0435\u0437\u0432\u044b\u0447\u0430\u0439\u043d\u043e \u0432\u0430\u0436\u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u043f\u0440\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438, \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432\u0441\u0442\u0430\u0451\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041e\u0442\u0432\u0435\u0442\u043e\u043c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Vue.js-\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432:<\/p>\n<ol>\n<li>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 (props) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/li>\n<li>\u041c\u0435\u0442\u043e\u0434 $emit() \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/li>\n<li>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (EventBus) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e, \u0438\u043b\u0438 \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e, \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043c\u0435\u043d \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u00ab\u0438\u0437\u0434\u0430\u0442\u0435\u043b\u044c\/\u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u00bb.<\/li>\n<\/ol>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Vue.js, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Add<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043d\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/li>\n<li>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>NoteViewer<\/code>, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043e\u0431 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435.<\/li>\n<\/ul>\n<p>  \u0412\u043e\u0442 \u0444\u0430\u0439\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Add<\/code> (<code>Add.vue<\/code>):<\/p>\n<pre><code class=\"html\">&lt;template&gt; \u00a0\u00a0&lt;div class=&quot;container&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card note-card&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card-header&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card-header-title title&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;title-content&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p v-if=&quot;addMode&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Add Note \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p v-else&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Update Note \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card-content&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;columns&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;column is-12&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;template&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;section&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-field label=&quot;Note Header&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-input \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-model=&quot;note.content.title&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&quot;input&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0placeholder=&quot;Note header&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/b-field&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-field label=&quot;Description&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-input \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-model=&quot;note.content.description&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&quot;textarea&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0placeholder=&quot;Note Description&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/b-field&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;buttons&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-button class=&quot;button is-default&quot; @click=&quot;cancelNote&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cancel \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/b-button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-button \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-if=&quot;addMode&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;button is-primary&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=&quot;addNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Add \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/b-button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-button \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-else \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;button is-primary&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=&quot;updateNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Update \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/b-button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/section&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/template&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default { \u00a0\u00a0props: { \u00a0\u00a0\u00a0\u00a0addMode: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: Boolean, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0required: false, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return true; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0note: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: Object, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0required: false, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: &quot;&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0description: &quot;&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isComplated: false \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0}, \u00a0\u00a0methods: { \u00a0\u00a0\u00a0\u00a0addNote() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$emit(&quot;add&quot;, this.note); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0updateNote() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$emit(&quot;update&quot;, this.note); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0cancelNote() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$emit(&quot;cancel&quot;); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} }; &lt;\/script&gt;  &lt;style&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0444\u0430\u0439\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>NoteViewer<\/code> (<code>NoteViewer.vue<\/code>):<\/p>\n<pre><code class=\"html\">&lt;template&gt; \u00a0\u00a0&lt;div class=&quot;container&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card note-card&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card-header&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;card-header-title title&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;column is-6&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;Created at {{ note.content.createdAt }}&lt;\/p&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;column is-6 &quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;buttons is-pulled-right&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-show=&quot;!note.content.isCompleted&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;button is-success is-small &quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=&quot;Mark Completed&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=&quot;markCompleted&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-icon pack=&quot;fas&quot; icon=&quot;check&quot; size=&quot;is-small&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-show=&quot;!note.content.isCompleted&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;button is-primary is-small&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=&quot;Edit Note&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=&quot;editNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-icon pack=&quot;fas&quot; icon=&quot;pen&quot; size=&quot;is-small&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;button is-primary is-small &quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=&quot;Delete Note&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=&quot;deleteNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-icon pack=&quot;fas&quot; icon=&quot;trash&quot; size=&quot;is-small&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;card-content&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:class=&quot;note.content.isCompleted ? 'note-completed' : ''&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;strong&gt;{{ note.content.title }}&lt;\/strong&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;{{ note.content.description }}&lt;\/p&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; export default { \u00a0\u00a0name: &quot;NoteViewer&quot;, \u00a0\u00a0props: { \u00a0\u00a0\u00a0\u00a0note: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: Object, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0required: true \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0}, \u00a0\u00a0methods: { \u00a0\u00a0\u00a0\u00a0editNote() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$emit(&quot;edit&quot;, this.note); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0deleteNote() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$emit(&quot;delete&quot;, this.note); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0markCompleted() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$emit(&quot;markCompleted&quot;, this.note); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} }; &lt;\/script&gt;  &lt;style&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b, \u0438\u0437\u0443\u0447\u0438\u043c \u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u044b <code>&lt;script&gt;<\/code>.<\/p>\n<p>  \u0412 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>props<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0438\u0445 \u0442\u0438\u043f\u043e\u0432. \u042d\u0442\u043e \u2014 \u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u043a\u043e\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0435 \u0443\u0447\u0430\u0441\u0442\u043a\u0438 \u043a\u043e\u0434\u0430, \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>$emit()<\/code>. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.<\/p>\n<p>  \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>Add<\/code> \u0438 <code>NoteViewer<\/code>. \u041e\u043f\u0438\u0448\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>Home.vue<\/code>, \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435, \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u044d\u0442\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0438\u043c\u0438:<\/p>\n<pre><code class=\"html\">&lt;template&gt; \u00a0\u00a0&lt;div class=&quot;container&quot;&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;columns&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;column is-12&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&quot;button is-primary is-small is-pulled-right&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title=&quot;Add New Note&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@click=&quot;enableAdd()&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;b-icon pack=&quot;fas&quot; icon=&quot;plus&quot; size=&quot;is-small&quot; \/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;columns&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&quot;column is-12&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;note-editor \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-show=&quot;enableAddNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:key=&quot;enableAddNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@add=&quot;addNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@cancel=&quot;disableAdd&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div v-for=&quot;(note, index) in data&quot; :key=&quot;index&quot;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;note-viewer \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-show=&quot;note.viewMode&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:note=&quot;note&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@edit=&quot;editNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@markCompleted=&quot;markCompletedConfirm&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@delete=&quot;deleteNoteConfirm&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;note-editor \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-show=&quot;!note.viewMode&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:add-mode=&quot;false&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:note=&quot;note&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@update=&quot;updateNote&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@cancel=&quot;cancelUpdate(note)&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0\u00a0\u00a0&lt;\/div&gt; \u00a0\u00a0&lt;\/div&gt; &lt;\/template&gt;  &lt;script&gt; \/\/ @ is an alias to \/src \/\/ import NoteEditor from &quot;@\/components\/NoteEditor.vue&quot;; import NoteEditor from &quot;@\/components\/Add.vue&quot;; import NoteViewer from &quot;@\/components\/NoteViewer.vue&quot;; export default { \u00a0\u00a0name: &quot;Home&quot;, \u00a0\u00a0components: { \u00a0\u00a0\u00a0\u00a0\/\/ NoteEditor, \u00a0\u00a0\u00a0\u00a0NoteEditor, \u00a0\u00a0\u00a0\u00a0NoteViewer \u00a0\u00a0}, \u00a0\u00a0data() { \u00a0\u00a0\u00a0\u00a0return { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0enableAddNote: false, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: [] \u00a0\u00a0\u00a0\u00a0}; \u00a0\u00a0}, \u00a0\u00a0mounted() { \u00a0\u00a0\u00a0\u00a0this.getNotes(); \u00a0\u00a0}, \u00a0\u00a0methods: { \u00a0\u00a0\u00a0\u00a0enableAdd() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.enableAddNote = true; \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0disableAdd() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.enableAddNote = false; \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0async getNotes() { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.data = []; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const data = await this.$http.get(&quot;notes\/getall&quot;); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.forEach(note =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.data.push({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content: note, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0viewMode: true \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0async addNote(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.$http.post(&quot;notes\/create&quot;, note.content); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.disableAdd(); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.getNotes(); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0editNote(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0note.viewMode = false; \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0async updateNote(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.$http.put(`notes\/${note.content.id}`, note.content); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0note.viewMode = true; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.getNotes(); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0cancelUpdate(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0note.viewMode = true; \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0markCompletedConfirm(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$buefy.dialog.confirm({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: &quot;Mark Completed&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: &quot;Would you really like to mark the note completed?&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;is-warning&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0hasIcon: true, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onConfirm: async () =&gt; await this.markCompleted(note) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0async markCompleted(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0note.content.isCompleted = true; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.$http.put(`notes\/${note.content.id}`, note.content); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.getNotes(); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0deleteNoteConfirm(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$buefy.dialog.confirm({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: &quot;Delete note&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: &quot;Would you really like to delete the note?&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;is-danger&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0hasIcon: true, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onConfirm: async () =&gt; await this.deleteNote(note) \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0async deleteNote(note) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.$http.delete(`notes\/${note.content.id}`); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.getNotes(); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0} }; &lt;\/script&gt;<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0434\u0443, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Add<\/code>, \u043d\u043e\u0441\u044f\u0449\u0438\u0439 \u0437\u0434\u0435\u0441\u044c \u0438\u043c\u044f <code>note-editor<\/code>, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b. \u041e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u2014 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0435\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>NoteViewer<\/code>, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0437\u0434\u0435\u0441\u044c \u043a\u0430\u043a <code>note-viewer<\/code>, \u0432\u044b\u0432\u043e\u0434\u044f \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>v-for<\/code>.<\/p>\n<p>  \u0422\u0443\u0442 \u0435\u0449\u0451 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>@cancel<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>note-editor<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043b\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 <code>Add<\/code> \u0438 <code>Update<\/code> \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443, \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u0431\u0430\u0437\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">&lt;!-- Add Task --&gt; &lt;note-editor v-show=&quot;enableAddNote&quot; :key=&quot;enableAddNote&quot; @add=&quot;addNote&quot; @cancel=&quot;disableAdd&quot; \/&gt; &lt;!-- Update Task --&gt; &lt;note-editor v-show=&quot;!note.viewMode&quot; :add-mode=&quot;false&quot; :note=&quot;note&quot; @update=&quot;updateNote&quot; @cancel=&quot;cancelUpdate(note)&quot; \/&gt;<\/code><\/pre>\n<p>  \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u0420\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430, \u0442\u043e \u0432 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435.<\/p>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>:note<\/code> \u0432 <code>note-viewer<\/code>.<\/p>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Axios<\/font><\/h2>\n<p>  Axios \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u0445, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438.<\/p>\n<p>  \u041e\u043d\u0430 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443. \u0420\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e Axios \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0443 \u043e\u0442 XSRF-\u0430\u0442\u0430\u043a, \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u043e\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0442\u043c\u0435\u043d\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Axios \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0435\u0451, \u0441\u0434\u0435\u043b\u0430\u0432 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0431\u044b \u0435\u0451 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u0432 \u043f\u0430\u043f\u043a\u0435 <code>axios<\/code>, \u0444\u0430\u0439\u043b <code>index.js<\/code>:<\/p>\n<pre><code class=\"javascript\">import axios from &quot;axios&quot;;  const apiHost = process.env.VUE_APP_API_HOST || &quot;\/&quot;;  let baseURL = &quot;api&quot;;  if (apiHost) { \u00a0\u00a0baseURL = `${apiHost}api`; } export default axios.create({ baseURL: baseURL });<\/code><\/pre>\n<p>  \u0412 \u0444\u0430\u0439\u043b <code>main.js<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c API. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<pre><code class=\"javascript\">import HTTP from &quot;.\/axios&quot;;  \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a \u043e\u0442\u0432\u0435\u0442\u043e\u0432 HTTP.interceptors.response.use( \u00a0\u00a0response =&gt; { \u00a0\u00a0\u00a0\u00a0if (response.data instanceof Blob) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response.data; \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0return response.data.data || {}; \u00a0\u00a0}, \u00a0\u00a0error =&gt; { \u00a0\u00a0\u00a0\u00a0if (error.response) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Vue.prototype.$buefy.toast.open({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: error.response.data.message || &quot;Something went wrong&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;is-danger&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0} else { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Vue.prototype.$buefy.toast.open({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: &quot;Unable to connect to server&quot;, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;is-danger&quot; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0return Promise.reject(error); \u00a0\u00a0} );  Vue.prototype.$http = HTTP;<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 <code>main.js<\/code> \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>$http<\/code>:<\/p>\n<pre><code class=\"javascript\">import HTTP from &quot;.\/axios&quot;; Vue.prototype.$http = HTTP;<\/code><\/pre>\n<p>  \u041c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u044d\u0442\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u043e \u0432\u0441\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 Vue.js.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">const data = await this.$http.get(&quot;notes\/getall&quot;);<\/code><\/pre>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/font><\/h2>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0440\u043e\u0441\u043b\u043e \u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u0430\u0432 \u0432\u0445\u043e\u0434\u044f\u0442 \u0441\u043e\u0442\u043d\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u042d\u0442\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0435\u0441\u044c \u0435\u0433\u043e JavaScript-\u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430 \u043e\u0434\u0438\u043d \u0437\u0430\u0445\u043e\u0434. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<ol>\n<li>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0438\u0441\u044c \u0431\u044b?<\/li>\n<li>\u041a\u0430\u043a \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432?<\/li>\n<li>\u041a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/li>\n<\/ol>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 Webpack \u0438 \u0432\u043d\u0435\u0441\u044f \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">{ path: &quot;\/notes&quot;, name: &quot;Notes&quot;, component: () =&gt; import(\/* webpackChunkName: &quot;home&quot; *\/ &quot;..\/views\/Home.vue&quot;) } \/\/ \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \/* webpackChunkName: &quot;home&quot; *\/<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0441 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0432\u0438\u0434\u0430 <code>[view].[hash].js<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u043b\u0435\u043d\u0438\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430.<\/p>\n<h2><font color=\"#3AC1EF\">\u0423\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 Docker \u0438 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435<\/font><\/h2>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b <code>Dockerfile<\/code>:<\/p>\n<pre><code class=\"javascript\"># build stage FROM node:lts-alpine as build-stage WORKDIR \/app COPY package*.json .\/ RUN npm install COPY . . ARG VUE_APP_API_HOST ENV VUE_APP_API_HOST $VUE_APP_API_HOST RUN npm run build  # production stage FROM nginx:stable-alpine as production-stage COPY --from=build-stage \/app\/dist \/usr\/share\/nginx\/html COPY nginx.conf \/etc\/nginx\/conf.d\/default.conf EXPOSE 80 CMD [&quot;nginx&quot;, &quot;-g&quot;, &quot;daemon off;&quot;]<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435 \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0437\u0430 \u043c\u043e\u0449\u043d\u044b\u043c HTTP-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0432\u0440\u043e\u0434\u0435 Nginx. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442 \u0432\u0437\u043b\u043e\u043c\u043e\u0432 \u0438 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0442\u0430\u043a.<\/p>\n<p>  \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e \u0445\u043e\u0441\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f Axios? \u0412\u043e\u0442 \u043e\u043d\u0430:<\/p>\n<pre><code class=\"javascript\">const apiHost = process.env.VUE_APP_API_HOST || &quot;\/&quot;;<\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u0441\u0431\u043e\u0440\u043a\u0438. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u043e\u043f\u0446\u0438\u0435\u0439 <code>--build-arg<\/code> \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043e\u0431\u0440\u0430\u0437\u0430:<\/p>\n<pre><code class=\"javascript\">sudo docker build --build-arg VUE_APP_API_HOST=&lt;Scheme&gt;:\/\/&lt;ServiceHost&gt;:&lt;ServicePort&gt;\/ -f Dockerfile -t vue-app-image .<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c <code>&lt;Scheme&gt;<\/code>, <code>&lt;ServiceHost&gt;<\/code> \u0438 <code>&lt;ServicePort&gt;<\/code> \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0441\u043c\u044b\u0441\u043b \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0440\u0430\u043d, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">sudo docker run -d -p 8080:80 \u2014 name vue-app vue-app-image<\/code><\/pre>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u0442\u043e\u0433\u0438<\/font><\/h2>\n<p>  \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 Vue.js, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u0445, \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. <a href=\"https:\/\/www.loom.com\/share\/1a49ad9f8c824a8388e216ce4d5afb1a\">\u0412\u043e\u0442<\/a> \u0432\u0438\u0434\u0435\u043e, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u0438\u043c.<\/p>\n<p>  <b>\u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438!<\/b> \u041d\u0430 \u0447\u0442\u043e \u0432\u044b \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b\u0438 \u0431\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u0441\u0442\u0440\u0435\u043c\u044f\u0449\u0438\u043c\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 Vue.js-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f?<\/p>\n<p>  <a href=\"https:\/\/ruvds.com\/ru-rub\/#order\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1ba\/550\/d25\/1ba550d25e8846ce8805de564da6aa63.png\"><\/a><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\"> https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\">JavaScript \u2014 \u044d\u0442\u043e \u0434\u0443\u0448\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 JavaScript-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. Vue.js \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043d\u0435\u0441\u0442\u0438 \u043a \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c.<\/p>\n<p>  Vue.js \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0415\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Vue, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vue.js \u0438 \u0441 \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gc\/bh\/g1\/gcbhg1ndc0-kd3usv2yigyzstjo.jpeg\"><\/a><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e Vue.js-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u043e \u043d\u0435\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445. <a href=\"https:\/\/github.com\/vivekcgi\/sample-notes-app\">\u0412\u043e\u0442<\/a> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <a href=\"https:\/\/github.com\/vivekcgi\/sample-notes-app-service\">\u0412\u043e\u0442<\/a> \u2014 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0435\u0433\u043e \u0431\u044d\u043a\u0435\u043d\u0434\u0430. \u041c\u044b, \u043f\u043e \u0445\u043e\u0434\u0443 \u0434\u0435\u043b\u0430, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0449\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Vue.js \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-298571","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/298571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=298571"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/298571\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}