{"id":409112,"date":"2024-06-29T20:35:30","date_gmt":"2024-06-29T20:35:30","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=409112"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=409112","title":{"rendered":"<span>Vue.js. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \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 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f1b\/454\/50f\/f1b45450ff18f4137175e346c4d5409a.jpg\" width=\"1306\" height=\"868\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f1b\/454\/50f\/f1b45450ff18f4137175e346c4d5409a.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0435\u0440\u0433\u0435\u0439 \u0416\u0443\u0440\u0430\u0432\u043b\u0435\u0432, \u044f \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a <a href=\"https:\/\/newtechaudit.ru\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 NTA<\/a>.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0445 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0440\u0435\u0434\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u044b \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439. \u041f\u0440\u0438\u00a0\u044d\u0442\u043e\u043c \u043f\u043e\u00a0\u0440\u044f\u0434\u0443 \u043f\u0440\u0438\u0447\u0438\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\u00a0\u0431\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c,\u00a0\u043b\u0438\u0431\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. \u0412\u00a0\u0441\u0432\u044f\u0437\u0438 \u0441\u00a0\u0447\u0435\u043c, \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e\u0439, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u00a0\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c\u0438 (DUI) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439. \u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e\u00a0DUI \u043f\u043b\u043e\u0442\u043d\u043e \u0432\u043e\u0448\u043b\u0438 \u0432\u00a0\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0431\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e, \u0431\u0435\u0437\u00a0\u043d\u0438\u0445 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. <\/p>\n<p>\u041d\u043e\u00a0\u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438, \u0441\u0434\u0435\u043b\u0430\u044e \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u00a0\u043f\u0440\u0438\u0447\u0438\u043d\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0438\u043c\u0435\u043d\u043d\u043e Vue.js \u0432\u00a0\u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0446\u0438\u0438 \u0441\u00a0\u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043d\u0430\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 React. \u0415\u0441\u043b\u0438 \u043d\u0435\u00a0\u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u00a0\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e Vue.js\u00a0\u2014 \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u0440\u0438\u00a0\u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u0444\u0443\u043b\u043b\u2011\u0441\u0442\u0435\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 html\u2011\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442\u00a0\u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0432\u00a0\u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0447\u0442\u043e, \u0432\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0442\u0440\u0443\u0434\u043e\u0432\u044b\u0435 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0435\u00a0\u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u00a0\u0443\u0437\u043a\u0438\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0440\u043e\u043b\u0435\u0439. <\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u043c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438, React, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 html \u00ab\u0440\u0430\u0441\u0442\u0432\u043e\u0440\u044f\u0435\u0442\u0441\u044f\u00bb \u0432\u00a0JavaScript \u043a\u043e\u0434\u0435, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f\u0441\u044c \u0432\u00a0\u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044e \u044f\u0437\u044b\u043a\u0430 JSX. \u0427\u0442\u043e, \u0432\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0443\u0437\u043a\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c\u0438. <\/p>\n<p>\u0422\u0435\u043c \u043d\u0435\u00a0\u043c\u0435\u043d\u0435\u0435, \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e\u00a0\u0432\u044b\u0431\u043e\u0440 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0441\u0440\u0435\u0434\u0438 \u00ab\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0440\u043e\u0439\u043a\u0438\u00bb React, Angular, Vue.js, \u0447\u0430\u0441\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u043e\u043c \u0432\u043a\u0443\u0441\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432\u00a0\u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435. \u0418 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0437\u0430\u0434\u0430\u0447\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u00a0React, \u043d\u043e\u00a0\u043d\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0430\u00a0Vue.js \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0410, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0432\u044b\u0448\u0435\u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435, \u0434\u043b\u044f\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u0430\u043b \u043d\u0430\u00a0Vue.js.<\/p>\n<p>\u0418 \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u00a0DUI \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 Vue.js \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0443\u0442\u044c \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0447\u0442\u043e\u00a0\u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043a\u0430\u043a\u00a0\u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.<\/p>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0432\u0440\u0435\u043c\u044f \u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u00a0\u0441\u0447\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u00a0\u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0434\u043b\u044f\u00a0\u043b\u044e\u0431\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0\u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u043c\u0435\u043d\u044e \u0438\u00a0\u0442.\u00a0\u0434. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 CSS\u2011\u0441\u0442\u0438\u043b\u0438, JavaScript \u0438 HTML\u2011\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u00a0\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437\u00a0\u0442\u0440\u0435\u0445 \u0431\u043b\u043e\u043a\u043e\u0432: &lt;template>, &lt;script> \u0438 &lt;style>:<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {{name}}&lt;\/p> &lt;\/template> &lt;script>   export default {     name: \u2018NewComponent\u2019,     data() {return {name: \u00abVue\u00bb}},   }; &lt;\/script> &lt;style>   p{color: #fff} &lt;\/style><\/code><\/pre>\n<p>\u0412\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435  \u0440\u0430\u0437\u0434\u0435\u043b &lt;template>,\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442  \u0441\u043e\u0431\u043e\u0439 html\u2011\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u00a0\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u00a0\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u0420\u0430\u0437\u0434\u0435\u043b &lt;style>  \u0434\u043b\u044f\u00a0\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0442\u0438\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0441\u044f\u00a0\u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0430 \u0438 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432\u00a0\u0431\u043b\u043e\u043a\u0435 &lt;script> . <\/p>\n<p> \u041e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435, \u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u00a0\u0438\u043c\u0435\u043d\u0438, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c Vue \u0432\u00a0\u043e\u0442\u0432\u0435\u0442. \u041d\u043e\u00a0\u043f\u0440\u0435\u0436\u0434\u0435 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e\u00a0\u043e\u0434\u043d\u0438\u043c \u0438\u0437\u00a0\u043f\u043b\u044e\u0441\u043e\u0432 Vue.js \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u00a0\u043e\u0442\u00a0\u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u043e\u0442\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0410\u00a0\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u00a0\u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u043e\u0441\u0438\u0442 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440, \u0431\u0443\u0434\u0443 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u0437\u0430\u0442\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">Component.vue &lt;template>     &lt;div>         &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {{ customName }}!&lt;\/p>         &lt;button v-on:click=\"answer()\">\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e&lt;\/button>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"customName\"],     data() {         return {             defaultName: \"\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",         }     },     created () {         if (!this.customName) {             return this.customName = this.defaultName         }     },     methods: {         answer() {             this.customName = \"Vue\"         }     }, }; &lt;\/script> &lt;style>     div{         background-color: #0000001f;     }     p{         color: #fff;     } &lt;\/style><\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b\u00a0\u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0438\u0437\u0432\u043d\u0435. \u0412\u00a0\u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u00a0\u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f customName, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u00a0\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 props. \u0422\u0430\u043a\u0436\u0435 \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u00a0\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e defaultName, \u043d\u0430\u00a0\u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u00a0props \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u043d\u0435\u00a0\u0431\u0443\u0434\u0435\u0442. <\/p>\n<pre><code class=\"javascript\">props: [\"customName\"], data() {     return {         defaultName: \"\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",     } },<\/code><\/pre>\n<p>\u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437\u00a0\u044d\u0442\u043e\u0433\u043e, \u043c\u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c,\u00a0\u0431\u044b\u043b\u043e\u00a0\u043b\u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 customName \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442\u00a0\u2014 \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c. \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 created(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. Created \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a\u00a0\u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437\u00a0\u0445\u0443\u043a\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432\u00a0\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (https:\/\/vuejs.org\/guide\/essentials\/lifecycle.html).<\/p>\n<pre><code class=\"javascript\">created () {         if (!this.customName) {             return this.customName = this.defaultName         }     },<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0432\u044b\u0432\u043e\u0434\u0438\u043b \u043e\u0442\u0432\u0435\u0442\u043d\u043e\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043a\u043e Vue, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 answer():<\/p>\n<pre><code class=\"javascript\">methods: {     answer() {         this.customName = \"Vue\"     } },<\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f\u00a0\u043b\u0438\u0448\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0433\u0434\u0435 \u0432\u00a0\u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438 \u043a\u0430\u043a\u00a0\u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0432\u00a0\u0431\u043b\u043e\u043a\u0435 template:<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;div>     &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {{ customName }}!&lt;\/p>     &lt;button v-on:click=\"answer()\">\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e&lt;\/button>   &lt;\/div> &lt;\/template><\/code><\/pre>\n<p>\u041a\u0430\u043a\u00a0\u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0440\u0430\u043d\u0435\u0435, \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u00a0\u2014 \u044d\u0442\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e\u00a0\u044f \u043c\u043e\u0433\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e. \u041f\u0440\u0438\u0432\u043e\u0436\u0443 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Parent.vue:<\/p>\n<pre><code class=\"javascript\">Parent.vue &lt;template>   &lt;div>       &lt;my-component \/>       &lt;my-component customName=\"Sergey\"\/>       &lt;my-component v-bind:customName=\"newName\" \/>   &lt;\/div> &lt;\/template>  &lt;script> import Component from \".\/Component.vue\";  export default {   components: {     my-component: Component,   },   data() {     return {       newName: \"Vasya\"     }   }, } &lt;\/script><\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Component.vue, \u043f\u0440\u0438\u0447\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0434\u0440\u0443\u0433\u0438\u0445. \u042d\u0442\u043e, \u0432\u00a0\u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0441\u00a0\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437\u00a0\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0447\u0442\u043e\u00a0\u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a\u00a0\u0437\u0430\u043c\u0435\u043d\u0435 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u0412\u043e\u00a0\u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u00a0\u0438\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430\u00a0\u0432\u00a0\u0442\u0440\u0435\u0442\u0438\u0439\u00a0\u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e newName \u0441\u00a0\u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0440\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0441\u00a0\u0440\u0430\u0437\u043d\u044b\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435\u043c, \u0430\u00a0\u043f\u0440\u0438\u00a0\u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430\u00a0\u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437\u00a0\u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043e\u0442\u00a0\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/8d6\/6c1\/a6c\/8d66c1a6c8fded5bf139007696ad3d08.jpg\" width=\"1024\" height=\"514\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8d6\/6c1\/a6c\/8d66c1a6c8fded5bf139007696ad3d08.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u0442\u043e \u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <\/p>\n<p><strong>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/strong> \u0432\u00a0Vue.js\u00a0\u2014 \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0442\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442. \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 Vue.observable(). \u041f\u0440\u0438\u00a0\u0432\u044b\u0437\u043e\u0432\u0435 \u0432\u00a0\u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c. \u0412\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u043e\u00a0\u0441\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041a\u043e\u0433\u0434\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, Vue.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 Vue.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u044f\u0434 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0watch, computed, v\u2011model \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041c\u0435\u0442\u043e\u0434 watch, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438\u00a0\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438. Computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 v\u2011model \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0444\u043e\u0440\u043c\u044b, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a\u00a0input, select \u0438\u043b\u0438\u00a0textarea. \u041f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0430\u00a0\u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445\u00a0\u2014 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v\u2011model, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 input, \u0432\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u043d\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0441\u00a0\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 enteredName. \u0412\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u043f\u0440\u0438\u00a0\u0432\u0432\u043e\u0434\u0435 \u0438\u043c\u0435\u043d\u0438 \u0432\u00a0\u043f\u043e\u043b\u0435 input \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Vue.js.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/98c\/af4\/30f\/98caf430fe070d0a04fc08df72cce916.jpg\" width=\"977\" height=\"329\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/98c\/af4\/30f\/98caf430fe070d0a04fc08df72cce916.jpg\" data-blurred=\"true\"\/><\/figure>\n<pre><code class=\"javascript\">Component.vue &lt;template>     &lt;div>         &lt;label>\u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:&lt;\/label>         &lt;input v-model=\"enteredName\">         &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442,             &lt;span v-if=\"enteredName\">{{ enteredName }}&lt;\/span>             &lt;span v-else>{{ customName }}&lt;\/span>!         &lt;\/p>         &lt;button v-on:click=\"answer()\">\u041f\u043e\u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c&lt;\/button>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"customName\"],     data() {         return {             defaultName: \"\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",             enteredName: \"\",         }     },     created () {         if (!this.customName) {             return this.customName = this.defaultName         }     },     methods: {         answer() {             this.enteredName = \"\"             this.customName = \"Vue\"         }     }, }; &lt;\/script><\/code><\/pre>\n<p>\u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0441\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438: \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u044b. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044e, \u043c\u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0441\u00a0\u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u043c \u0432\u0435\u0440\u043d\u044b\u0439 \u0438 \u043d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u0438, \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438\u0433\u0440\u044b, \u0441\u043a\u0440\u044b\u0442\u044c \u0438\u043b\u0438\u00a0\u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u043b\u0435\u0439 \u0438 \u043a\u043d\u043e\u043f\u043e\u043a, \u0438 \u0434\u0440. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/cc8\/d0b\/3eb\/cc8d0b3eb3697d0b8182b259c4ee461e.jpg\" width=\"1024\" height=\"540\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cc8\/d0b\/3eb\/cc8d0b3eb3697d0b8182b259c4ee461e.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437\u00a0\u0442\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u044f, \u0441\u0445\u0435\u043c\u0430 \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fd1\/d77\/ae6\/fd1d77ae6d478e212cd9c7f144ec756d.png\" width=\"906\" height=\"725\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fd1\/d77\/ae6\/fd1d77ae6d478e212cd9c7f144ec756d.png\"\/><\/figure>\n<p>\u041d\u0430\u00a0\u0441\u0445\u0435\u043c\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043f\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>\u2014 Title.vue\u00a0\u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438;<\/p>\n<p>\u2014 Main.vue\u00a0\u2014 \u0442\u0435\u043a\u0441\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u0430, \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u0430, \u0435\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e;<\/p>\n<p>\u2014 Info.vue\u00a0\u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u00a0\u0432\u0435\u0440\u043d\u043e\u043c\/\u043d\u0435\u0432\u0435\u0440\u043d\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0435;<\/p>\n<p>\u2014 Button.vue\u00a0\u2014 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u00a0\u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0430;<\/p>\n<p>\u2014 Next.vue\u00a0\u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u0443.<\/p>\n<p>\u0412\u0441\u0435 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u0434\u043b\u044f\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u044b \u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Title \u0438 Main \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0432\u00a0\u0441\u0435\u0431\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 \u0432\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u044b\u0448\u0435: \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 Title.vue \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043d\u043e\u043c\u0435\u0440 \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0438 \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u00a0\u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u0435, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0430\u00a0\u043a\u0430\u043a\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438\u0433\u0440\u044b \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \u0422\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u00a0\u0432\u00a0Main.vue \u0438\u0437\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442 \u0437\u0430\u0434\u0430\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">Title.vue &lt;template>     &lt;div>         &lt;p class=\"number\">{{ number }}\/{{ quiz_length }}&lt;\/p>     &lt;\/div> &lt;\/template>  &lt;script> export default {     props: ['number', 'quiz_length'], }; &lt;\/script><\/code><\/pre>\n<pre><code class=\"javascript\">Main.vue &lt;template>     &lt;div>         &lt;div class=\"question\">         &lt;div class=\"center-field\">           &lt;p class=\"justify\">{{ question }}&lt;\/p>         &lt;\/div>       &lt;\/div>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"question\"], }; &lt;\/script><\/code><\/pre>\n<p>\u0427\u0443\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u0441\u00a0\u0442\u043e\u0447\u043a\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Info.vue. \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043f\u043e\u2011\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435\u00a0\u0432\u0438\u0434\u0435\u043d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0434\u043e\u00a0\u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043e\u0442\u0432\u0435\u0442\u0430. \u0410\u00a0\u0437\u0430\u0442\u0435\u043c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u0432\u0435\u0442\u0430, \u043d\u043e\u00a0\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u00a0\u0441\u0432\u043e\u0435\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u0440\u0430\u0437\u043d\u044b\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 &lt;v\u2011if> &lt;v\u2011else>, \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 &lt;div> \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 &lt;is_right>. <\/p>\n<pre><code class=\"javascript\">Info.vue &lt;template>     &lt;div>         &lt;div class=\"info-field\">             &lt;p v-if=\"disabled\"             class=\"info\"             :class=\"{                 right: is_right,                 false: !is_right,             }\">                 &lt;span v-if=\"is_right\">\u0412\u0415\u0420\u041d\u041e!&lt;\/span>                 &lt;span v-else>\u041d\u0415\u0412\u0415\u0420\u041d\u041e!&lt;\/span>             &lt;\/p>         &lt;\/div>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"is_right\", \"disabled\"], }; &lt;\/script><\/code><\/pre>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Next.vue, \u0441\u00a0\u0442\u043e\u0439\u00a0\u043b\u0438\u0448\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0435\u0439, \u0447\u0442\u043e\u00a0\u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0414\u0430\u043b\u0435\u0435\u00bb \u0434\u043e\u043b\u0436\u043d\u0430\u00a0\u0431\u044b\u0442\u044c \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u00a0\u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043e\u0442\u0432\u0435\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441, \u0430\u00a0\u0437\u0430\u0442\u0435\u043c \u0442\u0430\u043a\u00a0\u0436\u0435 \u043a\u0430\u043a\u00a0\u0438 Info.vue \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0440\u0438\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445:<\/p>\n<pre><code class=\"javascript\">Next.vue &lt;template>     &lt;div>         &lt;button           :disabled=\"!disabled\"           class=\"next-button\"           :class=\"{ inactive: !disabled }\"           @click=\"getNext()\"         >           &lt;p v-if=\"!is_full\">\u0414\u0430\u043b\u0435\u0435&lt;\/p>           &lt;p v-else>\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c&lt;\/p>         &lt;\/button>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"is_full\", \"disabled\"],     data() {return {}},     methods: {         getNext() {             this.$emit('getNext', {})         }     }, }; &lt;\/script><\/code><\/pre>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Next.vue \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e\u00a0\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442) \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438: <\/p>\n<pre><code class=\"javascript\">getNext() {     this.$emit('getNext', {}) }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u0435\u0442\u043e\u0434 getNext() \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438\u00a0\u0435\u0433\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u00a0\u0441\u043e\u0431\u044b\u0442\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0447\u0442\u043e\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0412\u00a0\u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0440\u0438\u00a0\u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0414\u0430\u043b\u0435\u0435\u00bb \u0432\u00a0\u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c. \u0411\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Button.vue:<\/p>\n<pre><code class=\"javascript\">Button.vue &lt;template>   &lt;div     :class=\"{       right: buttonProps.is_right &amp;&amp; (buttonProps.is_pushed || disabled),       false: !buttonProps.is_right &amp;&amp; buttonProps.is_pushed,       disabled: disabled}\"   @click=\"answered()\">   &lt;p>{{ buttonProps.title }}&lt;\/p>   &lt;\/div> &lt;\/template> &lt;script> import axios from \"axios\"; import config from \"@\/scripts\/api-config\"; const API_URL = config[\"API_LOCATION\"];  export default {     props: ['buttonProps', 'is_answered', 'disabled'],     data() {         return {             answer: {}         }     },     methods: {         answered() {             if (!this.is_answered) {                 if (this.buttonProps.is_right) {                     this.answer = { answer_field: 0, score: 1 }                 } else {                     this.answer = { answer_field: 1, score: 0 }                 }                 axios.patch(API_URL, this.answer);             }             this.buttonProps.is_pushed = true             this.$emit('pushAnswer', {                 is_pushed: true,                 is_right: this.buttonProps.is_right,             })         },     } }; &lt;\/script><\/code><\/pre>\n<p>\u0412\u00a0Button.vue \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u0418\u0437\u00a0\u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u0437\u0434\u0435\u0441\u044c, \u043a\u0430\u043a\u00a0\u043f\u043e\u00a0\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435 v\u2011on:click, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 answered(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0430\u00a0\u0437\u0430\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u00a0\u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437\u00a0\u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432\u00a0\u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u0438\u00a0\u0431\u044b\u043b\u00a0\u043b\u0438 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c. \u0427\u0442\u043e\u00a0\u0432\u0430\u0436\u043d\u043e, \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043e\u00a0\u0432\u0441\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438 \u0432\u00a0\u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0442.\u00a0\u0435. \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0432\u043e\u0435\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 \u0446\u0438\u043a\u043b: \u0438\u0437\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u00a0\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u00a0\u043e\u0434\u043d\u043e\u043c \u0438\u0437\u00a0\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043e\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439, \u0438\u0437\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u0436\u0435 \u0432\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435, \u043c\u0435\u043d\u044f\u044f \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443, \u0432\u00a0\u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u00a0\u043a\u043b\u0438\u043a\u0435 \u043d\u0430\u00a0\u043e\u0434\u0438\u043d \u0438\u0437\u00a0\u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0430, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c\u0441\u044f \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u043e\u043c\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0443 \u0432\u00a0\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u043d\u043e\u00a0\u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443 Button.vue \u0441\u00a0\u0432\u0435\u0440\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u043c. \u0412\u00a0\u0442\u043e\u00a0\u0436\u0435 \u0432\u0440\u0435\u043c\u044f, \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0446\u0432\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Info.vue \u0441\u00a0\u043f\u043e\u043b\u0435\u043c \u0432\u0435\u0440\u043d\u043e\/\u043d\u0435\u0432\u0435\u0440\u043d\u043e. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0414\u0430\u043b\u0435\u0435\u00bb \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Next.vue \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u044c \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043b\u044f\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f. \u0442.\u00a0\u0435. \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. <\/p>\n<p>\u041f\u043e\u0434\u0432\u043e\u0434\u044f \u0438\u0442\u043e\u0433 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e\u00a0\u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0432\u043e\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 Vue.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0435\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0439 \u0448\u0438\u0440\u043e\u043a\u0438\u0439 \u0441\u043f\u0435\u043a\u0442\u0440 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u0435\u0433\u043a\u0438\u0445 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0413\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430. \u0422\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0441\u0442\u044c, \u0447\u0442\u043e, \u0432\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0438 \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/749886\/\"> https:\/\/habr.com\/ru\/articles\/749886\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0435\u0440\u0433\u0435\u0439 \u0416\u0443\u0440\u0430\u0432\u043b\u0435\u0432, \u044f \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a <a href=\"https:\/\/newtechaudit.ru\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 NTA<\/a>.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0445 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0440\u0435\u0434\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u044b \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439. \u041f\u0440\u0438\u00a0\u044d\u0442\u043e\u043c \u043f\u043e\u00a0\u0440\u044f\u0434\u0443 \u043f\u0440\u0438\u0447\u0438\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\u00a0\u0431\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c,\u00a0\u043b\u0438\u0431\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c. \u0412\u00a0\u0441\u0432\u044f\u0437\u0438 \u0441\u00a0\u0447\u0435\u043c, \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e\u0439, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u00a0\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c\u0438 (DUI) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439. \u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e\u00a0DUI \u043f\u043b\u043e\u0442\u043d\u043e \u0432\u043e\u0448\u043b\u0438 \u0432\u00a0\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0431\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e, \u0431\u0435\u0437\u00a0\u043d\u0438\u0445 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. <\/p>\n<p>\u041d\u043e\u00a0\u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438, \u0441\u0434\u0435\u043b\u0430\u044e \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u00a0\u043f\u0440\u0438\u0447\u0438\u043d\u044b \u0432\u044b\u0431\u043e\u0440\u0430 \u0438\u043c\u0435\u043d\u043d\u043e Vue.js \u0432\u00a0\u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0446\u0438\u0438 \u0441\u00a0\u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043d\u0430\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 React. \u0415\u0441\u043b\u0438 \u043d\u0435\u00a0\u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u00a0\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e Vue.js\u00a0\u2014 \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u0440\u0438\u00a0\u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u0444\u0443\u043b\u043b\u2011\u0441\u0442\u0435\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 html\u2011\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442\u00a0\u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0432\u00a0\u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0447\u0442\u043e, \u0432\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0442\u0440\u0443\u0434\u043e\u0432\u044b\u0435 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0435\u00a0\u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u00a0\u0443\u0437\u043a\u0438\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0440\u043e\u043b\u0435\u0439. <\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u043c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438, React, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 html \u00ab\u0440\u0430\u0441\u0442\u0432\u043e\u0440\u044f\u0435\u0442\u0441\u044f\u00bb \u0432\u00a0JavaScript \u043a\u043e\u0434\u0435, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f\u0441\u044c \u0432\u00a0\u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044e \u044f\u0437\u044b\u043a\u0430 JSX. \u0427\u0442\u043e, \u0432\u00a0\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0443\u0437\u043a\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c\u0438. <\/p>\n<p>\u0422\u0435\u043c \u043d\u0435\u00a0\u043c\u0435\u043d\u0435\u0435, \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e\u00a0\u0432\u044b\u0431\u043e\u0440 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0441\u0440\u0435\u0434\u0438 \u00ab\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0440\u043e\u0439\u043a\u0438\u00bb React, Angular, Vue.js, \u0447\u0430\u0441\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u043e\u043c \u0432\u043a\u0443\u0441\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432\u00a0\u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435. \u0418 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0437\u0430\u0434\u0430\u0447\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u00a0React, \u043d\u043e\u00a0\u043d\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0430\u00a0Vue.js \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0410, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0432\u044b\u0448\u0435\u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435, \u0434\u043b\u044f\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u0430\u043b \u043d\u0430\u00a0Vue.js.<\/p>\n<p>\u0418 \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u00a0DUI \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 Vue.js \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0443\u0442\u044c \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0447\u0442\u043e\u00a0\u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043a\u0430\u043a\u00a0\u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.<\/p>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0432\u0440\u0435\u043c\u044f \u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u00a0\u0441\u0447\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u00a0\u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0438 \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0434\u043b\u044f\u00a0\u043b\u044e\u0431\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0\u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u043c\u0435\u043d\u044e \u0438\u00a0\u0442.\u00a0\u0434. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 CSS\u2011\u0441\u0442\u0438\u043b\u0438, JavaScript \u0438 HTML\u2011\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u00a0\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437\u00a0\u0442\u0440\u0435\u0445 \u0431\u043b\u043e\u043a\u043e\u0432: &lt;template>, &lt;script> \u0438 &lt;style>:<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {{name}}&lt;\/p> &lt;\/template> &lt;script>   export default {     name: \u2018NewComponent\u2019,     data() {return {name: \u00abVue\u00bb}},   }; &lt;\/script> &lt;style>   p{color: #fff} &lt;\/style><\/code><\/pre>\n<p>\u0412\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435  \u0440\u0430\u0437\u0434\u0435\u043b &lt;template>,\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442  \u0441\u043e\u0431\u043e\u0439 html\u2011\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u00a0\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u00a0\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u0420\u0430\u0437\u0434\u0435\u043b &lt;style>  \u0434\u043b\u044f\u00a0\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0442\u0438\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0441\u044f\u00a0\u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0430 \u0438 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432\u00a0\u0431\u043b\u043e\u043a\u0435 &lt;script> . <\/p>\n<p> \u041e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435, \u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u00a0\u0438\u043c\u0435\u043d\u0438, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c Vue \u0432\u00a0\u043e\u0442\u0432\u0435\u0442. \u041d\u043e\u00a0\u043f\u0440\u0435\u0436\u0434\u0435 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e\u00a0\u043e\u0434\u043d\u0438\u043c \u0438\u0437\u00a0\u043f\u043b\u044e\u0441\u043e\u0432 Vue.js \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u00a0\u043e\u0442\u00a0\u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u043e\u0442\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0410\u00a0\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u00a0\u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u043e\u0441\u0438\u0442 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440, \u0431\u0443\u0434\u0443 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u0437\u0430\u0442\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">Component.vue &lt;template>     &lt;div>         &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {{ customName }}!&lt;\/p>         &lt;button v-on:click=\"answer()\">\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e&lt;\/button>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"customName\"],     data() {         return {             defaultName: \"\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",         }     },     created () {         if (!this.customName) {             return this.customName = this.defaultName         }     },     methods: {         answer() {             this.customName = \"Vue\"         }     }, }; &lt;\/script> &lt;style>     div{         background-color: #0000001f;     }     p{         color: #fff;     } &lt;\/style><\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b\u00a0\u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0438\u0437\u0432\u043d\u0435. \u0412\u00a0\u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u00a0\u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f customName, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u00a0\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 props. \u0422\u0430\u043a\u0436\u0435 \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u00a0\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e defaultName, \u043d\u0430\u00a0\u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u00a0props \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u043d\u0435\u00a0\u0431\u0443\u0434\u0435\u0442. <\/p>\n<pre><code class=\"javascript\">props: [\"customName\"], data() {     return {         defaultName: \"\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",     } },<\/code><\/pre>\n<p>\u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437\u00a0\u044d\u0442\u043e\u0433\u043e, \u043c\u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c,\u00a0\u0431\u044b\u043b\u043e\u00a0\u043b\u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 customName \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442\u00a0\u2014 \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c. \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 created(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. Created \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a\u00a0\u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437\u00a0\u0445\u0443\u043a\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432\u00a0\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (https:\/\/vuejs.org\/guide\/essentials\/lifecycle.html).<\/p>\n<pre><code class=\"javascript\">created () {         if (!this.customName) {             return this.customName = this.defaultName         }     },<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0432\u044b\u0432\u043e\u0434\u0438\u043b \u043e\u0442\u0432\u0435\u0442\u043d\u043e\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043a\u043e Vue, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 answer():<\/p>\n<pre><code class=\"javascript\">methods: {     answer() {         this.customName = \"Vue\"     } },<\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f\u00a0\u043b\u0438\u0448\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0433\u0434\u0435 \u0432\u00a0\u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438 \u043a\u0430\u043a\u00a0\u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0432\u00a0\u0431\u043b\u043e\u043a\u0435 template:<\/p>\n<pre><code class=\"javascript\">&lt;template>   &lt;div>     &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442, {{ customName }}!&lt;\/p>     &lt;button v-on:click=\"answer()\">\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e&lt;\/button>   &lt;\/div> &lt;\/template><\/code><\/pre>\n<p>\u041a\u0430\u043a\u00a0\u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0440\u0430\u043d\u0435\u0435, \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u00a0\u2014 \u044d\u0442\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e\u00a0\u044f \u043c\u043e\u0433\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u00a0\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e. \u041f\u0440\u0438\u0432\u043e\u0436\u0443 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Parent.vue:<\/p>\n<pre><code class=\"javascript\">Parent.vue &lt;template>   &lt;div>       &lt;my-component \/>       &lt;my-component customName=\"Sergey\"\/>       &lt;my-component v-bind:customName=\"newName\" \/>   &lt;\/div> &lt;\/template>  &lt;script> import Component from \".\/Component.vue\";  export default {   components: {     my-component: Component,   },   data() {     return {       newName: \"Vasya\"     }   }, } &lt;\/script><\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Component.vue, \u043f\u0440\u0438\u0447\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0434\u0440\u0443\u0433\u0438\u0445. \u042d\u0442\u043e, \u0432\u00a0\u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0441\u00a0\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437\u00a0\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0447\u0442\u043e\u00a0\u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a\u00a0\u0437\u0430\u043c\u0435\u043d\u0435 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u0412\u043e\u00a0\u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u00a0\u0438\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430\u00a0\u0432\u00a0\u0442\u0440\u0435\u0442\u0438\u0439\u00a0\u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e newName \u0441\u00a0\u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0440\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0441\u00a0\u0440\u0430\u0437\u043d\u044b\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435\u043c, \u0430\u00a0\u043f\u0440\u0438\u00a0\u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430\u00a0\u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437\u00a0\u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043e\u0442\u00a0\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u0442\u043e \u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <\/p>\n<p><strong>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/strong> \u0432\u00a0Vue.js\u00a0\u2014 \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0442\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442. \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 Vue.observable(). \u041f\u0440\u0438\u00a0\u0432\u044b\u0437\u043e\u0432\u0435 \u0432\u00a0\u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c. \u0412\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u043e\u00a0\u0441\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041a\u043e\u0433\u0434\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, Vue.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 Vue.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u044f\u0434 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0watch, computed, v\u2011model \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041c\u0435\u0442\u043e\u0434 watch, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0438\u00a0\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438. Computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 v\u2011model \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0444\u043e\u0440\u043c\u044b, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a\u00a0input, select \u0438\u043b\u0438\u00a0textarea. \u041f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0430\u00a0\u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445\u00a0\u2014 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v\u2011model, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 input, \u0432\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u043d\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0441\u00a0\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 enteredName. \u0412\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u043f\u0440\u0438\u00a0\u0432\u0432\u043e\u0434\u0435 \u0438\u043c\u0435\u043d\u0438 \u0432\u00a0\u043f\u043e\u043b\u0435 input \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Vue.js.<\/p>\n<figure class=\"full-width\"><\/figure>\n<pre><code class=\"javascript\">Component.vue &lt;template>     &lt;div>         &lt;label>\u0418\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:&lt;\/label>         &lt;input v-model=\"enteredName\">         &lt;p>\u041f\u0440\u0438\u0432\u0435\u0442,             &lt;span v-if=\"enteredName\">{{ enteredName }}&lt;\/span>             &lt;span v-else>{{ customName }}&lt;\/span>!         &lt;\/p>         &lt;button v-on:click=\"answer()\">\u041f\u043e\u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c&lt;\/button>     &lt;\/div> &lt;\/template> &lt;script> export default {     props: [\"customName\"],     data() {         return {             defaultName: \"\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",             enteredName: \"\",         }     },     created () {         if (!this.customName) {             return this.customName = this.defaultName         }     },     methods: {         answer() {             this.enteredName = \"\"             this.customName = \"Vue\"         }     }, }; &lt;\/script><\/code><\/pre>\n<p>\u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0441\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-409112","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/409112","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=409112"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/409112\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=409112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=409112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=409112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}