{"id":335660,"date":"2022-07-13T09:00:32","date_gmt":"2022-07-13T09:00:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=335660"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=335660","title":{"rendered":"<span>\u041f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c HTML table \u0432 GridComponent. \u0427\u0430\u0441\u0442\u044c I. Frontend<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0445\u0430\u0431\u0440\u043e\u0432\u0446\u044b \u0438 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430!<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u0432 \u043c\u0438\u0440 frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 VueJS. \u0418 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044f \u0440\u0435\u0448\u0438\u043b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0433\u0440\u0438\u0434\u0430 \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430: \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u043e\u0439, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0438 \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435), \u0434\u0443\u043c\u0430\u044e \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0443, \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 VueJS.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 frontend \u0447\u0430\u0441\u0442\u044c, \u0430 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 NestJS, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u0433\u0440\u0438\u0434 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u043e REST API \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0411\u0414 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e TypeORM.<\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0443 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e HTML, CSS \u0438 JS. \u0412\u0441\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0438 \u043a\u043e\u0434 \u0431\u0443\u0434\u0443 \u0441\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0410 \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0432\u043b\u044e <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431<\/a> \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/codesandbox.io\/s\/grid-component-frontend-ib6rqm\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u043d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 <a href=\"https:\/\/codesandbox.io\/s\/grid-component-backend-ydr7yx\" rel=\"noopener noreferrer nofollow\">backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u044c\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u0438\u0434<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/02d\/06f\/91e\/02d06f91e549b704da1cfec4df082494.png\" alt=\"\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c\" title=\"\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c\" width=\"1911\" height=\"904\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/02d\/06f\/91e\/02d06f91e549b704da1cfec4df082494.png\"\/><figcaption>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c<\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0421\u0423\u0411\u0414 SQLite, \u0444\u0430\u0439\u043b \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 (test_db.sqlite). \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c 100 \u0437\u0430\u043f\u0438\u0441\u0435\u0439. \u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u0412\u0438\u0434\u0438\u043c\u043e \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u044d\u0442\u043e. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u0447\u043d\u043e.<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0438\u0441\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434 Linux (Ubuntu 20.04.4 LTS, Focal Fossa), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0432\u044b\u043a\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441 \u044d\u0442\u043e\u0439 \u041e\u0421 \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u044e\u0442.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u0439 \u0438\u0434\u0435\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f (\u0432 \u0441\u043a\u043e\u0431\u043e\u0447\u043a\u0430\u0445 \u044f \u043d\u0430\u043f\u0438\u0448\u0443 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u044f\u0442 \u0443 \u043c\u0435\u043d\u044f, \u0432\u044b \u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0441\u0432\u0435\u0436\u0438\u0435):<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/nodejs.org\/en\/\" rel=\"noopener noreferrer nofollow\">NodeJS<\/a> (v10.19.0), \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043d\u0430 Linux \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/github.com\/nodesource\/distributions\/blob\/master\/README.md#debinstall\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\" rel=\"noopener noreferrer nofollow\">npm <\/a>(v6.14.4) \u2014 \u043f\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0442\u0438 \u0432 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0441 NodeJS<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cli.vuejs.org\/guide\/\" rel=\"noopener noreferrer nofollow\">Vue CLI<\/a> (v4.5.17) \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 VueJS<\/p>\n<\/li>\n<li>\n<p>\u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435, \u0432\u044b\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0443 \u0438 \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 <a href=\"https:\/\/code.visualstudio.com\/\" rel=\"noopener noreferrer nofollow\">VS Code<\/a> \u2013 \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0441\u0435\u0431\u0435.<\/p>\n<p>P.S> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 Google Chrome \u0438 \u042f\u043d\u0434\u0435\u043a\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0437\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0433\u0443. <\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Vue CLI.<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 vue ui:<\/p>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u043f\u0443\u0441\u043a vue ui \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/80e\/d3b\/b91\/80ed3bb916b82aa8d63bcd714854567d.jpg\" alt=\"\u041e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439\" title=\"\u041e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439\" width=\"732\" height=\"138\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/80e\/d3b\/b91\/80ed3bb916b82aa8d63bcd714854567d.jpg\" data-blurred=\"true\"\/><figcaption>\u041e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:8000\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:8000<\/a> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u0430\u0448\u0431\u043e\u0430\u0440\u0434 Vue CLI:<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0441\u0442\u043e\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/116\/e95\/0b8\/116e950b8919eced596d1b57311e5076.jpg\" alt=\"\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Vue CLI \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438\" title=\"\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Vue CLI \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438\" width=\"821\" height=\"461\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/116\/e95\/0b8\/116e950b8919eced596d1b57311e5076.jpg\" data-blurred=\"true\"\/><figcaption>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Vue CLI \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d01\/9eb\/5ba\/d019eb5bab4fc69ea7ed46b3cc8b14b2.jpg\" alt=\"\u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432\" title=\"\u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432\" width=\"448\" height=\"100\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d01\/9eb\/5ba\/d019eb5bab4fc69ea7ed46b3cc8b14b2.jpg\" data-blurred=\"true\"\/><figcaption>\u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2ed\/7ba\/14f\/2ed7ba14fdc98e08f0fa90c6f027b675.png\" alt=\"\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\" title=\"\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\" width=\"776\" height=\"184\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2ed\/7ba\/14f\/2ed7ba14fdc98e08f0fa90c6f027b675.png\"\/><figcaption>\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0434\u0435\u0441\u044c&#187;:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f7e\/c95\/ec4\/f7ec95ec4fc9f2d9f2190873cf7ff72f.jpg\" alt=\"\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430\" title=\"\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430\" width=\"285\" height=\"50\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7e\/c95\/ec4\/f7ec95ec4fc9f2d9f2190873cf7ff72f.jpg\" data-blurred=\"true\"\/><figcaption>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c npm \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/546\/f81\/0ff\/546f810ff7c040fbbccaed8ce95ce845.png\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u0431\u043e\u0440 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u0431\u043e\u0440 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432\" width=\"459\" height=\"710\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/546\/f81\/0ff\/546f810ff7c040fbbccaed8ce95ce845.png\"\/><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u0431\u043e\u0440 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 &#171;\u0412\u0440\u0443\u0447\u043d\u0443\u044e&#187; \u0438 \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/76b\/218\/31a\/76b21831a2b92aa042a240dac2d590d3.png\" alt=\"\u0420\u0443\u0447\u043d\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\" title=\"\u0420\u0443\u0447\u043d\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\" width=\"1207\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/76b\/218\/31a\/76b21831a2b92aa042a240dac2d590d3.png\"\/><figcaption>\u0420\u0443\u0447\u043d\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0427\u0435\u043a\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;\u0414\u0430\u043b\u0435\u0435&#187;:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3a1\/4e5\/0d5\/3a14e50d575f6b4e11b5478297d754aa.png\" alt=\"\u0412\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\" title=\"\u0412\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\" width=\"1202\" height=\"548\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3a1\/4e5\/0d5\/3a14e50d575f6b4e11b5478297d754aa.png\"\/><figcaption>\u0412\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/figcaption><\/figure>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c05\/949\/214\/c05949214fece18e540a31142981966a.png\" alt=\"\u0412\u044b\u0431\u043e\u0440 \u043e\u043f\u0446\u0438\u0438 &quot;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b&quot;\" title=\"\u0412\u044b\u0431\u043e\u0440 \u043e\u043f\u0446\u0438\u0438 &quot;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b&quot;\" width=\"1178\" height=\"159\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c05\/949\/214\/c05949214fece18e540a31142981966a.png\"\/><figcaption>\u0412\u044b\u0431\u043e\u0440 \u043e\u043f\u0446\u0438\u0438 &#171;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b&#187;<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c 3-\u044e \u0432\u0435\u0440\u0441\u0438\u044e Vue (\u0445\u043e\u0442\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u043b\u043e \u0431\u044b \u0438 \u0432\u0442\u043e\u0440\u043e\u0439, \u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0434\u0442\u0438 \u0432 \u043d\u043e\u0433\u0443 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c) \u0438 \u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432 <a href=\"https:\/\/router.vuejs.org\/guide\/essentials\/history-mode.html\" rel=\"noopener noreferrer nofollow\">history mode<\/a>:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 Vue<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/546\/15e\/473\/54615e47317cf61fcce78eff8128cd4e.png\" alt=\"\u0412\u044b\u0431\u043e\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 Vue \u0438 history mode\" title=\"\u0412\u044b\u0431\u043e\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 Vue \u0438 history mode\" width=\"1177\" height=\"159\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/546\/15e\/473\/54615e47317cf61fcce78eff8128cd4e.png\"\/><figcaption>\u0412\u044b\u0431\u043e\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 Vue \u0438 history mode<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442&#187; \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u0441\u0435\u0442\u0430 (\u0435\u0441\u043b\u0438 \u043f\u0440\u0435\u0441\u0435\u0442 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d &#8212; \u043a\u043b\u0438\u043a\u0430\u0435\u043c &#171;\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0431\u0435\u0437 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f&#187;).<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e Vue CLI \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u2013 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0442.\u043a. \u043e\u043d \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u2013 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 VS Code.<\/p>\n<h2>\u041e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043a\u043e\u0434\u0443, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0442.\u043d. <a href=\"https:\/\/vuejs.org\/guide\/scaling-up\/sfc.html\" rel=\"noopener noreferrer nofollow\">Single-File Components<\/a> (SFC, \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b). \u041b\u044e\u0431\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 VueJS, \u043a\u0430\u043a\u0438\u043c \u0431\u044b \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043e\u043d\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u0432 \u0441\u0432\u043e\u0435\u0439 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0444\u0430\u0439\u043b\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .vue). \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e <a href=\"https:\/\/vuejs.org\/guide\/essentials\/component-basics.html\" rel=\"noopener noreferrer nofollow\">\u043a\u0440\u0430\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c<\/a> \u0432\u0441\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 VueJS. \u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <s>\u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u0442\u0440\u0435\u0445 \u043a\u0438\u0442\u0430\u0445<\/s> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043c\u0438\u0440\u0430 Web \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 (html), \u0441\u0442\u0438\u043b\u0438 (CSS) \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 (JS), \u0445\u043e\u0442\u044f \u0438 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0435 \u0442\u0440\u0438.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0434\u0443 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044e. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, WinForms \u043d\u0430 C#) \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438 (Button), \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 (TextBox) \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u043a\u0440\u0443\u0442\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 <strong>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/strong> \u0438 <strong>\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/strong>. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u043a Width, Height, Text \u0438 Name, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u044e\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u044e\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u0440\u0435\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Click), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f (\u0444\u0430\u0439\u0440\u044f\u0442\u0441\u044f, \u044d\u043c\u0438\u0442\u044f\u0442\u0441\u044f) \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0422\u0430\u043a \u0432\u043e\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043e Vue, \u0442\u043e \u043a\u0440\u043e\u043c\u0435 \u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0441\u0442\u0438\u043b\u044f \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/components\/props.html\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a> \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/components\/events.html\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\/\u0438\u043b\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 <a href=\"https:\/\/vuejs.org\/guide\/components\/events.html#event-arguments\" rel=\"noopener noreferrer nofollow\">\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c.<\/p>\n<h2>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/h2>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043d\u0430\u0448\u0443 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0432 VS Code. \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd6\/4d1\/cdc\/bd64d1cdc5b5313cb6996aedc26082cb.png\" width=\"241\" height=\"594\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bd6\/4d1\/cdc\/bd64d1cdc5b5313cb6996aedc26082cb.png\"\/><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 node_modules \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0435 \u044f \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u043b. \u0421\u043b\u0435\u0433\u043a\u0430 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/commit\/d37af43fb801d65aba2cea95a8bc304beaffe4ad\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c<\/a> \u0444\u0430\u0439\u043b package.json, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c15\/7af\/cbd\/c157afcbd5439ed51d17ab55823ae0bb.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u043f\u0446\u0438\u044e --open\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u043f\u0446\u0438\u044e --open\" width=\"437\" height=\"477\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c15\/7af\/cbd\/c157afcbd5439ed51d17ab55823ae0bb.png\"\/><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u043f\u0446\u0438\u044e &#8212;open<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <strong>npm run serve<\/strong>:<\/p>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7ed\/75e\/ae4\/7ed75eae4cb26e618657e1e7f0877d87.png\" alt=\"\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" title=\"\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" width=\"750\" height=\"404\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7ed\/75e\/ae4\/7ed75eae4cb26e618657e1e7f0877d87.png\"\/><figcaption>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u2014 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:8080\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:8080\/<\/a> \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/42d\/3b6\/aa7\/42d3b6aa78d65d0f698d711e697ef9b6.png\" width=\"1843\" height=\"814\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/42d\/3b6\/aa7\/42d3b6aa78d65d0f698d711e697ef9b6.png\"\/><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043a\u0430\u043a <a href=\"https:\/\/vue-loader.vuejs.org\/guide\/hot-reload.html\" rel=\"noopener noreferrer nofollow\">Hot Reload<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0432\u043e Vue CLI, \u043d\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u2014 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0442\u0443\u0442 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 InputComponent<\/h3>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 <a href=\"https:\/\/sfc.vuejs.org\/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGlkPVwiY29udGFpbmVyXCI+XG4gICAgPHRhYmxlPlxuICAgICAgPHRib2R5PlxuICAgICAgICA8dHI+XG4gICAgICAgICAgPHRkPlxuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgIHYtbW9kZWw9XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgcmVmPVwiaW5wdXRcIlxuICAgICAgICAgICAgICA6dHlwZT1cImlucHV0VHlwZVwiXG4gICAgICAgICAgICAgIEBrZXl1cC5lbnRlcj1cImNoYW5nZUlucHV0VmFsdWVcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L3RkPlxuICAgICAgICAgIDx0ZCBpZD1cImNsZWFyLWljb24tY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgIHYtaWY9XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgaWQ9XCJjbGVhci1pY29uXCIgICAgICAgICAgICAgXG4gICAgICAgICAgICAgIGFsdD1cImNsZWFyXCJcbiAgICAgICAgICAgICAgQGNsaWNrPVwiY2xlYXJJbnB1dFZhbHVlXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC90ZD5cbiAgICAgICAgPC90cj5cbiAgICAgIDwvdGJvZHk+XG4gICAgPC90YWJsZT5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiBcIklucHV0Q29tcG9uZW50XCIsXG4gIFxuICBlbWl0czogW1wiaW5wdXRWYWx1ZUNoYW5nZWRcIiwgXCJjbGVhckJ1dHRvbkNsaWNrZWRcIl0sXG5cbiAgcHJvcHM6IHtcbiAgICBpbnB1dFR5cGU6IFN0cmluZyxcbiAgfSxcblxuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBpbnB1dFZhbHVlOiBcIlwiLFxuICAgIH07XG4gIH0sXG5cbiAgbWV0aG9kczoge1xuICAgIGNsZWFySW5wdXRWYWx1ZSgpIHtcbiAgICAgIHRoaXMuaW5wdXRWYWx1ZSA9IFwiXCI7IC8vINCf0L7RgdC70LUg0YnQtdC70YfQutCwINC80Ysg0LfQsNGC0LjRgNCw0LXQvCDQt9C90LDRh9C10L3QuNC1INC40L3Qv9GD0YLQsFxuICAgICAgdGhpcy4kcmVmcy5pbnB1dC5mb2N1cygpOyAvLyDRg9GB0YLQsNC90LDQstC70LjQstCw0LXQvCDRhNC+0LrRg9GBINC90LAg0LjQvdC\/0YPRglxuICAgICAgdGhpcy4kZW1pdChcImNsZWFyQnV0dG9uQ2xpY2tlZFwiKTsgLy8g0Lgg0LPQtdC90LXRgNC40YDRg9C10Lwg0YHQvtCx0YvRgtC40LUgY2xlYXJCdXR0b25DbGlja2VkXG4gICAgfSxcbiAgICBjaGFuZ2VJbnB1dFZhbHVlKCkge1xuICAgICAgdGhpcy4kZW1pdChcImlucHV0VmFsdWVDaGFuZ2VkXCIsIHRoaXMuaW5wdXRWYWx1ZSk7XG4gICAgfSxcbiAgfSxcbn07XG48L3NjcmlwdD5cblxuPHN0eWxlIHNjb3BlZD5cbnRhYmxlIHtcbiAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gIHdpZHRoOiAtd2Via2l0LWZpbGwtYXZhaWxhYmxlO1xufVxuXG4jY2xlYXItaWNvbiB7XG4gIHdpZHRoOiAwLjdlbTtcbiAgaGVpZ2h0OiAwLjdlbTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG5pbnB1dCB7XG4gIHdpZHRoOiAtd2Via2l0LWZpbGwtYXZhaWxhYmxlO1xufVxuXG4jY2xlYXItaWNvbi1jb250YWluZXIge1xuICB3aWR0aDogMWVtO1xuICBoZWlnaHQ6IDFlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDFweCBzb2xpZDtcbn1cbjwvc3R5bGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3NlcnZlci1yZW5kZXJlci5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==\" rel=\"noopener noreferrer nofollow\">Vue SFC Playground<\/a>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 public \u043f\u0430\u043f\u043a\u0443 img, \u0430 \u0432 \u043d\u0435\u0439 \u043f\u0430\u043f\u043a\u0443 icons. \u0412 \u043f\u0430\u043f\u043a\u0435 icons \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b clear-icon.svg \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>public\/img\/icons\/clear-icon.svg<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"markdown\">&lt;svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  width=\"1000pt\" height=\"1280.000000pt\" viewBox=\"0 0 1280.000000 1280.000000\" > &lt;g transform=\"translate(0.000000,1280.000000) scale(0.100000,-0.100000)\" fill=\"#979799\" stroke=\"none\"> &lt;path d=\"M1545 12784 c-85 -19 -167 -51 -243 -95 -69 -41 -1089 -1049 -1157 -1144 -101 -141 -140 -263 -140 -440 0 -169 36 -293 125 -427 29 -43 705 -726 2149 -2170 l2106 -2108 -2111 -2112 c-1356 -1358 -2124 -2133 -2147 -2169 -88 -137 -121 -249 -121 -419 -1 -181 37 -302 139 -445 68 -95 1088 -1103 1157 -1144 273 -159 604 -143 853 42 22 17 986 976 2143 2131 l2102 2101 2103 -2101 c1156 -1155 2120 -2114 2142 -2131 69 -51 130 -82 224 -113 208 -70 431 -44 629 71 69 41 1089 1049 1157 1144 101 141 140 263 140 440 0 166 -36 290 -121 422 -25 39 -746 767 -2148 2171 l-2111 2112 2107 2108 c2207 2208 2162 2161 2219 2303 75 187 77 392 4 572 -53 132 -74 157 -615 700 -289 291 -552 548 -585 572 -141 101 -263 140 -440 140 -166 0 -289 -35 -420 -120 -41 -26 -724 -702 -2172 -2149 l-2113 -2111 -2112 2111 c-1454 1452 -2132 2123 -2173 2150 -64 41 -149 78 -230 101 -79 22 -258 26 -340 7z\"\/> &lt;\/g> &lt;\/svg> <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0430 \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 svg \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u043d\u043f\u0443\u0442\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 src\/components \u0444\u0430\u0439\u043b InputComponent.vue \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0433\u043e \u0442\u0430\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<details class=\"spoiler\">\n<summary>InputComponent.vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">&lt;template>   &lt;div id=\"container\">     &lt;table>       &lt;tbody>         &lt;tr>           &lt;td>             &lt;input               v-model=\"inputValue\"               ref=\"input\"               :type=\"inputType\"               @keyup.enter=\"changeInputValue\"             \/>           &lt;\/td>           &lt;td id=\"clear-icon-container\">             &lt;img               v-if=\"inputValue\"               id=\"clear-icon\"               src=\"..\/..\/public\/img\/icons\\clear-icon.svg\"               alt=\"clear\"               @click=\"clearInputValue\"             \/>           &lt;\/td>         &lt;\/tr>       &lt;\/tbody>     &lt;\/table>   &lt;\/div> &lt;\/template>  &lt;script> export default {   name: \"InputComponent\",    emits: [\"inputValueChanged\", \"clearButtonClicked\"],    props: {     inputType: String,   },    data() {     return {       inputValue: \"\",     };   },    methods: {     clearInputValue() {       this.inputValue = \"\";       this.$refs.input.focus();       this.$emit(\"clearButtonClicked\");     },     changeInputValue() {       this.$emit(\"inputValueChanged\", this.inputValue);     },   }, }; &lt;\/script>  &lt;style scoped> table {   \/* border: 1px solid black; *\/   width: -webkit-fill-available; }  #clear-icon {   width: 0.7em;   height: 0.7em;   cursor: pointer; }  input {   border: none;   outline: none;   width: -webkit-fill-available; }  #clear-icon-container {   width: 1em;   height: 1em;   text-align: center;   \/* border: 1px solid; *\/ } &lt;\/style><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043e\u0431\u044b\u0447\u043d\u044b\u0439 &lt;table> \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0438 \u0434\u0432\u0443\u043c\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c\u0438 (\u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438) \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0439 \u0432 \u0442\u044d\u0433 &lt;div> (\u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 div, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/45000510\/vue-js-error-component-template-should-contain-exactly-one-root-element\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438<\/a>). <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 html \u0438\u043d\u043f\u0443\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;td>     &lt;input        v-model=\"inputValue\"        ref=\"input\"        :type=\"inputType\"         @keyup.enter=\"changeInputValue\"      \/> &lt;\/td><\/code><\/pre>\n<p>\u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 svg \u0438\u043a\u043e\u043d\u043a\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;td id=\"clear-icon-container\">     &lt;img        v-if=\"inputValue\"        id=\"clear-icon\"        src=\"..\/..\/public\/img\/icons\\clear-icon.svg\"        alt=\"clear\"        @click=\"clearInputValue\"     \/> &lt;\/td><\/code><\/pre>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u0438. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 inputValue \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c, \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/vuejs.org\/guide\/essentials\/conditional.html\" rel=\"noopener noreferrer nofollow\">\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v-if<\/a> (\u0443\u0441\u043b\u043e\u0432\u043d\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430).<\/p>\n<p>\u0410 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438<\/p>\n<pre><code class=\"javascript\">@click=\"clearInputValue\"<\/code><\/pre>\n<p>\u043c\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0449\u0435\u043b\u0447\u043a\u0430 \u043f\u043e \u0438\u043a\u043e\u043d\u043a\u0435 \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c. \u041b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 clearInputValue():<\/p>\n<pre><code class=\"javascript\">clearInputValue() {       this.inputValue = \"\"; \/\/ \u041f\u043e\u0441\u043b\u0435 \u0449\u0435\u043b\u0447\u043a\u0430 \u043c\u044b \u0437\u0430\u0442\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430       this.$refs.input.focus(); \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u0438\u043d\u043f\u0443\u0442       this.$emit(\"clearButtonClicked\"); \/\/ \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 clearButtonClicked }<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 DOM \u0432\u043d\u0443\u0442\u0440\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/vuejs.org\/guide\/essentials\/template-refs.html\" rel=\"noopener noreferrer nofollow\">\u0430\u0442\u0440\u0438\u0431\u0443\u0442 ref<\/a> (\u043a\u0441\u0442\u0430\u0442\u0438, \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d \u043a\u0435\u0439\u0441 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432\u0432\u043e\u0434\u0430).<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 changeInputValue():<\/p>\n<pre><code class=\"javascript\">changeInputValue() {       this.$emit(\"inputValueChanged\", this.inputValue); }<\/code><\/pre>\n<p>\u044d\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a <a href=\"https:\/\/vuejs.org\/guide\/essentials\/event-handling.html#key-modifiers\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/a> keyup.enter. \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 Enter \u0444\u0430\u0439\u0440\u0438\u0442\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435 inputValueChanged \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u043f\u0435\u0440\u0432\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0441 \u0441\u0430\u043c\u0438\u043c \u0438\u043d\u043f\u0443\u0442\u043e\u043c. \u0412 \u043d\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u043a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u043a\u0430\u043a <a href=\"https:\/\/vuejs.org\/guide\/essentials\/forms.html#form-input-bindings\" rel=\"noopener noreferrer nofollow\">v-model<\/a> \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e. \u042d\u0442\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0432\u044f\u0442\u0438\u0442\u044c \u0446\u0435\u043b\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0412 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u044d\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f inputValue, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 <a href=\"https:\/\/vuejs.org\/guide\/essentials\/reactivity-fundamentals.html\" rel=\"noopener noreferrer nofollow\">\u043e\u043f\u0446\u0438\u0438 data()<\/a>:<\/p>\n<pre><code class=\"javascript\">data() {     return {       inputValue: \"\",     }; }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u0415\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e v-model<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412\u043e\u043e\u0431\u0449\u0435, \u0434\u0430\u043d\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c &lt;input>, \u043d\u043e \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (textarea, checkbox, radio, select) \u0438 \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u0430 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b1d\/3e6\/e8d\/b1d3e6e8d3439b83a7cde26c283bddf4.png\" alt=\"\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (value) \u0438\u043d\u043f\u0443\u0442\u0430 \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 text \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f input\" title=\"\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (value) \u0438\u043d\u043f\u0443\u0442\u0430 \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 text \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f input\" width=\"693\" height=\"102\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b1d\/3e6\/e8d\/b1d3e6e8d3439b83a7cde26c283bddf4.png\"\/><figcaption>\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (value) \u0438\u043d\u043f\u0443\u0442\u0430 \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 text \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f input<\/figcaption><\/figure>\n<p>\u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7a7\/8b7\/078\/7a78b7078eec30adb4acc9e82132add5.png\" alt=\"\u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-model\" title=\"\u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-model\" width=\"695\" height=\"61\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7a7\/8b7\/078\/7a78b7078eec30adb4acc9e82132add5.png\"\/><figcaption>\u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-model<\/figcaption><\/figure>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0432\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 <a href=\"https:\/\/vuejs.org\/guide\/essentials\/forms.html\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>. \u041d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 Enter, \u2014 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 v-model \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c. <\/p>\n<\/div>\n<\/details>\n<p>\u0423 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0434\u043d\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u2014 inputType \u0442\u0438\u043f\u0430 String, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u0432\u043d\u0435 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c FilterComponent, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u0434\u0430\u043b\u044c\u0448\u0435):<\/p>\n<pre><code class=\"javascript\">props: {     inputType: String, }<\/code><\/pre>\n<p>\u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/vuejs.org\/guide\/essentials\/template-syntax.html#attribute-bindings\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f<\/a> \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 type \u0438\u043d\u043f\u0443\u0442\u0430 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430:<\/p>\n<pre><code class=\"javascript\">:type=\"inputType\"<\/code><\/pre>\n<p>\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043e \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u0438\u0437 \u0434\u0432\u0443\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u2014 &#171;Text&#187; \u0438\u043b\u0438 &#171;Number&#187;. \u0418 \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u0438\u043d\u043f\u0443\u0442 \u0431\u0443\u0434\u0435\u0442, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043b\u0438\u0431\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u0435\u043c \u0432\u0432\u043e\u0434\u0430, \u043b\u0438\u0431\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u043c. \u0412\u0441\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0412\u043e\u0442, \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u0442\u044c \u2014 \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e inputType, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0442\u0438\u043f \u0438 \u0434\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f inputValue \u0438 \u0449\u0435\u043b\u0447\u043a\u0435 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">emits: [\"inputValueChanged\", \"clearButtonClicked\"]<\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u043e \u0441\u0442\u0438\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u0442\u044d\u0433 &lt;style> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <a href=\"https:\/\/vue-loader.vuejs.org\/guide\/scoped-css.html\" rel=\"noopener noreferrer nofollow\">scoped<\/a>. \u042d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">table {   \/* border: 1px solid black; *\/   width: -webkit-fill-available; }<\/code><\/pre>\n<p>\u0423 \u0438\u043d\u043f\u0443\u0442\u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/outline\" rel=\"noopener noreferrer nofollow\">\u0430\u0443\u0442\u043b\u0430\u0439\u043d<\/a>, \u0442.\u043a. \u043e\u043d\u0438 \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f:<\/p>\n<pre><code class=\"javascript\">input {   border: none;   outline: none;   width: -webkit-fill-available; }<\/code><\/pre>\n<h2>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0432\u043e\u0434\u0430 \u0441 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c \u0438 \u0434\u0430\u0442\u043e\u0439<\/h2>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u044b: <a href=\"https:\/\/sfc.vuejs.org\/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGlkPVwiY29udGFpbmVyXCI+XG4gICAgPHRhYmxlPlxuICAgICAgPHRib2R5PlxuICAgICAgICA8dHI+XG4gICAgICAgICAgPHRkPlxuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgIHYtbW9kZWw9XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgICAgICAgOmluZGV0ZXJtaW5hdGU9XCJpc0luZGV0ZXJtaW5hdGVcIlxuICAgICAgICAgICAgICBAY2hhbmdlPVwiY2hhbmdlSW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvdGQ+XG4gICAgICAgICAgPHRkIGlkPVwiY2xlYXItaWNvbi1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxpbWdcbiAgICAgICAgICAgICAgdi1pZj1cIiFpc0luZGV0ZXJtaW5hdGVcIlxuICAgICAgICAgICAgICBpZD1cImNsZWFyLWljb25cIlxuICAgICAgICAgICAgICBhbHQ9XCJjbGVhclwiXG4gICAgICAgICAgICAgIEBjbGljaz1cImNsZWFySW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvdGQ+XG4gICAgICAgIDwvdHI+XG4gICAgICA8L3Rib2R5PlxuICAgIDwvdGFibGU+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgbmFtZTogXCJDaGVja2JveElucHV0Q29tcG9uZW50XCIsXG5cbiAgZW1pdHM6IFtcImlucHV0VmFsdWVDaGFuZ2VkXCIsIFwiY2xlYXJCdXR0b25DbGlja2VkXCJdLFxuXG4gIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGlucHV0VmFsdWU6IGZhbHNlLFxuICAgICAgaXNJbmRldGVybWluYXRlOiB0cnVlLFxuICAgIH07XG4gIH0sXG5cbiAgbWV0aG9kczoge1xuICAgIGNsZWFySW5wdXRWYWx1ZSgpIHtcbiAgICAgIHRoaXMuaXNJbmRldGVybWluYXRlID0gdHJ1ZTtcbiAgICAgIHRoaXMuJGVtaXQoXCJjbGVhckJ1dHRvbkNsaWNrZWRcIik7XG4gICAgfSxcbiAgICBjaGFuZ2VJbnB1dFZhbHVlKCkge1xuICAgICAgdGhpcy5pc0luZGV0ZXJtaW5hdGUgPSBmYWxzZTtcbiAgICAgIHRoaXMuJGVtaXQoXCJpbnB1dFZhbHVlQ2hhbmdlZFwiLCB0aGlzLmlucHV0VmFsdWUpO1xuICAgIH0sXG4gIH0sXG59O1xuPC9zY3JpcHQ+XG5cbjxzdHlsZSBzY29wZWQ+XG50YWJsZSB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrO1xuICB3aWR0aDogLXdlYmtpdC1maWxsLWF2YWlsYWJsZTtcbn1cblxuI2NsZWFyLWljb24ge1xuICB3aWR0aDogMC43ZW07XG4gIGhlaWdodDogMC43ZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuI2NsZWFyLWljb24tY29udGFpbmVyIHtcbiAgd2lkdGg6IDFlbTtcbiAgaGVpZ2h0OiAxZW07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgYm9yZGVyOiAxcHggc29saWQ7XG59XG48L3N0eWxlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==\" rel=\"noopener noreferrer nofollow\">\u0447\u0435\u043a\u0431\u043e\u043a\u0441<\/a>, <a href=\"https:\/\/sfc.vuejs.org\/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGlkPVwiY29udGFpbmVyXCI+XG4gICAgPHRhYmxlPlxuICAgICAgPHRib2R5PlxuICAgICAgICA8dHI+XG4gICAgICAgICAgPHRkPlxuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgIHYtbW9kZWw9XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgcmVmPVwiaW5wdXRcIlxuICAgICAgICAgICAgICB0eXBlPVwiZGF0ZXRpbWUtbG9jYWxcIlxuICAgICAgICAgICAgICBAY2hhbmdlPVwiY2hhbmdlSW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvdGQ+XG4gICAgICAgICAgPHRkIGlkPVwiY2xlYXItaWNvbi1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxpbWdcbiAgICAgICAgICAgICAgdi1pZj1cImlucHV0VmFsdWVcIlxuICAgICAgICAgICAgICBpZD1cImNsZWFyLWljb25cIlxuICAgICAgICAgICAgICBhbHQ9XCJjbGVhclwiXG4gICAgICAgICAgICAgIEBjbGljaz1cImNsZWFySW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvdGQ+XG4gICAgICAgIDwvdHI+XG4gICAgICA8L3Rib2R5PlxuICAgIDwvdGFibGU+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgbmFtZTogXCJEYXRlVGltZUlucHV0Q29tcG9uZW50XCIsXG5cbiAgZW1pdHM6IFtcImlucHV0VmFsdWVDaGFuZ2VkXCIsIFwiY2xlYXJCdXR0b25DbGlja2VkXCJdLFxuXG4gIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGlucHV0VmFsdWU6IFwiXCIsXG4gICAgfTtcbiAgfSxcblxuICBtZXRob2RzOiB7XG4gICAgY2xlYXJJbnB1dFZhbHVlKCkge1xuICAgICAgdGhpcy5pbnB1dFZhbHVlID0gXCJcIjtcbiAgICAgIHRoaXMuJHJlZnMuaW5wdXQuZm9jdXMoKTtcbiAgICAgIHRoaXMuJGVtaXQoXCJjbGVhckJ1dHRvbkNsaWNrZWRcIik7XG4gICAgfSxcbiAgICBjaGFuZ2VJbnB1dFZhbHVlKCkge1xuICAgICAgdGhpcy4kZW1pdChcImlucHV0VmFsdWVDaGFuZ2VkXCIsIHRoaXMuaW5wdXRWYWx1ZSk7XG4gICAgfSxcbiAgfSxcbn07XG48L3NjcmlwdD5cblxuPHN0eWxlIHNjb3BlZD5cbnRhYmxlIHtcbiAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gIHdpZHRoOiAtd2Via2l0LWZpbGwtYXZhaWxhYmxlO1xufVxuXG4jY2xlYXItaWNvbiB7XG4gIHdpZHRoOiAwLjdlbTtcbiAgaGVpZ2h0OiAwLjdlbTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG5pbnB1dCB7XG4gIGJvcmRlcjogbm9uZTtcbiAgb3V0bGluZTogbm9uZTtcbiAgd2lkdGg6IC13ZWJraXQtZmlsbC1hdmFpbGFibGU7XG59XG5cbiNjbGVhci1pY29uLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxZW07XG4gIGhlaWdodDogMWVtO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIC8qIGJvcmRlcjogMXB4IHNvbGlkOyAqL1xufVxuPC9zdHlsZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=\" rel=\"noopener noreferrer nofollow\">\u0434\u0430\u0442\u0430<\/a><\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0438 \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043f\u0430\u043f\u043a\u0435 src\/components \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>CheckboxInputComponent.vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">&lt;template>   &lt;div id=\"container\">     &lt;table>       &lt;tbody>         &lt;tr>           &lt;td>             &lt;input               v-model=\"inputValue\"               type=\"checkbox\"               :indeterminate=\"isIndeterminate\"               @change=\"changeInputValue\"             \/>           &lt;\/td>           &lt;td id=\"clear-icon-container\">             &lt;img               v-if=\"!isIndeterminate\"               id=\"clear-icon\"               src=\"..\/..\/public\/img\/icons\\clear-icon.svg\"               alt=\"clear\"               @click=\"clearInputValue\"             \/>           &lt;\/td>         &lt;\/tr>       &lt;\/tbody>     &lt;\/table>   &lt;\/div> &lt;\/template>  &lt;script> export default {   name: \"CheckboxInputComponent\",    emits: [\"inputValueChanged\", \"clearButtonClicked\"],    data() {     return {       inputValue: false,       isIndeterminate: true,     };   },    methods: {     clearInputValue() {       this.isIndeterminate = true;       this.$emit(\"clearButtonClicked\");     },     changeInputValue() {       this.isIndeterminate = false;       this.$emit(\"inputValueChanged\", this.inputValue);     },   }, }; &lt;\/script>  &lt;style scoped> table {   \/* border: 1px solid black; *\/   width: -webkit-fill-available; }  #clear-icon {   width: 0.7em;   height: 0.7em;   cursor: pointer; }  input {   border: none;   outline: none; }  #clear-icon-container {   width: 1em;   height: 1em;   text-align: center;   \/* border: 1px solid; *\/ } &lt;\/style><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>DateTimeInputComponent.vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">&lt;template>   &lt;div id=\"container\">     &lt;table>       &lt;tbody>         &lt;tr>           &lt;td>             &lt;input               v-model=\"inputValue\"               ref=\"input\"               type=\"datetime-local\"               @change=\"changeInputValue\"             \/>           &lt;\/td>           &lt;td id=\"clear-icon-container\">             &lt;img               v-if=\"inputValue\"               id=\"clear-icon\"               src=\"..\/..\/public\/img\/icons\\clear-icon.svg\"               alt=\"clear\"               @click=\"clearInputValue\"             \/>           &lt;\/td>         &lt;\/tr>       &lt;\/tbody>     &lt;\/table>   &lt;\/div> &lt;\/template>  &lt;script> export default {   name: \"DateTimeInputComponent\",    emits: [\"inputValueChanged\", \"clearButtonClicked\"],    data() {     return {       inputValue: \"\",     };   },    methods: {     clearInputValue() {       this.inputValue = \"\";       this.$refs.input.focus();       this.$emit(\"clearButtonClicked\");     },     changeInputValue() {       this.$emit(\"inputValueChanged\", this.inputValue);     },   }, }; &lt;\/script>  &lt;style scoped> table {   \/* border: 1px solid black; *\/   width: -webkit-fill-available; }  #clear-icon {   width: 0.7em;   height: 0.7em;   cursor: pointer; }  input {   border: none;   outline: none;   width: -webkit-fill-available; }  \/* #clear-icon:hover {   background-color: bisque; } *\/  #clear-icon-container {   width: 1em;   height: 1em;   text-align: center;   \/* border: 1px solid; *\/ } &lt;\/style><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u043b\u0438\u0448\u044c \u043e\u043f\u0438\u0448\u0443 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e. <\/p>\n<p>\u0412 CheckboxInputComponent \u0444\u0438\u0433\u0443\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043a\u0430\u043a <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/:indeterminate\" rel=\"noopener noreferrer nofollow\">indeterminate<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0432 &#171;\u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435&#187; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u043e\u0442 true \/ false. \u042d\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043d\u0430 backend. <\/p>\n<p>DateTimeInputComponent \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d InputComponent.<\/p>\n<p>\u0412 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 Enter \u043c\u044b \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c change:<\/p>\n<pre><code class=\"javascript\">@change=\"changeInputValue\"<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u043f\u0446\u0438\u044f props \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c inputType, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0446\u0435\u043b\u0435\u0432\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0431\u0443\u043b\u0435\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0434\u0430\u0442\u044b\/\u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0423 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f, \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u0441 \u0442\u0430\u043a\u0438\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u043c \u041e\u041e\u041f \u043a\u0430\u043a <strong>\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>, \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0432\u043e\u0437\u043d\u0438\u043a \u0432\u043e\u043f\u0440\u043e\u0441 \u2014 &#171;\u0410 \u043d\u0435\u043b\u044c\u0437\u044f \u043b\u0438 \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043d\u0430 \u043a\u043e\u0434\u0435?&#187;. <\/p>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, <a href=\"https:\/\/stackoverflow.com\/questions\/38069600\/component-inheritance-with-vue-js\" rel=\"noopener noreferrer nofollow\">\u044f \u043d\u0435 \u043f\u0435\u0440\u0432\u044b\u0439<\/a> \u0437\u0430\u0434\u0430\u043b\u0441\u044f \u044d\u0442\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043e Vue \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043a\u0430\u043a <a href=\"https:\/\/vuejs.org\/api\/options-composition.html\" rel=\"noopener noreferrer nofollow\">provide, inject, mixins \u0438 extends<\/a>. \u041d\u043e \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u043a\u043e\u0434 \u0442\u0430\u043a\u0438\u043c, \u043a\u0430\u043a\u043e\u0439 \u043e\u043d \u0435\u0441\u0442\u044c \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443 \u043d\u0430\u0433\u0440\u043e\u043c\u043e\u0436\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438. \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0431\u0435\u0437 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043f\u0440\u0430\u0432\u043b\u044f\u044e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u043a \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c \u0432\u044b\u0448\u0435.<\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0438\u043f\u043e\u0432 \u0432\u0432\u043e\u0434\u0430  \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0432\u0437\u0430\u043c\u0435\u043d \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v-model, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 inputType, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u0430\u0436\u0435 \u0432 <a href=\"https:\/\/vuejs.org\/guide\/reusability\/custom-directives.html\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b (\u043b\u0438\u0431\u043e \u0432 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0439\u043d\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cb9\/af5\/0d7\/cb9af50d7bd47460c888ba2aed0c9901.png\" width=\"716\" height=\"64\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cb9\/af5\/0d7\/cb9af50d7bd47460c888ba2aed0c9901.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. Vuex<\/h2>\n<p>\u0412 \u043b\u044e\u0431\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0437\u0430\u0442\u0435\u0435\u0439. \u042f \u0434\u0443\u043c\u0430\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Vuex \u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u044d\u0442\u0443 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 (\u0434\u0430 \u0447\u0442\u043e \u0443\u0436 \u0442\u0430\u043c, \u0446\u0435\u043b\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d!), \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043c\u0438\u043c\u043e <a href=\"https:\/\/vuex.vuejs.org\/\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u0438 \u0435\u0449\u0435 \u0441 \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u0441\u0442\u0430\u0442\u0435\u0439 (<a href=\"https:\/\/habr.com\/ru\/post\/421551\/\" rel=\"noopener noreferrer nofollow\">\u043e\u0434\u043d\u0430<\/a> \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435) \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=c2SK1IlmYL8\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e<\/a> \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0440\u0443\u0442\u043e\u0433\u043e \u043f\u0430\u0440\u043d\u044f \u0432 \u043c\u0438\u0440\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435! \u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u043c\u043e\u0433 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f Vuex?!<\/p>\n<p>Vuex \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u0432\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (state):<\/p>\n<ol>\n<li>\n<p>\u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u043e\u0439, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434; <\/p>\n<\/li>\n<li>\n<p>\u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0438\u0445 (\u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0445) \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0433\u0440\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u044d\u0434\u0434\u0438\u043d\u0433\u0438, \u043c\u0430\u0440\u0433\u0438\u043d\u044b \u0438 \u0442.\u043f.); <\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 store \u043f\u0430\u043f\u043a\u0443 modules, \u0430 \u0432 \u043d\u0435\u0439 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/grid.js\" rel=\"noopener noreferrer nofollow\">grid.js<\/a> \u0438 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/gridOptions.js\" rel=\"noopener noreferrer nofollow\">gridOptions.js<\/a> (\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0448\u0435 =)), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u043e\u0431\u044a\u0435\u043a\u0442\u044b state) \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 state (\u0432 \u043c\u043e\u0434\u0443\u043b\u0435 grid.js) \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<details class=\"spoiler\">\n<summary>state \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">state: {         dataGridRows: [], \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u043e\u043a, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c\u044b\u0445 \u043e\u0442 \u0431\u044d\u043a\u0435\u043d\u0434\u0430         dataGridRowsCount: null, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0441\u0442\u0440\u043e\u043a         dataSourceUri: \"http:\/\/127.0.0.1:3000\/documents\/findPaginated\", \/\/ \u0430\u0434\u0440\u0435\u0441, \u043a\u0443\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438         sorting: {             sortColumn: \"createdOn\", \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0434\u043b\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438             sortDirection: \"DESC\", \/\/ \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438         },         pagingData: {             pageSize: 5, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435             pageNumber: 1, \/\/ \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b         },         filter: {} \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 }<\/code><\/pre>\n<p>\u0442\u0430\u043a\u0436\u0435 \u0441\u044e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0438 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e (\u0434\u0430, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0442.\u043a. \u043a\u043e\u043b-\u0432\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043a\u0430\u043a \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u043d\u043e \u0437\u0430\u0431\u0435\u0433\u0430\u044f \u043d\u0430\u043f\u0435\u0440\u0435\u0434 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e TypeORM, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0411\u0414, \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0442\u0440\u043e\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u0438 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u044d\u0442\u0438\u043c). \u0418 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0441\u044e\u0434\u0430 \u0442\u0430\u043a\u0436\u0435 URI backend-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/div>\n<\/details>\n<p>\u0410 \u0432\u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u0442\u0435\u043b\u0430 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON:<\/p>\n<pre><code class=\"json\">{     \"paging\": {         \"skip\": 0,         \"take\": 5     },     \"sorting\": {         \"createdOn\": \"DESC\"     },     \"filtering\": {         \"createdOn\": {             \"columnType\": \"datetime-local\",             \"comparisonOperator\": \"greaterThanOrEqualOperator\",             \"valueToFilter\": \"2000-06-19T13:39\"         },         \"inArchive\": {             \"columnType\": \"checkbox\",             \"comparisonOperator\": \"equalOperator\",             \"valueToFilter\": true         },         \"id\": {             \"columnType\": \"number\",             \"comparisonOperator\": \"greaterThanOperator\",             \"valueToFilter\": 10         }     } }<\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u041e\u0431\u044a\u0435\u043a\u0442 <strong>paging<\/strong> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 skip \u0438 take, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a &#171;\u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c&#187; \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e &#171;\u0431\u0440\u0430\u0442\u044c&#187;, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041e\u043d\u0438 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/grid.js#L10\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f<\/a> \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 pagingData, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u043c\u0441\u044f \u0432 state. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e, \u0447\u0442\u043e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u043b\u0438\u0431\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u0442\u043e\u043b\u0431\u0446\u0443. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <strong>sorting<\/strong>. \u041e\u0431\u044a\u0435\u043a\u0442 <strong>filtering<\/strong> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0438\u0445 \u0442\u0438\u043f\u044b, \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u042d\u043a\u0448\u043d <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/2ac0bbff848c8756f289256b03e2ad68c9bd9a0c\/src\/store\/modules\/grid.js#L5\" rel=\"noopener noreferrer nofollow\">fetchDataGridRows<\/a> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0411\u0414 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/axios-http.com\/\" rel=\"noopener noreferrer nofollow\">axios<\/a>. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043f\u0440\u043e \u043c\u0443\u0442\u0430\u0446\u0438\u044e <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/2ac0bbff848c8756f289256b03e2ad68c9bd9a0c\/src\/store\/modules\/grid.js#L50\" rel=\"noopener noreferrer nofollow\">addNewColumnDataToFilter<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0435\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0432 \u0444\u0430\u0439\u043b\u0435 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/grid.js\" rel=\"noopener noreferrer nofollow\">grid.js<\/a> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 state, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 state, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0448\u043b\u0430 \u0440\u0435\u0447\u044c \u0432\u044b\u0448\u0435, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u043e\u0434\u0443\u043b\u0435 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/gridOptions.js\" rel=\"noopener noreferrer nofollow\">gridOptions.js<\/a>. \u041f\u043e\u043c\u0438\u043c\u043e state \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438\u0448\u044c \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 \u0433\u0440\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<h2>\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f<\/h2>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438<\/a> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 7 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445:<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ff7\/f92\/8b6\/ff7f928b661a0ca940a5311d78a3208e.png\" alt=\"\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\" title=\"\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\" width=\"1194\" height=\"128\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff7\/f92\/8b6\/ff7f928b661a0ca940a5311d78a3208e.png\"\/><figcaption>\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/figcaption><\/figure>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L5\" rel=\"noopener noreferrer nofollow\">\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440<\/a> \u0441 \u043f\u0440\u0435\u0434\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L13\" rel=\"noopener noreferrer nofollow\">\u0411\u043b\u043e\u043a<\/a> \u0441 \u043e\u0431\u0449\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u0442\u0440\u043e\u043a \u0432 \u0433\u0440\u0438\u0434\u0435;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L16\" rel=\"noopener noreferrer nofollow\">\u041a\u043d\u043e\u043f\u043a\u0430<\/a> \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L19\" rel=\"noopener noreferrer nofollow\">\u041a\u043d\u043e\u043f\u043a\u0430<\/a> \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L22\" rel=\"noopener noreferrer nofollow\">\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435<\/a> \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0435\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L29\" rel=\"noopener noreferrer nofollow\">\u041a\u043d\u043e\u043f\u043a\u0430<\/a> \u0441 \u043e\u0431\u0449\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446 (\u043f\u043e \u043a\u043b\u0438\u043a\u0443 &#8212; \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443);<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L35\" rel=\"noopener noreferrer nofollow\">\u041a\u043d\u043e\u043f\u043a\u0430<\/a> \u0441 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443;<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u043a\u0440\u043e\u043c\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u043e\u0432\u0435\u0441\u0442\u0438\u0442\u044c \u0433\u0440\u0438\u0434 \u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c (\u043f\u0443\u043d\u043a\u0442\u044b 3, 4, 5, 6, 7), \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043b-\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 (1) \u043f\u043e\u0441\u043b\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 pagingDataChanged:<\/p>\n<pre><code class=\"javascript\">emits: [\"pagingDataChanged\"]<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u043e\u043f\u0446\u0438\u044f \u2014 <a href=\"https:\/\/vuejs.org\/guide\/essentials\/computed.html\" rel=\"noopener noreferrer nofollow\">computed<\/a>. \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430 C# \u2014 \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <a href=\"https:\/\/docs.microsoft.com\/ru-ru\/dotnet\/csharp\/programming-guide\/classes-and-structs\/properties\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a>. Computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u043f\u0446\u0438\u0438 data. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/essentials\/computed.html#writable-computed\" rel=\"noopener noreferrer nofollow\">\u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u044b<\/a> \u0434\u043b\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b v-model. <\/p>\n<p>\u0421\u0430\u043c\u044b\u043c &#171;\u0441\u043b\u043e\u0436\u043d\u044b\u043c&#187; computed-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0437\u0434\u0435\u0441\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/PagingComponent.vue#L53\" rel=\"noopener noreferrer nofollow\">totalPageCount()<\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 (\u043f.6) \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0432\u0443\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u0432 \u0433\u0440\u0438\u0434\u0435 <strong>this.$store.getters.dataGridRowsCount<\/strong> \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <strong>this.$store.getters.pageSize<\/strong>. \u0410 \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 (state), \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0448\u043b\u0430 \u0440\u0435\u0447\u044c \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e computed \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/vuejs.org\/guide\/essentials\/reactivity-fundamentals.html#declaring-methods\" rel=\"noopener noreferrer nofollow\">\u043c\u0435\u0442\u043e\u0434\u044b<\/a>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c. \u0427\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/essentials\/computed.html#computed-caching-vs-methods\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<h2>FilterComponent<\/h2>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0444\u0430\u0439\u043b <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/FilterComponent.vue\" rel=\"noopener noreferrer nofollow\">FilterComponent.vue<\/a>.<\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/FilterComponent.vue#L7\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430<\/a> \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/FilterComponent.vue#L22\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0432\u043e\u0434\u0430<\/a>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0448\u043b\u0430 \u0440\u0435\u0447\u044c \u0432\u044b\u0448\u0435, \u0442\u0438\u043f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0442\u0438\u043f\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 (\u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0439, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439, \u0434\u0430\u0442\u0430 \u0438 \u0442.\u0434.):<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/495\/c5a\/005\/495c5a005beb43d862538f0c9a1b37cc.png\" alt=\"\u0424\u0438\u043b\u044c\u0442\u0440-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. 1 - \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f. 2 - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0432\u043e\u0434\u0430 (InputComponent, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0438\u043f\u0430 number).\" title=\"\u0424\u0438\u043b\u044c\u0442\u0440-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. 1 - \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f. 2 - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0432\u043e\u0434\u0430 (InputComponent, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0438\u043f\u0430 number).\" width=\"603\" height=\"449\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/495\/c5a\/005\/495c5a005beb43d862538f0c9a1b37cc.png\"\/><figcaption>\u0424\u0438\u043b\u044c\u0442\u0440-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. 1 &#8212; \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f. 2 &#8212; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0432\u043e\u0434\u0430 (InputComponent, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0438\u043f\u0430 number).<\/figcaption><\/figure>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c:<\/p>\n<pre><code class=\"javascript\"> components: {     InputComponent,     CheckboxInputComponent,     DateTimeInputComponent,  }<\/code><\/pre>\n<p>\u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"javascript\">props: {     columnType: String,     columnName: String, }<\/code><\/pre>\n<p>\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">emits: [\"filterChanged\"]<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/FilterComponent.vue#L129\" rel=\"noopener noreferrer nofollow\">defaultComparisonOperatorByColumnType(columnType)<\/a> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0433\u0440\u0438\u0434\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0410 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/FilterComponent.vue#L90\" rel=\"noopener noreferrer nofollow\">getComparisonOperatorsByColumnType(columnType)<\/a> \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/FilterComponent.vue#L141\" rel=\"noopener noreferrer nofollow\">commitFilterAndEmit()<\/a> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u2014 \u043e\u043d \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0432 store:<\/p>\n<pre><code class=\"javascript\">this.$store.commit(\"addNewColumnDataToFilter\", columnData);<\/code><\/pre>\n<p>\u0438 \u044d\u043c\u0438\u0442\u0438\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">this.$emit(\"filterChanged\");<\/code><\/pre>\n<h2>GridComponent<\/h2>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/GridComponent.vue\" rel=\"noopener noreferrer nofollow\">\u0444\u0430\u0439\u043b<\/a> \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0433\u0440\u0438\u0434\u0430 \u0431\u044b\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0430 \u0441 \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 (&#171;Id&#187;, &#171;\u0428\u0438\u0444\u0440 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430&#187; , &#171;\u0414\u0430\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f&#187; \u0438 &#171;\u0412 \u0430\u0440\u0445\u0438\u0432\u0435&#187;), \u0441\u043c. \u0440\u0438\u0441\u0443\u043d\u043e\u043a.<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0b8\/8d9\/506\/0b88d9506d46746f381c1fb1c2c6936d.png\" alt=\"\u0413\u0440\u0438\u0434 \u0432\u043e \u0432\u0441\u0435\u0439 \u0435\u0433\u043e \u043a\u0440\u0430\u0441\u0435\" title=\"\u0413\u0440\u0438\u0434 \u0432\u043e \u0432\u0441\u0435\u0439 \u0435\u0433\u043e \u043a\u0440\u0430\u0441\u0435\" width=\"1164\" height=\"267\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0b8\/8d9\/506\/0b88d9506d46746f381c1fb1c2c6936d.png\"\/><figcaption>\u0413\u0440\u0438\u0434 \u0432\u043e \u0432\u0441\u0435\u0439 \u0435\u0433\u043e \u043a\u0440\u0430\u0441\u0435<\/figcaption><\/figure>\n<p>\u0413\u0440\u0438\u0434 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0425\u0435\u0434\u0435\u0440 c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c &#171;\u0412\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u0441\u0435&#187; \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438, \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e \u0438 \u043c\u0443\u043b\u044c\u0442\u0438\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/gridOptions.js#L123\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <\/a>\u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 gridOptions.js:<\/p>\n<pre><code class=\"javascript\"> behaviorOptions: {             allowMultipleSelection: true,             allowSelectAll: true,             allowPaging: true,             allowFiltering: true  }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f html \u0442\u0430\u0431\u043b\u0438\u0446\u0430. \u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/essentials\/class-and-style.html#binding-inline-styles\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 style \u043a JS-\u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c<\/a>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f &lt;table> \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 computed-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e getCommonTableOptions:<\/p>\n<pre><code class=\"javascript\">&lt;table :style=\"getCommonTableOptions\"><\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e (\u0438 \u0435\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435) \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u043d\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u2014 \u0435\u0433\u043e \u0442\u0435\u043b\u043e <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/gridOptions.js#L131\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f<\/a> \u0432\u043e Vuex-\u043c\u043e\u0434\u0443\u043b\u0435 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 getters:<\/p>\n<pre><code class=\"javascript\">getCommonTableOptions(state) {             let commonTableOptions = [];             Array.prototype.push.apply(commonTableOptions,                 [state.commonTableOptions.borders.top,                 state.commonTableOptions.borders.right,                 state.commonTableOptions.borders.bottom,                 state.commonTableOptions.borders.left,                 state.commonTableOptions.collapse]             )             return commonTableOptions; }<\/code><\/pre>\n<p>\u0433\u0434\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 commonTableOptions \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 state, \u0430 \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0433\u0435\u0442\u0442\u0435\u0440 \u0432 \u0444\u0430\u0439\u043b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0444\u0438\u0447\u0430 Vuex \u043a\u0430\u043a <a href=\"https:\/\/vuex.vuejs.org\/guide\/getters.html#the-mapgetters-helper\" rel=\"noopener noreferrer nofollow\">mapGetters<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043c\u0430\u043f\u043f\u0438\u0442\u044c \u0433\u0435\u0442\u0442\u0435\u0440\u044b Vuex \u0432 computed-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0411<em>\u043e<\/em>\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043a\u043e\u0434\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u0430\u043f\u043f\u0438\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e mapGetters.<\/p>\n<p>\u0413\u0440\u0438\u0434 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u2014 selectionChanged:<\/p>\n<pre><code class=\"javascript\">emits: [\"selectionChanged\"]<\/code><\/pre>\n<p>\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0444\u0430\u0439\u0440\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a (\u043b\u0438\u0431\u043e \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438) \u0433\u0440\u0438\u0434\u0430. \u0422\u0430\u043a\u0430\u044f \u0444\u0438\u0447\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435 v-model \u0438 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/components\/GridComponent.vue#L74\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u043a \u043d\u0435\u0439 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 selectedRows<\/a>:<\/p>\n<pre><code class=\"javascript\">&lt;input             type=\"checkbox\"             :value=\"row.id\"             v-model=\"selectedRows\"             @change=\"$emit('selectionChanged', selectedRows)\" \/><\/code><\/pre>\n<p>\u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 selectedRows \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u0430\u043c\u0438 \u0441\u0442\u0440\u043e\u043a\u0438, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 id, \u043e \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0442\u0440\u043e\u0447\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">:value=\"row.id\"<\/code><\/pre>\n<p>\u043e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u044d\u0442\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u2014 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 id.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 (\u043a\u043e\u0440\u043e\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u043e\u0441\u043b\u0435 \u043b\u044e\u0431\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0433\u0440\u0438\u0434\u0435) \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/blob\/master\/src\/store\/modules\/grid.js#L5\" rel=\"noopener noreferrer nofollow\">fetchDataGridRows<\/a><\/p>\n<pre><code class=\"javascript\">this.$store.dispatch(\"fetchDataGridRows\");<\/code><\/pre>\n<p>\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0411\u0414 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0435 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u0415\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/h2>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0445 \u043c\u044b\u0441\u043b\u0435\u0439. \u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435 \u2014 \u043e\u0441\u043d\u043e\u0432\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 VueJS \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041e\u043d\u0438 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0432 \u0440\u043e\u043b\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u043b\u043e\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043b\u0438\u0447\u043d\u043e \u0443 \u043c\u0435\u043d\u044f, \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441, \u0433\u0440\u0438\u0434 \u0438 \u0442.\u043f.). \u041d\u043e \u0432\u0435\u0434\u044c \u043d\u0443\u0436\u043d\u043e \u0433\u0434\u0435-\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u044b \u0441\u0430\u0439\u0442\u043e\u0432, \u043b\u0435\u0439\u0430\u0443\u0442\u044b \u0438 \u0442.\u0434., \u0430 \u044d\u0442\u043e \u0443\u0436\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0442\u0430\u043a\u0438\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u0445 \u043a\u0430\u043a MVVM \u0438\u043b\u0438 MVC \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0447\u0435\u0442\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439. \u0422\u0430\u043c \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (View), \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0422\u0430\u043a \u0432\u043e\u0442, \u043a \u0447\u0435\u043c\u0443 \u044f \u044d\u0442\u043e \u0432\u0441\u0435&#8230;\u0432\u043e Vue \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u0442\u0430 \u0441\u0442\u0440\u043e\u0433\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u043d\u0430\u0448\u0435 \u0412\u0421\u0415! \u0418 \u044d\u0442\u043e, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 VueJS. \u041b\u044e\u0431\u043e\u0439 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .vue \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0437\u0430\u0434\u0430\u0447 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\/\u0441\u0430\u0439\u0442\u043e\u0432\/\u0441\u0438\u0441\u0442\u0435\u043c \u043d\u0430 Vue \u2014 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u0441\u0430\u043c\u043e\u043f\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0438, \u0433\u0440\u0438\u0434\u044b \u0438 \u0442.\u0434.) \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 (\u0432\u044c\u044e\u0445\u0438, \u043c\u0430\u043a\u0435\u0442\u044b, \u043b\u0435\u0439\u0430\u0443\u0442\u044b). \u041e\u0431\u044b\u0447\u043d\u043e \u043f\u0435\u0440\u0432\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u043f\u0430\u043a\u0435 src\/components, \u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 src\/views. \u0425\u043e\u0442\u044f \u043f\u043e \u0441\u0443\u0442\u0438 \u2014 \u044d\u0442\u043e \u0432\u0441\u0435 \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u0449\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (props\/emits), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e store. \u0412 \u044d\u0442\u043e\u0439 <a href=\"https:\/\/habr.com\/ru\/post\/668072\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0433\u0440\u0438\u0434\u0430 \u0431\u044b\u043b <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/commit\/38d61489b3aab033fd3f8fb66908d5b1768df75b\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d<\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 GridComponentView.vue \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u044f\u043c\u0438.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043c\u043e\u0439 \u0442\u0440\u0443\u0434 \u043f\u043e\u0439\u0434\u0435\u0442 \u043a\u043e\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u0443. \u0410 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0430\u0436\u0435 \u0441\u0442\u044f\u043d\u0435\u0442 \u0441\u0435\u0431\u0435 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend.git\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u044d\u0442\u043e\u0442 \u0433\u0440\u0438\u0434 \u0432 \u0441\u0432\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>\u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u0430 \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430!<\/p>\n<p>P.S. \u043f\u0443\u043b\u043b \u0440\u0438\u043a\u0432\u0435\u0441\u0442\u044b \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u043b&#8230;\u043c\u0438\u043b\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0448\u0443.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/post\/676622\/\"> https:\/\/habr.com\/ru\/post\/676622\/<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0445\u0430\u0431\u0440\u043e\u0432\u0446\u044b \u0438 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430!<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u0432 \u043c\u0438\u0440 frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 VueJS. \u0418 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044f \u0440\u0435\u0448\u0438\u043b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0433\u0440\u0438\u0434\u0430 \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430: \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u043e\u0439, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0438 \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435), \u0434\u0443\u043c\u0430\u044e \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0443, \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 VueJS.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 frontend \u0447\u0430\u0441\u0442\u044c, \u0430 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 NestJS, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u0433\u0440\u0438\u0434 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u043e REST API \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0411\u0414 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e TypeORM.<\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0443 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e HTML, CSS \u0438 JS. \u0412\u0441\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0438 \u043a\u043e\u0434 \u0431\u0443\u0434\u0443 \u0441\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0410 \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0432\u043b\u044e <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431<\/a> \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/codesandbox.io\/s\/grid-component-frontend-ib6rqm\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u043d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 <a href=\"https:\/\/codesandbox.io\/s\/grid-component-backend-ydr7yx\" rel=\"noopener noreferrer nofollow\">backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u044c\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u0438\u0434<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><figcaption>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u0433\u0440\u0438\u0434-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c<\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0421\u0423\u0411\u0414 SQLite, \u0444\u0430\u0439\u043b \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 (test_db.sqlite). \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c 100 \u0437\u0430\u043f\u0438\u0441\u0435\u0439. \u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u0412\u0438\u0434\u0438\u043c\u043e \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u044d\u0442\u043e. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u0447\u043d\u043e.<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0438\u0441\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434 Linux (Ubuntu 20.04.4 LTS, Focal Fossa), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0432\u044b\u043a\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441 \u044d\u0442\u043e\u0439 \u041e\u0421 \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u044e\u0442.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u0439 \u0438\u0434\u0435\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f (\u0432 \u0441\u043a\u043e\u0431\u043e\u0447\u043a\u0430\u0445 \u044f \u043d\u0430\u043f\u0438\u0448\u0443 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u044f\u0442 \u0443 \u043c\u0435\u043d\u044f, \u0432\u044b \u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0441\u0432\u0435\u0436\u0438\u0435):<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/nodejs.org\/en\/\" rel=\"noopener noreferrer nofollow\">NodeJS<\/a> (v10.19.0), \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043d\u0430 Linux \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/github.com\/nodesource\/distributions\/blob\/master\/README.md#debinstall\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\" rel=\"noopener noreferrer nofollow\">npm <\/a>(v6.14.4) \u2014 \u043f\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0442\u0438 \u0432 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0441 NodeJS<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cli.vuejs.org\/guide\/\" rel=\"noopener noreferrer nofollow\">Vue CLI<\/a> (v4.5.17) \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 VueJS<\/p>\n<\/li>\n<li>\n<p>\u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435, \u0432\u044b\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0443 \u0438 \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 <a href=\"https:\/\/code.visualstudio.com\/\" rel=\"noopener noreferrer nofollow\">VS Code<\/a> \u2013 \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0441\u0435\u0431\u0435.<\/p>\n<p>P.S> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 Google Chrome \u0438 \u042f\u043d\u0434\u0435\u043a\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0437\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0433\u0443. <\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Vue CLI.<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 vue ui:<\/p>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u043f\u0443\u0441\u043a vue ui \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><figcaption>\u041e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:8000\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:8000<\/a> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u0430\u0448\u0431\u043e\u0430\u0440\u0434 Vue CLI:<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0441\u0442\u043e\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><figcaption>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Vue CLI \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered\"><figcaption>\u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><figcaption>\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0434\u0435\u0441\u044c&#187;:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><figcaption>\u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c npm \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u043a \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered\"><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u0431\u043e\u0440 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 &#171;\u0412\u0440\u0443\u0447\u043d\u0443\u044e&#187; \u0438 \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><figcaption>\u0420\u0443\u0447\u043d\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0427\u0435\u043a\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;\u0414\u0430\u043b\u0435\u0435&#187;:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><figcaption>\u0412\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/figcaption><\/figure>\n<figure class=\"bordered full-width\"><figcaption>\u0412\u044b\u0431\u043e\u0440 \u043e\u043f\u0446\u0438\u0438 &#171;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b&#187;<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c 3-\u044e \u0432\u0435\u0440\u0441\u0438\u044e Vue (\u0445\u043e\u0442\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u043b\u043e \u0431\u044b \u0438 \u0432\u0442\u043e\u0440\u043e\u0439, \u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0434\u0442\u0438 \u0432 \u043d\u043e\u0433\u0443 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c) \u0438 \u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432 <a href=\"https:\/\/router.vuejs.org\/guide\/essentials\/history-mode.html\" rel=\"noopener noreferrer nofollow\">history mode<\/a>:<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u044b\u0431\u043e\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 Vue<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"bordered full-width\"><figcaption>\u0412\u044b\u0431\u043e\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 Vue \u0438 history mode<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c &#171;\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442&#187; \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u0441\u0435\u0442\u0430 (\u0435\u0441\u043b\u0438 \u043f\u0440\u0435\u0441\u0435\u0442 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d &#8212; \u043a\u043b\u0438\u043a\u0430\u0435\u043c &#171;\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0431\u0435\u0437 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f&#187;).<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e Vue CLI \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u2013 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0442.\u043a. \u043e\u043d \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u2013 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 VS Code.<\/p>\n<h2>\u041e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043a\u043e\u0434\u0443, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0442.\u043d. <a href=\"https:\/\/vuejs.org\/guide\/scaling-up\/sfc.html\" rel=\"noopener noreferrer nofollow\">Single-File Components<\/a> (SFC, \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b). \u041b\u044e\u0431\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 VueJS, \u043a\u0430\u043a\u0438\u043c \u0431\u044b \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043e\u043d\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u0432 \u0441\u0432\u043e\u0435\u0439 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0444\u0430\u0439\u043b\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .vue). \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e <a href=\"https:\/\/vuejs.org\/guide\/essentials\/component-basics.html\" rel=\"noopener noreferrer nofollow\">\u043a\u0440\u0430\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c<\/a> \u0432\u0441\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 VueJS. \u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <s>\u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u0442\u0440\u0435\u0445 \u043a\u0438\u0442\u0430\u0445<\/s> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043c\u0438\u0440\u0430 Web \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 (html), \u0441\u0442\u0438\u043b\u0438 (CSS) \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 (JS), \u0445\u043e\u0442\u044f \u0438 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0435 \u0442\u0440\u0438.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0434\u0443 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044e. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, WinForms \u043d\u0430 C#) \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438 (Button), \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 (TextBox) \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u043a\u0440\u0443\u0442\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 <strong>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/strong> \u0438 <strong>\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/strong>. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u043a Width, Height, Text \u0438 Name, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u044e\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u044e\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u0440\u0435\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Click), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f (\u0444\u0430\u0439\u0440\u044f\u0442\u0441\u044f, \u044d\u043c\u0438\u0442\u044f\u0442\u0441\u044f) \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0422\u0430\u043a \u0432\u043e\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0434\u043d\u043e\u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043e Vue, \u0442\u043e \u043a\u0440\u043e\u043c\u0435 \u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0441\u0442\u0438\u043b\u044f \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/components\/props.html\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a> \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c <a href=\"https:\/\/vuejs.org\/guide\/components\/events.html\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\/\u0438\u043b\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 <a href=\"https:\/\/vuejs.org\/guide\/components\/events.html#event-arguments\" rel=\"noopener noreferrer nofollow\">\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c.<\/p>\n<h2>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/h2>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043d\u0430\u0448\u0443 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0432 VS Code. \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 node_modules \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0435 \u044f \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u043b. \u0421\u043b\u0435\u0433\u043a\u0430 <a href=\"https:\/\/github.com\/greenDev7\/grid-component-frontend\/commit\/d37af43fb801d65aba2cea95a8bc304beaffe4ad\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c<\/a> \u0444\u0430\u0439\u043b package.json, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u043f\u0446\u0438\u044e &#8212;open<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <strong>npm run serve<\/strong>:<\/p>\n<details class=\"spoiler\">\n<summary>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><figcaption>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u2014 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:8080\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:8080\/<\/a> \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043a\u0430\u043a <a href=\"https:\/\/vue-loader.vuejs.org\/guide\/hot-reload.html\" rel=\"noopener noreferrer nofollow\">Hot Reload<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0432\u043e Vue CLI, \u043d\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u2014 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0442\u0443\u0442 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 InputComponent<\/h3>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 <a href=\"https:\/\/sfc.vuejs.org\/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGlkPVwiY29udGFpbmVyXCI+XG4gICAgPHRhYmxlPlxuICAgICAgPHRib2R5PlxuICAgICAgICA8dHI+XG4gICAgICAgICAgPHRkPlxuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgIHYtbW9kZWw9XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgcmVmPVwiaW5wdXRcIlxuICAgICAgICAgICAgICA6dHlwZT1cImlucHV0VHlwZVwiXG4gICAgICAgICAgICAgIEBrZXl1cC5lbnRlcj1cImNoYW5nZUlucHV0VmFsdWVcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L3RkPlxuICAgICAgICAgIDx0ZCBpZD1cImNsZWFyLWljb24tY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgIHYtaWY9XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgaWQ9XCJjbGVhci1pY29uXCIgICAgICAgICAgICAgXG4gICAgICAgICAgICAgIGFsdD1cImNsZWFyXCJcbiAgICAgICAgICAgICAgQGNsaWNrPVwiY2xlYXJJbnB1dFZhbHVlXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC90ZD5cbiAgICAgICAgPC90cj5cbiAgICAgIDwvdGJvZHk+XG4gICAgPC90YWJsZT5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiBcIklucHV0Q29tcG9uZW50XCIsXG4gIFxuICBlbWl0czogW1wiaW5wdXRWYWx1ZUNoYW5nZWRcIiwgXCJjbGVhckJ1dHRvbkNsaWNrZWRcIl0sXG5cbiAgcHJvcHM6IHtcbiAgICBpbnB1dFR5cGU6IFN0cmluZyxcbiAgfSxcblxuICBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBpbnB1dFZhbHVlOiBcIlwiLFxuICAgIH07XG4gIH0sXG5cbiAgbWV0aG9kczoge1xuICAgIGNsZWFySW5wdXRWYWx1ZSgpIHtcbiAgICAgIHRoaXMuaW5wdXRWYWx1ZSA9IFwiXCI7IC8vINCf0L7RgdC70LUg0YnQtdC70YfQutCwINC80Ysg0LfQsNGC0LjRgNCw0LXQvCDQt9C90LDRh9C10L3QuNC1INC40L3Qv9GD0YLQsFxuICAgICAgdGhpcy4kcmVmcy5pbnB1dC5mb2N1cygpOyAvLyDRg9GB0YLQsNC90LDQstC70LjQstCw0LXQvCDRhNC+0LrRg9GBINC90LAg0LjQvdC\/0YPRglxuICAgICAgdGhpcy4kZW1pdChcImNsZWFyQnV0dG9uQ2xpY2tlZFwiKTsgLy8g0Lgg0LPQtdC90LXRgNC40YDRg9C10Lwg0YHQvtCx0YvRgtC40LUgY2xlYXJCdXR0b25DbGlja2VkXG4gICAgfSxcbiAgICBjaGFuZ2VJbnB1dFZhbHVlKCkge1xuICAgICAgdGhpcy4kZW1pdChcImlucHV0VmFsdWVDaGFuZ2VkXCIsIHRoaXMuaW5wdXRWYWx1ZSk7XG4gICAgfSxcbiAgfSxcbn07XG48L3NjcmlwdD5cblxuPHN0eWxlIHNjb3BlZD5cbnRhYmxlIHtcbiAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gIHdpZHRoOiAtd2Via2l0LWZpbGwtYXZhaWxhYmxlO1xufVxuXG4jY2xlYXItaWNvbiB7XG4gIHdpZHRoOiAwLjdlbTtcbiAgaGVpZ2h0OiAwLjdlbTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG5pbnB1dCB7XG4gIHdpZHRoOiAtd2Via2l0LWZpbGwtYXZhaWxhYmxlO1xufVxuXG4jY2xlYXItaWNvbi1jb250YWluZXIge1xuICB3aWR0aDogMWVtO1xuICBoZWlnaHQ6IDFlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBib3JkZXI6IDFweCBzb2xpZDtcbn1cbjwvc3R5bGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3NlcnZlci1yZW5kZXJlci5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==\" rel=\"noopener noreferrer nofollow\">Vue SFC Playground<\/a>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 public \u043f\u0430\u043f\u043a\u0443 img, \u0430 \u0432 \u043d\u0435\u0439 \u043f\u0430\u043f\u043a\u0443 icons. \u0412 \u043f\u0430\u043f\u043a\u0435 icons \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b clear-icon.svg \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>public\/img\/icons\/clear-icon.svg<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"markdown\">&lt;svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  width=\"1000pt\" height=\"1280.000000pt\" viewBox=\"0 0 1280.000000 1280.000000\" > &lt;g transform=\"translate(0.000000,1280.000000) scale(0.100000,-0.100000)\" fill=\"#979799\" stroke=\"none\"> &lt;path d=\"M1545 12784 c-85 -19 -167 -51 -243 -95 -69 -41 -1089 -1049 -1157 -1144 -101 -141 -140 -263 -140 -440 0 -169 36 -293 125 -427 29 -43 705 -726 2149 -2170 l2106 -2108 -2111 -2112 c-1356 -1358 -2124 -2133 -2147 -2169 -88 -137 -121 -249 -121 -419 -1 -181 37 -302 139 -445 68 -95 1088 -1103 1157 -1144 273 -159 604 -143 853 42 22 17 986 976 2143 2131 l2102 2101 2103 -2101 c1156 -1155 2120 -2114 2142 -2131 69 -51 130 -82 224 -113 208 -70 431 -44 629 71 69 41 1089 1049 1157 1144 101 141 140 263 140 440 0 166 -36 290 -121 422 -25 39 -746 767 -2148 2171 l-2111 2112 2107 2108 c2207 2208 2162 2161 2219 2303 75 187 77 392 4 572 -53 132 -74 157 -615 700 -289 291 -552 548 -585 572 -141 101 -263 140 -440 140 -166 0 -289 -35 -420 -120 -41 -26 -724 -702 -2172 -2149 l-2113 -2111 -2112 2111 c-1454 1452 -2132 2123 -2173 2150 -64 41 -149 78 -230 101 -79 22 -258 26 -340 7z\"\/> &lt;\/g> &lt;\/svg> <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0430 \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 svg \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u043d\u043f\u0443\u0442\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 src\/components \u0444\u0430\u0439\u043b InputComponent.vue \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0433\u043e \u0442\u0430\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<details class=\"spoiler\">\n<summary>InputComponent.vue<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">&lt;template>   &lt;div id=\"container\">     &lt;table>       &lt;tbody>         &lt;tr>           &lt;td>             &lt;input               v-model=\"inputValue\"               ref=\"input\"               :type=\"inputType\"               @keyup.enter=\"changeInputValue\"             \/>           &lt;\/td>           &lt;td id=\"clear-icon-container\">             &lt;img               v-if=\"inputValue\"               id=\"clear-icon\"               src=\"..\/..\/public\/img\/icons\\clear-icon.svg\"               alt=\"clear\"               @click=\"clearInputValue\"             \/>           &lt;\/td>         &lt;\/tr>       &lt;\/tbody>     &lt;\/table>   &lt;\/div> &lt;\/template>  &lt;script> export default {   name: \"InputComponent\",    emits: [\"inputValueChanged\", \"clearButtonClicked\"],    props: {     inputType: String,   },    data() {     return {       inputValue: \"\",     };   },    methods: {     clearInputValue() {       this.inputValue = \"\";       this.$refs.input.focus();       this.$emit(\"clearButtonClicked\");     },     changeInputValue() {       this.$emit(\"inputValueChanged\", this.inputValue);     },   }, }; &lt;\/script>  &lt;style scoped> table {   \/* border: 1px solid black; *\/   width: -webkit-fill-available; }  #clear-icon {   width: 0.7em;   height: 0.7em;   cursor: pointer; }  input {   border: none;   outline: none;   width: -webkit-fill-available; }  #clear-icon-container {   width: 1em;   height: 1em;   text-align: center;   \/* border: 1px solid; *\/ } &lt;\/style><\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043e\u0431\u044b\u0447\u043d\u044b\u0439 &lt;table> \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0438 \u0434\u0432\u0443\u043c\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c\u0438 (\u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438) \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0439 \u0432 \u0442\u044d\u0433 &lt;div> (\u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 div, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/45000510\/vue-js-error-component-template-should-contain-exactly-one-root-element\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438<\/a>). <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 html \u0438\u043d\u043f\u0443\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;td>     &lt;input        v-model=\"inputValue\"        ref=\"input\"        :type=\"inputType\"         @keyup.enter=\"changeInputValue\"      \/> &lt;\/td><\/code><\/pre>\n<p>\u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 svg \u0438\u043a\u043e\u043d\u043a\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;td id=\"clear-icon-container\">     &lt;img        v-if=\"inputValue\"        id=\"clear-icon\"        src=\"..\/..\/public\/img\/icons\\clear-icon.svg\"        alt=\"clear\"        @click=\"clearInputValue\"     \/> &lt;\/td><\/code><\/pre>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u0438. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u0430<\/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-335660","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/335660","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=335660"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/335660\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=335660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=335660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=335660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}