{"id":1060,"date":"2020-03-02T15:00:11","date_gmt":"2020-03-02T15:00:11","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1060"},"modified":"2020-03-02T15:00:12","modified_gmt":"2020-03-02T15:00:12","slug":"%d0%bf%d0%be%d1%81%d1%96%d0%b1%d0%bd%d0%b8%d0%ba-%d0%b7%d1%96-svelte","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1060","title":{"rendered":"\u041f\u043e\u0441\u0456\u0431\u043d\u0438\u043a \u0437\u0456 Svelte"},"content":{"rendered":"\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0434\u043e\u0441\u0456 \u043d\u0435  \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043b\u0438 \u0437\u0456 Svetle, \u0442\u043e \u0446\u0435 \u0447\u0443\u0434\u043e\u0432\u0430 \u043c\u043e\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044c \u043f\u043e\u0447\u0430\u0442\u0438. \u041c\u0430\u0442\u0435\u0440\u0456\u0430\u043b  \u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432, \u044f\u043a\u0456 \u0440\u0430\u043d\u0456\u0448\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043b\u0438 \u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u043d\u0430  \u0437\u0440\u0430\u0437\u043e\u043a Vue \u0447\u0438 React \u0456 \u0448\u0443\u043a\u0430\u044e\u0442\u044c \u043d\u043e\u0432\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434.  <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Svelte \u0432\u0430\u0440\u0442\u0438\u0439 \u0443\u0432\u0430\u0433\u0438,  \u0442\u043e\u043c\u0443  \u0449\u043e \u0432\u0456\u043d \u0432\u0456\u0434\u0440\u0456\u0437\u043d\u044f\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434 \u0456\u043d\u0448\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0456\u0432 \u0456 \u043c\u0430\u0454 \u0443\u043d\u0456\u043a\u0430\u043b\u044c\u043d\u0456 \u0444\u0456\u0447\u0456 \u0434\u043b\u044f  \u0432\u0435\u0431\u0443.<\/p>\n\n\n\n<h2 id=\"\u0432\u0441\u0442\u0443\u043f-\u0434\u043e-svelte\"><strong>\u0412\u0441\u0442\u0443\u043f \u0434\u043e Svelte<\/strong><\/h2>\n\n\n\n<p>Svelte \u2014 \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u044f\u043a\u0438\u0439 \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454 \u0441\u0432\u0456\u0436\u0438\u0439 \u043f\u043e\u0433\u043b\u044f\u0434 \u043d\u0430 \u0442\u0435, \u044f\u043a \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0432\u0435\u0431 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0438.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/7ZHnsXHb\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0432\u0436\u0435 \u043c\u0430\u043b\u0438 \u0434\u043e\u0441\u0432\u0456\u0434 \u0437 React, Vue, Angular \u0447\u0438 \u0456\u043d\u0448\u0438\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, Svelte \u043c\u043e\u0436\u0435 \u0432\u0430\u0441 \u043f\u0440\u0438\u0454\u043c\u043d\u043e \u0437\u0434\u0438\u0432\u0443\u0432\u0430\u0442\u0438.<\/p>\n\n\n\n<p>\u041f\u0456\u0441\u043b\u044f \u0437\u043d\u0430\u0439\u043e\u043c\u0441\u0442\u0432\u0430 \u0437\u0456 Svelte \u0432\u0430\u043c \u0437\u0434\u0430\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f, \u0449\u043e \u0446\u0435, \u0441\u043a\u043e\u0440\u0456\u0448\u0435, \u0447\u0438\u0441\u0442\u0438\u0439 \nJavaScript. \u0417\u0432\u0438\u0447\u0430\u0439\u043d\u043e, \u0454 \u0434\u0435\u044f\u043a\u0456 \u0432\u0456\u0434\u043c\u0456\u043d\u043d\u043e\u0441\u0442\u0456, \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0456\u0432, \u044f\u043a\u0456 \n\u0431\u0456\u043b\u044c\u0448\u0435 \u043d\u0430\u0433\u0430\u0434\u0443\u044e\u0442\u044c HTML. \u041e\u0434\u043d\u0430\u043a \u0437\u0456 Svelte \u0432\u0438 \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u043e \u0442\u0440\u0443\u0434\u043d\u043e\u0449\u0456, \u044f\u043a\u0456 \n\u0432\u0438\u043d\u0438\u043a\u0430\u043b\u0438 \u0432 \u0456\u043d\u0448\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445.<\/p>\n\n\n\n<p>\u041d\u0430 \u0432\u0456\u0434\u043c\u0456\u043d\u0443 \u0432\u0456\u0434 React, Vue, Angular \u0442\u0430 \u0456\u043d\u0448\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0456\u0432, \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043d\u0430 Svelte \u0437\u0430\u0437\u0434\u0430\u043b\u0435\u0433\u0456\u0434\u044c <strong>\u043a\u043e\u043c\u043f\u0456\u043b\u044e\u0454\u0442\u044c\u0441\u044f<\/strong>.\n \u0422\u0430\u043a \u0437\u043d\u0430\u0447\u043d\u043e \u043f\u043e\u043a\u0440\u0430\u0449\u0443\u0454\u0442\u044c\u0441\u044f \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0434\u043e\u0441\u0432\u0456\u0434, \u0430\u0434\u0436\u0435 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0430\u0446\u044e\u0454 \n\u043f\u043b\u0430\u0432\u043d\u043e. \u041f\u0440\u0438 \u0440\u043e\u0437\u0433\u043e\u0440\u0442\u0430\u043d\u043d\u0456 \u0432\u0430\u0448\u043e\u0433\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 \u0432\u0438 \u043e\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u0435 \u0447\u0438\u0441\u0442\u0438\u0439 (\u0442\u0430 \n\u0448\u0432\u0438\u0434\u043a\u0438\u0439) JavaScript.<\/p>\n\n\n\n<h2 id=\"\u043f\u043e\u0447\u0430\u0442\u043e\u043a-\u0440\u043e\u0431\u043e\u0442\u0438-\u0437\u0456-svelte\"><strong>\u041f\u043e\u0447\u0430\u0442\u043e\u043a \u0440\u043e\u0431\u043e\u0442\u0438 \u0437\u0456 Svelte<\/strong><\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438 Node.js, \u043d\u0430 \u044f\u043a\u043e\u043c\u0443 \u0431\u0430\u0437\u0443\u044e\u0442\u044c\u0441\u044f \u0432\u0441\u0456 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0441\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044c <a href=\"https:\/\/flaviocopes.com\/node-installation\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u043e\u043c<\/a> \u0456 \u043f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0439\u0442\u0435\u0441\u044c, \u0449\u043e \u043c\u0430\u0454\u0442\u0435 \u043e\u0441\u0442\u0430\u043d\u043d\u044e \u0432\u0435\u0440\u0441\u0456\u044e (<a href=\"https:\/\/flaviocopes.com\/how-to-update-node\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u044f\u043a \u043e\u043d\u043e\u0432\u0438\u0442\u0438 Node.js<\/a>).<\/p>\n\n\n\n<p><em>\u042f\u043a\u0449\u043e \u0432\u0438 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0435 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0432\u0430\u0442\u0438 Node, \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 Svelte \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454 <a href=\"https:\/\/svelte.dev\/repl\" target=\"_blank\" rel=\"noreferrer noopener\">\u0456\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0435 \u0441\u0435\u0440\u0435\u0434\u043e\u0432\u0438\u0449\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f<\/a>. \u0422\u0430\u043c \u0437\u0440\u0443\u0447\u043d\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0438 \u043d\u0430 Svelte \u0442\u0430 \u0435\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438.<\/em><\/p>\n\n\n\n<p>\u0417 Node \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0454\u0442\u044c\u0441\u044f \u0437\u0440\u0443\u0447\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 <a href=\"https:\/\/flaviocopes.com\/npx\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>npx<\/code><\/a>. \u041e\u0434\u0440\u0430\u0437\u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0454\u043c\u043e \u0457\u0457:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx degit sveltejs\/template firstapp\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0430\u043a \u043c\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0454\u043c\u043e <a href=\"https:\/\/github.com\/Rich-Harris\/degit\" target=\"_blank\" rel=\"noreferrer noopener\"><code>degit<\/code><\/a>, \u044f\u043a\u0438\u0439 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u044c \u043e\u0441\u0442\u0430\u043d\u043d\u044e \u0432\u0435\u0440\u0441\u0456\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0440\u043e\u0454\u043a\u0442\u0443 Svelte \u0437 <a href=\"https:\/\/github.com\/sveltejs\/template\" target=\"_blank\" rel=\"noreferrer noopener\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u044e<\/a> \u0432 \u0449\u043e\u0439\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0443 \u0442\u0435\u043a\u0443 <code>firstapp<\/code>.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0439\u0442\u0435\u0441\u044f, \u0449\u043e \u043d\u0430 \u043a\u043e\u043c\u043f&#8217;\u044e\u0442\u0435\u0440\u0456 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 <a href=\"https:\/\/git-scm.com\/download\" target=\"_blank\" rel=\"noreferrer noopener\">git<\/a>, \u0430 \u0442\u0430\u043a\u043e\u0436 \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0430 PATH-\u0437\u043c\u0456\u043d\u043d\u0430. \u0406\u043d\u0430\u043a\u0448\u0435 <code>degit<\/code>\n \u043d\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438\u043c\u0435. \u042f\u043a\u0449\u043e \u0436 \u043f\u0456\u0441\u043b\u044f \u0432\u0441\u0456\u0445 \u043a\u0440\u043e\u043a\u0456\u0432 \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435 \u0449\u0435 \u043d\u0435 \u043f\u0440\u0430\u0446\u044e\u0454 \u043f\u0440\u043e\u0454\u043a\u0442,\n \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043b\u043e\u043d\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u044e, \u0430 \u043f\u043e\u0442\u0456\u043c \u0432\u0438\u0434\u0430\u043b\u0438\u0442\u0438 \u043f\u0440\u0438\u0445\u043e\u0432\u0430\u043d\u0443 \u0442\u0435\u043a\u0443\n <code>.git<\/code>. \u041f\u043e \u0441\u0443\u0442\u0456, \u0446\u0435 \u0442\u0435 \u0436 \u0441\u0430\u043c\u0435, \u0449\u043e \u0440\u043e\u0431\u0438\u0442\u044c <code>degit<\/code> (\u0440\u0456\u0437\u043d\u0438\u0446\u044f \u043b\u0438\u0448\u0435 \u0443 \u0442\u043e\u043c\u0443, \u0449\u043e \u0442\u0435\u043a\u0430 \u043d\u0430\u0437\u0438\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f <code>template<\/code>, \u0430 \u043d\u0435 <code>firstapp<\/code>).<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e \u0442\u0435\u043a\u0438 <code>firstapp<\/code> \u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e <code>npm install<\/code>, \u0449\u043e\u0431 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u0437\u0430\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0456 \u043f\u0440\u043e\u0454\u043a\u0442\u0443. \u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b\u0443, \u0437\u0430\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0456 \u0431\u0443\u043b\u0438 \u0442\u0430\u043a\u0456:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"npm-run-all\"\n\"rollup\"\n\"rollup-plugin-commonjs\"\n\"rollup-plugin-livereload\"\n\"rollup-plugin-node-resolve\"\n\"rollup-plugin-svelte\"\n\"rollup-plugin-terser\"\n\"svelte\"\n<\/code><\/pre>\n\n\n\n<p>\u042f\u043a \u0431\u0430\u0447\u0438\u043c\u043e, \u0446\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u043f\u0430\u043a\u0435\u0442\u0438 Svelte, \u0430 \u0442\u0430\u043a\u043e\u0436 <a href=\"https:\/\/rollupjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Rollup<\/a>(\u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 Webpack) \u0442\u0430 \u0434\u0435\u044f\u043a\u0456 \u0439\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0456\u043d\u0438. <a href=\"https:\/\/www.npmjs.com\/package\/npm-run-all\" target=\"_blank\" rel=\"noreferrer noopener\"><code>npm-run-all<\/code><\/a> \u2014 CLI-\u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u044f\u043a\u0438\u0439 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 npm-\u0441\u043a\u0440\u0438\u043f\u0442\u0456\u0432 \u043f\u0430\u0440\u0430\u043b\u0435\u043b\u044c\u043d\u043e \u0447\u0438 \u043f\u043e\u0441\u043b\u0456\u0434\u043e\u0432\u043d\u043e.<\/p>\n\n\n\n<p>\u041c\u0438 \u0432\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u0456 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0438 \u043d\u0430\u0448 \u043f\u0440\u043e\u0454\u043a\u0442 \u043d\u0430 Svelte \u0432 \u0440\u0435\u0436\u0438\u043c\u0456 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438, \u0432\u0438\u043a\u043e\u043d\u0430\u0432\u0448\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev\n<\/code><\/pre>\n\n\n\n<p>\u0417\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u043d\u0430 localhost \u0437 \u043f\u043e\u0440\u0442\u043e\u043c 5000:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/fyJx799C\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0456\u0434\u043a\u0440\u0438\u0442\u0438 \u0437\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0443 \u0430\u0434\u0440\u0435\u0441\u0443 \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456, \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u00abHello world\u00bb :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/fLk31hRT\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0412\u0456\u0434\u043a\u0440\u0438\u0454\u043c\u043e \u043a\u043e\u0434 \u0432 \u0443\u043b\u044e\u0431\u043b\u0435\u043d\u043e\u043c\u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0456. \u0412 \u0442\u0435\u0446\u0456 <code>src<\/code> \u0454 \u0444\u0430\u0439\u043b <code>main.js<\/code> \u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u043c\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f\u043c\u0438 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/CdyVC91K\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0426\u0435 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443, \u0430 \u0442\u0430\u043a\u043e\u0436 \u0456\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App, \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043e\u0433\u043e \u0443 \u0444\u0430\u0439\u043b\u0456 <code>App.svelte<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nexport let name;\n&lt;\/script>\n\n&lt;style>\nh1 {\ncolor: purple;\n}\n&lt;\/style>\n\n&lt;h1>Hello {name}!&lt;\/h1>\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438-svelte\"><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 Svelte<\/strong><\/h2>\n\n\n\n<p>\u0421\u0443\u0447\u0430\u0441\u043d\u0430 \u0432\u0435\u0431-\u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0430 \u043e\u0440\u0456\u0454\u043d\u0442\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434, Svelte \u0442\u0430\u043a\u043e\u0436.<\/p>\n\n\n\n<p>\u0429\u043e \u0442\u0430\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442? \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u0430 \u0442\u0430 \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0430 \u0447\u0430\u0441\u0442\u0438\u043d\u0430 \n\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443, \u044f\u043a\u0430 \u0437\u0430 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0456\u0441\u0442\u044e \u043f\u043e\u0441\u0438\u043b\u0430\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0456\u043d\u0448\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u0434\u043b\u044f \n\u0444\u043e\u0440\u043c\u0443\u0432\u0430\u043d\u043d\u044f \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443.<\/p>\n\n\n\n<p>\u0406\u043d\u0448\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0446\u0435 \u043e\u043a\u0440\u0435\u043c\u0438\u0439 \u0441\u043a\u043b\u0430\u0434\u043d\u0438\u043a \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0444\u043e\u0440\u043c\u0430, \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0443 \u0430\u0431\u043e \u0436 \u0443\u0432\u0435\u0441\u044c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a.<\/p>\n\n\n\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 Svelte \u043c\u0456\u0441\u0442\u044f\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0435 \u0434\u043b\u044f \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0447\u0430\u0441\u0442\u0438\u043d\u0438 UI. \u041a\u043e\u0436\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0443 \u0444\u0430\u0439\u043b\u0456 \u0437 \u0440\u043e\u0437\u0448\u0438\u0440\u0435\u043d\u043d\u044f\u043c <code>.svelte<\/code>.\n \u0422\u0430\u043c \u0454 \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0430 (HTML), \u043f\u043e\u0432\u0435\u0434\u0456\u043d\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (JavaScript), \u0442\u0430 \u0439\u043e\u0433\u043e \n\u0437\u043e\u0432\u043d\u0456\u0448\u043d\u0456\u0439 \u0432\u0438\u0433\u043b\u044f\u0434 (CSS). \u0406 \u0432\u0441\u0435 \u0446\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0440\u0435\u0431\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u043e\u043a\u0440\u0435\u043c\u0456 \u0444\u0430\u0439\u043b\u0438.<\/p>\n\n\n\n<p>\u0422\u0430\u043a\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434 \u0434\u043e \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u0430\u0446\u0456\u0457 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0441\u0438\u0442\u044c \u0437\u0440\u0443\u0447\u043d\u0438\u0439, \u0430\u0434\u0436\u0435 \u043d\u0435\u043c\u0430\u0454 \u043f\u043e\u0442\u0440\u0435\u0431\u0438 \u0448\u0443\u043a\u0430\u0442\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 \u043f\u043e \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u043e\u0445 \u0444\u0430\u0439\u043b\u0430\u0445.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0443 \u0444\u0430\u0439\u043b\u0456 <code>Dog.svelte<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nexport let name;\n&lt;\/script>\n\n&lt;style>\nh1 {\n  color: purple;\n}\n&lt;\/style>\n\n&lt;h1>The dog name is {name}!&lt;\/h1>\n<\/code><\/pre>\n\n\n\n<p>\u0411\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 JavaScript-\u043a\u043e\u0434 \u043f\u043e\u0432\u0438\u043d\u0435\u043d \u0431\u0443\u0442\u0438 \u043c\u0456\u0436 \u0442\u0435\u0433\u0430\u043c\u0438 <code>script<\/code>:<\/p>\n\n\n\n<p>\u041c\u0456\u0441\u0446\u0435 CSS \u2014 \u043c\u0456\u0436 \u0442\u0435\u0433\u0430\u043c\u0438 <code>style<\/code>. \u0422\u0430\u043a \u0437\u043e\u043d\u043e\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0456 \u0441\u0442\u0438\u043b\u0456\u0432 \u0441\u0442\u0430\u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e\u043c\u0443 \u0432\u043e\u043d\u0438 \u043d\u0435 \u00ab\u0432\u0438\u0442\u0456\u043a\u0430\u044e\u0442\u044c\u00bb \u043d\u0430\u0437\u043e\u0432\u043d\u0456. \u0422\u043e\u0431\u0442\u043e \u044f\u043a\u0449\u043e \u0456\u043d\u0448\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u0456\u0441\u0442\u0438\u0442\u0438\u043c\u0435 \u0442\u0435\u0433 <code>h1<\/code>,\n \u0442\u043e \u0446\u0456 \u0441\u0442\u0438\u043b\u0456 \u043d\u0435 \u0432\u043f\u043b\u0438\u0432\u0430\u0442\u0438\u043c\u0443\u0442\u044c \u043d\u0430 \u043d\u044c\u043e\u0433\u043e. \u0422\u0430\u043a\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434 \u0434\u0443\u0436\u0435 \u043a\u043e\u0440\u0438\u0441\u043d\u0438\u0439 \u0434\u043b\u044f \n\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u044f\u043a\u0456 \u0432\u0438 \u0432\u0436\u0435 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u043b\u0438 \u0434\u043b\u044f \u0456\u043d\u0448\u0438\u0445 \n\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432, \u0430\u0431\u043e \u044f\u043a\u0449\u043e \u0432\u0438 \u0434\u043e\u0434\u0430\u0454\u0442\u0435 open-source \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438.<\/p>\n\n\n\n<h2 id=\"\u0456\u043c\u043f\u043e\u0440\u0442-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432-\u0443-\u0456\u043d\u0448\u0456-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438\"><strong>\u0406\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u0443 \u0456\u043d\u0448\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438<\/strong><\/h2>\n\n\n\n<p>\u042f\u043a \u043c\u0438 \u0432\u0436\u0435 \u0437\u0433\u0430\u0434\u0443\u0432\u0430\u043b\u0438, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u0438\u0439 \u0456\u043d\u0448\u0438\u043c\u0438 \n\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u043f\u0435\u0432\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Dog<\/code> \u0443 \u0441\u0432\u0456\u0439 \u043a\u043e\u0434.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0449\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>House<\/code> \u0440\u043e\u0437\u0442\u0430\u0448\u043e\u0432\u0430\u043d\u0438\u0439 \u0443 \u0444\u0430\u0439\u043b\u0456 <code>House.svelte<\/code>, \u0443 \u0442\u0456\u0439 \u0441\u0430\u043c\u0456\u0439 \u0442\u0435\u0446\u0456, \u0449\u043e \u0439 <code>Dog.svelte<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport Dog from '.\/Dog.svelte'\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Dog \u044f\u043a HTML-\u0442\u0435\u0433:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport Dog from '.\/Dog.svelte'\n&lt;\/script>\n\n&lt;Dog \/>\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0435\u043a\u0441\u043f\u043e\u0440\u0442-\u043f\u0435\u0432\u043d\u0438\u0445-\u0444\u0443\u043d\u043a\u0446\u0456\u0439-\u0437-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\"><strong>\u0415\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u0435\u0432\u043d\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0456\u0439 \u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong><\/h2>\n\n\n\n<p>\u0417 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443 \u0432\u0438\u0449\u0435 \u043c\u0438 \u0431\u0430\u0447\u0438\u043c\u043e, \u0449\u043e \u0434\u043b\u044f \u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435 \u0442\u0440\u0435\u0431\u0430 \u0440\u043e\u0431\u0438\u0442\u0438 \u0437\u0430\u0439\u0432\u0438\u0445 \u043a\u0440\u043e\u043a\u0456\u0432. \u0421\u0430\u043c \u043f\u043e \u0441\u043e\u0431\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0436\u0435 <em>\u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u0454\u0442\u044c\u0441\u044f \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c<\/em>.<\/p>\n\n\n\n<p>\u042f\u043a \u0449\u043e\u0434\u043e \u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443 \u0447\u043e\u0433\u043e\u0441\u044c \u043e\u043a\u0440\u0456\u043c \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0438 \u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430?<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u0430 \u0434\u043e\u0434\u0430\u0442\u0438 \u0434\u043e \u0442\u0435\u0433\u0443 <code>script<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>context=\"module\"<\/code>.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u0438\u043a\u043b\u0430\u0434. \u041f\u0440\u0438\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0443 \u0432\u0430\u0441 \u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Button \u0443 \u0444\u0430\u0439\u043b\u0456 <code>Button.svelte<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button>A button&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u0445\u043e\u0447\u0435\u0442\u0435, \u0449\u043e\u0431 \u0456\u043d\u0448\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u043c\u043e\u0433\u043b\u0438 \u0432\u043f\u043b\u0438\u0432\u0430\u0442\u0438 \u043d\u0430 \u043a\u043e\u043b\u0456\u0440 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n\n\n\n<p>\u041d\u0430\u0439\u043a\u0440\u0430\u0449\u0435 \u0440\u0456\u0448\u0435\u043d\u043d\u044f \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u2014 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 <code>props<\/code> (\u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u0432 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u043c\u0443 \u0440\u043e\u0437\u0434\u0456\u043b\u0456).<\/p>\n\n\n\n<p>\u0421\u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e <code>changeColor<\/code>. \u0414\u043e\u0434\u0430\u043c\u043e \u0457\u0439 \u043f\u0435\u0432\u043d\u0443 \u043b\u043e\u0433\u0456\u043a\u0443 \u0442\u0430 \u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u0454\u043c\u043e \u0443 \u0442\u0435\u0433\u0443 <code>script<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script context=\"module\">\nexport function changeColor() {\n  \/\/...\u043b\u043e\u0433\u0456\u043a\u0430 \u0437\u043c\u0456\u043d\u0438 \u043a\u043e\u043b\u044c\u043e\u0440\u0443..\n}\n&lt;\/script>\n\n&lt;button>A button&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443, \u0449\u043e \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u0430\u0442\u0438 \u0442\u0430\u043a\u043e\u0436 \u00ab\u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0438\u0439\u00bb \u0442\u0435\u0433 <code>script<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0456\u043d\u0448\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u043c\u043e\u0436\u0443\u0442\u044c \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u044f\u043a Button, \u0442\u0430\u043a \u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u044e <code>changeColor<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport Button, { changeColor } from '.\/Button.svelte'\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u043e\u0431\u0440\u043e\u0431\u043a\u0430-\u0441\u0442\u0430\u043d\u0443-\u0443-svelte\"><strong>\u041e\u0431\u0440\u043e\u0431\u043a\u0430 \u0441\u0442\u0430\u043d\u0443 \u0443 Svelte<\/strong><\/h2>\n\n\n\n<p>\u041a\u043e\u0436\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u043e\u043a\u0440\u0456\u043c \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0438, CSS \u0442\u0430 \u043b\u043e\u0433\u0456\u043a\u0438 JavaScript) \u043c\u043e\u0436\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 <em>\u0441\u0442\u0430\u043d<\/em>.<\/p>\n\n\n\n<p>\u0429\u043e \u0442\u0430\u043a\u0435 \u0441\u0442\u0430\u043d? \u0421\u0442\u0430\u043d \u2014 \u0434\u0430\u043d\u0456, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0456 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \n\u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a\u0449\u043e \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0443 \u0444\u043e\u0440\u043c\u0438 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u0440\u044f\u0434\u043e\u043a \u00abtest\u00bb, \u0442\u043e \u0434\u0435\u0441\u044c \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0430\n \u0437\u043c\u0456\u043d\u043d\u0430, \u044f\u043a\u0430 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u0446\u0435\u0439 \u0441\u0442\u0430\u043d. \u0427\u0435\u043a\u0431\u043e\u043a\u0441 \u0447\u0438 \u0440\u0430\u0434\u0456\u043e\u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u0438\u0431\u0440\u0430\u043d\u0456? \u041f\u043e\u0442\u0440\u0456\u0431\u043d\u0430\n \u0437\u043c\u0456\u043d\u043d\u0430, \u0449\u043e\u0431 \u0437\u0430\u0444\u0456\u043a\u0441\u0443\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0444\u0430\u043a\u0442.<\/p>\n\n\n\n<p>\u0421\u0442\u0430\u043d \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454\u0442\u044c\u0441\u044f \u0432 \u0447\u0430\u0441\u0442\u0438\u043d\u0456 <code>script<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet count = 0\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0443 \u0432\u0430\u0441 \u0431\u0443\u0432 \u0434\u043e\u0441\u0432\u0456\u0434 \u0437 Vue \u0447\u0438 React, \u0442\u043e \u0432\u0430\u043c, \u043c\u0430\u0431\u0443\u0442\u044c, \u0446\u0456\u043a\u0430\u0432\u043e, \u044f\u043a \n\u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0446\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f. Svelte \u0437\u0440\u0443\u0447\u043d\u0438\u0439 \u0442\u0438\u043c, \u0449\u043e \u0432\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0430 \u0440\u043e\u0431\u0438\u0442\u0438 \u0437\u0430\u0439\u0432\u0438\u0445 \n\u0434\u0456\u0439, \u0430\u0431\u0438 \u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0441\u0442\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u0412\u0441\u0435 \u0449\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u2014 \u043f\u0440\u0438\u0441\u0432\u043e\u0457\u0442\u0438 \u0446\u0435\u0439 \u0441\u0442\u0430\u043d \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 <code>=<\/code>. \u041f\u0440\u0438\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0454 \u0437\u043c\u0456\u043d\u043d\u0430 <code>count<\/code>. \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0431\u0456\u043b\u044c\u0448\u0438\u0442\u0438 \u0457\u0457 \u0432\u0438\u0440\u0430\u0437\u043e\u043c <code>count = count + 1<\/code> \u0430\u0431\u043e <code>count++<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet count = 0\n\nconst incrementCount = () => {\n  count++\n}\n&lt;\/script>\n\n{count} &lt;button on:click={incrementCount}>+1&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0410 \u0432 React, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0432\u0430\u043c \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044f \u0431 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438 <code>this.setState()<\/code> \u0430\u0431\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0445\u0443\u043a <code>useState()<\/code>.<\/p>\n\n\n\n<p>\u0423 Vue \u0431\u0456\u043b\u044c\u0448 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434 \u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c \u043a\u043b\u0430\u0441\u0456\u0432 \u0442\u0430 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 <code>data<\/code>.<\/p>\n\n\n\n<p>\u0423 \u043f\u043e\u0440\u0456\u0432\u043d\u044f\u043d\u043d\u0456 \u0437 \u0456\u043d\u0448\u0438\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, Svelte \u0431\u0456\u043b\u044c\u0448\u0435 \u043d\u0430\u0433\u0430\u0434\u0443\u0454 \nJavaScript-\u0441\u0442\u0438\u043b\u044c. \u0412\u0430\u0440\u0442\u043e \u043f\u0430\u043c&#8217;\u044f\u0442\u0430\u0442\u0438 \u043f\u0440\u043e \u043e\u0434\u043d\u0443 \u0440\u0456\u0447: \u043c\u0438 \u043f\u043e\u0432\u0438\u043d\u043d\u0456 \u0442\u0430\u043a\u043e\u0436 \u0437\u0440\u043e\u0431\u0438\u0442\u0438\n \u043f\u0440\u0438\u0441\u0432\u043e\u0454\u043d\u043d\u044f \u043f\u0440\u0438 \u0437\u043c\u0456\u043d\u0456 \u0437\u043c\u0456\u043d\u043d\u043e\u0457. \u0412 \u0456\u043d\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 Svelte \u043d\u0435 \u0440\u043e\u0437\u043f\u0456\u0437\u043d\u0430\u0454, \u0449\u043e \n\u0441\u0442\u0430\u043d \u0437\u043c\u0456\u043d\u0438\u0432\u0441\u044f.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u044c \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a \u0440\u044f\u0434\u043a\u0456\u0432 \u0447\u0438 \u0447\u0438\u0441\u0435\u043b \u0432\u0441\u0435 \u0432\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u043e, \u0430\u0434\u0436\u0435 \n\u0432\u0441\u0456 \u043c\u0435\u0442\u043e\u0434\u0438 \u0440\u044f\u0434\u043a\u0456\u0432 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u044e\u0442\u044c \u043d\u043e\u0432\u0456 \u0440\u044f\u0434\u043a\u0438, \u0456 \u0442\u0435 \u0436 \u0441\u0430\u043c\u0435 \u0434\u043b\u044f \u0447\u0438\u0441\u0435\u043b, \u0442\u043e\u0431\u0442\u043e \n\u0432\u043e\u043d\u0438 \u043d\u0435\u0437\u043c\u0456\u043d\u043d\u0456.<\/p>\n\n\n\n<p>\u042f\u043a \u043d\u0430 \u0440\u0430\u0445\u0443\u043d\u043e\u043a \u043c\u0430\u0441\u0438\u0432\u0456\u0432? \u041c\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u0438, \u044f\u043a\u0456 \u0437\u043c\u0456\u043d\u044e\u044e\u0442\u044c \u043c\u0430\u0441\u0438\u0432 (\u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a <code>push()<\/code>, <code>pop()<\/code>, <code>shift()<\/code>, <code>splice()<\/code>), \u0442\u043e\u043c\u0443 \u0449\u043e \u0432\u043e\u043d\u0438 \u043d\u0435 \u043f\u0440\u0438\u0441\u0432\u043e\u044e\u044e\u0442\u044c \u043d\u043e\u0432\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u0430 \u0437\u043c\u0456\u043d\u044e\u044e\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u0438\u0445, \u043e\u0434\u043d\u0430\u043a Svelte \u043d\u0435 \u043c\u043e\u0436\u0435 \u0446\u0435 \u0440\u043e\u0437\u043f\u0456\u0437\u043d\u0430\u0442\u0438.<\/p>\n\n\n\n<p>\u0422\u043e\u0436 \u0443\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432\u0438 <em>\u043c\u043e\u0436\u0435\u0442\u0435<\/em> \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0446\u0456 \u043c\u0435\u0442\u043e\u0434\u0438, \u043e\u0434\u043d\u0430\u043a \u043f\u043e\u0442\u0456\u043c \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u043f\u0435\u0440\u0435\u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0437\u043c\u0456\u043d\u043d\u0443 \u0432 \u0442\u0430\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u0456\u0431:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let list = [1, 2, 3]\nlist.push(4)\nlist = list\n<\/code><\/pre>\n\n\n\n<p>\u0417\u0434\u0430\u0454\u0442\u044c\u0441\u044f, \u0449\u043e \u0432\u0441\u0435 \u043d\u0435 \u0434\u0443\u0436\u0435 \u0456\u043d\u0442\u0443\u0457\u0442\u0438\u0432\u043d\u043e, \u043e\u0434\u043d\u0430\u043a \u0434\u043e \u0446\u044c\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u0430 \u0448\u0432\u0438\u0434\u043a\u043e \u0437\u0432\u0438\u043a\u043d\u0443\u0442\u0438.<\/p>\n\n\n\n<p>\u0406\u043d\u0448\u0438\u0439 \u0432\u0430\u0440\u0456\u0430\u043d\u0442 \u2014 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 spread:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let list = [1, 2, 3]\nlist = [...list, 4]\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c-svelte\"><strong>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c Svelte<\/strong><\/h2>\n\n\n\n<p>\u0423 Svelte \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0443\u0432\u0430\u0442\u0438 \u0437\u043c\u0456\u043d\u0438 \u0441\u0442\u0430\u043d\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0430 \u043e\u043d\u043e\u0432\u043b\u044e\u0432\u0430\u0442\u0438 \u0456\u043d\u0448\u0456 \u0437\u043c\u0456\u043d\u043d\u0456.<\/p>\n\n\n\n<p>\u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a\u0449\u043e \u0443 \u0432\u0430\u0441 \u0454 \u0437\u043c\u0456\u043d\u043d\u0430 <code>count<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet count = 0\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0456 \u0432\u0438 \u043e\u043d\u043e\u0432\u043b\u044e\u0454\u0442\u0435 \u0457\u0457 \u043f\u0440\u0438 \u043a\u043b\u0456\u043a\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet count = 0\n\nconst incrementCount = () => {\n  count = count + 1\n}\n&lt;\/script>\n\n{count} &lt;button on:click={incrementCount}>+1&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0443\u0432\u0430\u0442\u0438 \u0437\u043c\u0456\u043d\u0438 <code>count<\/code>, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u044c\u043d\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <code>$:<\/code>. \u0422\u0430\u043a \u0432\u0438 \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454\u0442\u0435 \u043d\u043e\u0432\u0438\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0443, \u044f\u043a\u0438\u0439 Svelte \u0432\u0438\u043a\u043e\u043d\u0430\u0454 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u044f\u043a\u0449\u043e \u0431\u0443\u0434\u044c-\u044f\u043a\u0430 \u0437\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0432 \u043d\u044c\u043e\u043c\u0443 \u0437\u043c\u0456\u043d\u043d\u0430 \u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0443\u0454\u0442\u044c\u0441\u044f:<\/p>\n\n\n\n<p>\u041f\u043e\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043d\u0430 \u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet count = 0\n\nconst incrementCount = () => {\n  count = count + 1\n}\n\n$: console.log(`${count}`)\n&lt;\/script>\n\n{count} &lt;button on:click={incrementCount}>+1&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u041c\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043b\u0438 \u0431\u043b\u043e\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$: console.log(`${count}`)\n<\/code><\/pre>\n\n\n\n<p>\u041c\u043e\u0436\u0435\u043c\u043e \u043d\u0435 \u043e\u0431\u043c\u0435\u0436\u0443\u0432\u0430\u0442\u0438\u0441\u044c \u043e\u0434\u043d\u0438\u043c \u0431\u043b\u043e\u043a\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n$: console.log(`the count is ${count}`)\n$: console.log(`double the count is ${count * 2}`)\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0410 \u0442\u0430\u043a\u043e\u0436 \u0437\u0433\u0440\u0443\u043f\u0443\u0432\u0430\u0442\u0438 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u0432\u0438\u0440\u0430\u0437\u0456\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 \u0431\u043b\u043e\u0446\u0456:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n$: {\n  console.log(`the count is ${count}`)\n  console.log(`double the count is ${count * 2}`)\n}\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443 \u043c\u0438 \u0432\u0437\u044f\u043b\u0438 \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0438\u0439 \u0432\u0438\u043a\u043b\u0438\u043a <code>console.log()<\/code>, \u043e\u0434\u043d\u0430\u043a \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0442\u0430\u043a\u043e\u0436 \u0456\u043d\u0448\u0456 \u0437\u043c\u0456\u043d\u043d\u0456:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet count = 0\nlet double = 0\n\n$: {\n  console.log(`the count is ${count}`)\n  double = count * 2\n  console.log(`double the count is ${double}`)\n}\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<h2 id=\"props-\u0443-svelte\"><strong>Props \u0443 Svelte<\/strong><\/h2>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Svelte \u0432 \u0456\u043d\u0448\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <code>import ComponentName from 'componentPath'<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport SignupForm from '.\/SignupForm.svelte';\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0428\u043b\u044f\u0445 \u0432\u0456\u0434\u043d\u043e\u0441\u043d\u0438\u0439 \u0449\u043e\u0434\u043e \u043f\u043e\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0421\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044f <code>.\/<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0454  \u00ab\u043f\u043e\u0442\u043e\u0447\u043d\u0430 \u0442\u0435\u043a\u0430\u00bb. \u042f\u043a\u0449\u043e \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u043f\u0456\u0434\u043d\u044f\u0442\u0438\u0441\u044c \u043d\u0430 \u043e\u0434\u043d\u0443 \u0442\u0435\u043a\u0443 \u0432\u0438\u0449\u0435 \u2014 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0439\u0442\u0435 \u0442\u0430\u043a\u0435 \u043f\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f: <code>..\/<\/code>.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0449\u043e\u0439\u043d\u043e \u0456\u043c\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0440\u043e\u0437\u043c\u0456\u0442\u0446\u0456 \u044f\u043a HTML-\u0442\u0435\u0433:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SignupForm \/>\n<\/code><\/pre>\n\n\n\n<p>\u041c\u0456\u0436 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0444\u043e\u0440\u043c\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434\u043d\u043e\u0448\u0435\u043d\u043d\u044f \u00ab\u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u0438\u0439-\u0434\u043e\u0447\u0456\u0440\u043d\u0456\u0439\u00bb: \u043e\u0434\u0438\u043d \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0454, \u0456\u043d\u0448\u0438\u0439 \u0456\u043c\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043d\u0438\u0439.<\/p>\n\n\n\n<p>\u0427\u0430\u0441\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e, \u0449\u043e\u0431 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0432 \u0434\u0430\u043d\u0456 \u0434\u043e\u0447\u0456\u0440\u043d\u044c\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 <em>props<\/em>. \u0426\u0435 \u0449\u043e\u0441\u044c \u043f\u043e\u0434\u0456\u0431\u043d\u0435 \u0434\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0456\u0432 \u0432 \u0447\u0438\u0441\u0442\u043e\u043c\u0443 HTML \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u044f\u043c\u043d\u043e\u0457 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0457 \u043c\u0456\u0436 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n\n\n\n<p>\u0412 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0456 \u043c\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u043c\u043e prop <code>disabled<\/code>, \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0432\u0448\u0438 \u0434\u043b\u044f \u043d\u044c\u043e\u0433\u043e \u0431\u0443\u043b\u0435\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f <code>true<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;SignupForm disabled={true}\/>\n<\/code><\/pre>\n\n\n\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 <code>SignupForm<\/code> \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e <em>\u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438<\/em> prop \u0432 \u0442\u0430\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u0456\u0431:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  export let disabled\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0430\u043a \u043c\u0438 \u0432\u043a\u0430\u0437\u0443\u0454\u043c\u043e, \u0449\u043e prop \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0437\u043c\u0456\u043d\u043d\u0443 \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f,  \u0430 \u0442\u043e\u0434\u0456 \u0437\u043c\u0456\u043d\u044e\u0432\u0430\u0442\u0438 \u0457\u0457 \u0434\u0438\u043d\u0430\u043c\u0456\u0447\u043d\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport SignupForm from '.\/SignupForm.svelte';\nlet disabled = true\n&lt;\/script>\n\n&lt;SignupForm disabled={disabled}\/>\n<\/code><\/pre>\n\n\n\n<p>\u041a\u043e\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f <code>disabled<\/code> \u0437\u043c\u0456\u043d\u044e\u0454\u0442\u044c\u0441\u044f, \u0434\u043e\u0447\u0456\u0440\u043d\u0456\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport SignupForm from '.\/SignupForm.svelte';\nlet disabled = true\nsetTimeout(() => { disabled = false }, 2000)\n&lt;\/script>\n\n&lt;SignupForm disabled={disabled}\/>\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0443\u043f\u0440\u0430\u0432\u043b\u0456\u043d\u043d\u044f-\u0441\u0442\u0430\u043d\u043e\u043c-\u043c\u0456\u0436-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438-\u0443-svelte\"><strong>\u0423\u043f\u0440\u0430\u0432\u043b\u0456\u043d\u043d\u044f \u0441\u0442\u0430\u043d\u043e\u043c \u043c\u0456\u0436 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0443 Svelte<\/strong><\/h2>\n\n\n\n<p>\u041c\u0438 \u0432\u0436\u0435 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0443\u043b\u0438, \u044f\u043a \u043b\u0435\u0433\u043a\u043e Svelte \u043e\u0431\u0440\u043e\u043b\u044f\u0454 \u0441\u0442\u0430\u043d \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0410 \u044f\u043a \u0449\u043e\u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0456 \u0441\u0442\u0430\u043d\u0443 \u043c\u0456\u0436 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u043e\u043c\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438?<\/p>\n\n\n\n<h4><strong>\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043d\u044f \u0441\u0442\u0430\u043d\u0443 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e props<\/strong><\/h4>\n\n\n\n<p>\u0426\u0435 \u0434\u043e\u0441\u0438\u0442\u044c \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0430 \u0440\u0456\u0447 \u0441\u0435\u0440\u0435\u0434 \u0456\u043d\u0448\u0438\u0445 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0456\u0432. \u041e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u2014 <em>\u0432\u0438\u043d\u043e\u0441\u0438\u0442\u0438 \u0441\u0442\u0430\u043d \u043d\u0430\u0432\u0435\u0440\u0445<\/em>.\n \u041a\u043e\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0442\u0440\u0435\u0431\u0430 \u043f\u043e\u0434\u0456\u043b\u0438\u0442\u0438\u0441\u044f \u0434\u0430\u043d\u0438\u043c\u0438 \u0437 \u0456\u043d\u0448\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0441\u0442\u0430\u043d \n\u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043d\u0435\u0441\u0442\u0438 \u0434\u043e \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0434\u043e\u0447\u0456\u0440\u043d\u0456\u0445 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u0421\u0442\u0430\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e\u043c \u0432\u043d\u0438\u0437, \u043f\u043e\u043a\u0438 \u043d\u0435 \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0442\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438, \u044f\u043a\u0456 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u044c \u0446\u0456\u0454\u0457 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457.<\/p>\n\n\n\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u0440\u0430\u0446\u044e\u0454 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e <em>props<\/em>, \u0456 \u043d\u0430\u0439\u0431\u0456\u043b\u044c\u0448\u0430 \u043f\u0435\u0440\u0435\u0432\u0430\u0433\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0456\u0434\u0445\u043e\u0434\u0443 \u2014 \u0439\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430.<\/p>\n\n\n\n<h4><strong>Context API<\/strong><\/h4>\n\n\n\n<p>\u041e\u0434\u043d\u0430\u043a \u0447\u0430\u0441\u043e\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0456\u043d\u0448\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a\u0449\u043e \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \n\u0440\u043e\u0437\u0442\u0430\u0448\u043e\u0432\u0430\u043d\u0456 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u043a\u043e, \u0449\u043e \u043d\u0430\u043c \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0431\u0438 \u0432\u0438\u043d\u043e\u0441\u0438\u0442\u0438 \u0441\u0442\u0430\u043d \u0443 \u043d\u0430\u0439\u0432\u0438\u0449\u0438\u0439 \n\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0456\u0454\u0440\u0430\u0440\u0445\u0456\u0457.<\/p>\n\n\n\n<p>\u0412 \u0442\u0430\u043a\u0438\u0445 \u0432\u0438\u043f\u0430\u0434\u043a\u0430\u0445 \u043c\u043e\u0436\u043d\u0430 \u0441\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438\u0441\u044f \u0456\u043d\u0448\u043e\u044e \u0442\u0435\u0445\u043d\u0456\u043a\u043e\u044e \u2014 <em>context API<\/em>.\n \u0426\u0435 \u0456\u0434\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434, \u043a\u043e\u043b\u0438 \u0442\u0440\u0435\u0431\u0430, \u0449\u043e\u0431 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u043e\u0431\u043c\u0456\u043d\u044e\u0432\u0430\u043b\u0438\u0441\u044c \n\u0434\u0430\u043d\u0438\u043c\u0438 \u0437 \u0434\u043e\u0447\u0456\u0440\u043d\u0456\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0430\u043b\u0435 \u0431\u0435\u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f props.<\/p>\n\n\n\n<p>Context API \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0443\u0454\u0442\u044c\u0441\u044f \u0434\u0432\u043e\u043c\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u044f\u043c\u0438 \u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <code>svelte<\/code>: <code>getContext<\/code> \u0442\u0430 <code>setContext<\/code>:<\/p>\n\n\n\n<p>\u0412\u0438 \u0456\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0443\u0454\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0435\u0432\u043d\u0438\u043c \u043e\u0431&#8217;\u0454\u043a\u0442\u043e\u043c, \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0432\u0448\u0438 \u0434\u043b\u044f \u043d\u044c\u043e\u0433\u043e \u043a\u043b\u044e\u0447:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport { setContext } from 'svelte'\n\nconst someObject = {}\n\nsetContext('someKey', someObject)\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0412 \u0456\u043d\u0448\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438 <code>getContext<\/code>, \u0449\u043e\u0431 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u043e\u0431&#8217;\u0454\u043a\u0442 \u0437\u0430 \u043a\u043b\u044e\u0447\u0435\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport { getContext } from 'svelte'\n\nconst someObject = getContext('someKey')\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 <code>getContext<\/code> \u043b\u0438\u0448\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0449\u043e\u0431 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u043a\u043b\u044e\u0447 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456, \u044f\u043a\u0438\u0439 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0454 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0437 <code>setContext<\/code> \u0430\u0431\u043e \u0432 \u0439\u043e\u0433\u043e \u043d\u0430\u0449\u0430\u0434\u043a\u0430\u0445.<\/p>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u0437 \u0440\u0456\u0437\u043d\u0438\u0445 \u0434\u0435\u0440\u0435\u0432 \u0456 \u0432\u0438 \u0445\u043e\u0447\u0435\u0442\u0435, \u0449\u043e\u0431 \u0432\u043e\u043d\u0438 \u043e\u0431\u043c\u0456\u043d\u044e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u0430\u043d\u0438\u043c\u0438, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0439\u0442\u0435 <em>\u0441\u0445\u043e\u0432\u0438\u0449\u0430<\/em>.<\/p>\n\n\n\n<h2 id=\"\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f-\u0441\u0445\u043e\u0432\u0438\u0449-stores-svelte\"><strong>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u0441\u0445\u043e\u0432\u0438\u0449 (stores) Svelte<\/strong><\/h2>\n\n\n\n<p>\u0421\u0445\u043e\u0432\u0438\u0449\u0430 Svelte \u2014 \u0447\u0443\u0434\u043e\u0432\u0438\u0439 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0431\u0440\u043e\u0431\u043a\u0438 \u0441\u0442\u0430\u043d\u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443, \u043a\u043e\u043b\u0438 \u043d\u0435 \u0431\u0430\u0436\u0430\u043d\u043e, \u0449\u043e\u0431 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u0447\u0430\u0441\u0442\u043e \u043e\u0431\u043c\u0456\u043d\u044e\u0432\u0430\u043b\u0438\u0441\u044c props.<\/p>\n\n\n\n<p>\u0421\u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 <code>writable<\/code> \u0437 <code>svelte\/store<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { writable } from 'svelte\/store'\n<\/code><\/pre>\n\n\n\n<p>\u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0437\u043c\u0456\u043d\u043d\u0443 \u0441\u0445\u043e\u0432\u0438\u0449\u0430 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0456\u0457 <code>writable()<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0448\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u044f\u043a \u043f\u0435\u0440\u0448\u0438\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const username = writable('Guest')\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043d\u0435\u0441\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u043d\u0443 \u043a\u043e\u0434\u0443 \u0437\u0456 \u0441\u0445\u043e\u0432\u0438\u0449\u0435\u043c \u0432 \u043e\u043a\u0440\u0435\u043c\u0438\u0439 \u0444\u0430\u0439\u043b (\u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434 <code>store.js<\/code>, <code>.js<\/code>, \u0442\u043e\u043c\u0443 \u0449\u043e \u0446\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Svelte) \u0442\u0430 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0432 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { writable } from 'svelte\/store'\nexport const username = writable('Guest')\n<\/code><\/pre>\n\n\n\n<p>\u0411\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u0456\u043d\u0448\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u044f\u043a\u0438\u0439 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u044c \u0446\u0435\u0439 \u0444\u0430\u0439\u043b \u0442\u0435\u043f\u0435\u0440 \u0437\u043c\u043e\u0436\u0435 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0456 \u0441\u0445\u043e\u0432\u0438\u0449\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport { username } from '.\/store.js'\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0456\u043c\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043d\u043e\u0457 \u0437\u043c\u0456\u043d\u043d\u043e\u0457 \u043c\u043e\u0436\u043d\u0430 \u0437\u043c\u0456\u043d\u0438\u0442\u0438 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e <code>set()<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>username.set('new username')\n<\/code><\/pre>\n\n\n\n<p>\u0410 \u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0456\u0457 <code>update()<\/code>. \u0412\u043e\u043d\u0430 \u0432\u0456\u0434\u0440\u0456\u0437\u043d\u044f\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434 <code>set()<\/code> \u0442\u0438\u043c, \u0449\u043e \u0432\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u043e\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u0430 \u043a\u043e\u043b\u0431\u0435\u043a-\u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0437 \u043f\u043e\u0442\u043e\u0447\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f\u043c \u044f\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const newUsername = 'new username!'\nusername.update(existing => newUsername)\n<\/code><\/pre>\n\n\n\n<p>\u041c\u043e\u0436\u0435\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u0431\u0456\u043b\u044c\u0448\u0435 \u043b\u043e\u0433\u0456\u043a\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>username.update(existing => {\n  console.log(`Updating username from ${existing} to ${newUsername}`)\n  return newUsername\n})\n<\/code><\/pre>\n\n\n\n<p>\u0429\u043e\u0431 <em>\u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u043e<\/em> \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0456 \u0441\u0445\u043e\u0432\u0438\u0449\u0430, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e <code>get()<\/code> \u0437 <code>svelte\/store<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { writable, get } from 'svelte\/store'\nexport const username = writable('Guest')\nget(username) \/\/'Guest'\n<\/code><\/pre>\n\n\n\n<p>\u0429\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443 \u0437\u043c\u0456\u043d\u043d\u0443, \u044f\u043a\u0430 \u043e\u043d\u043e\u0432\u043b\u044e\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0430\u0446\u0456\u0457 \n\u0437\u043c\u0456\u043d\u043d\u043e\u0457 \u0441\u0445\u043e\u0432\u0438\u0449\u0430, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0434\u0430\u0442\u0438 \u043d\u0430 \u043f\u043e\u0447\u0430\u0442\u043e\u043a \u043d\u0430\u0437\u0432\u0438 \u0437\u043c\u0456\u043d\u043d\u043e\u0457 \u0441\u0438\u043c\u0432\u043e\u043b <code>$<\/code> (\u0432 \u043d\u0430\u0448\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0456 \u0446\u0435 <code>$username<\/code>). \u0412\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0438\u0441\u044c \u043f\u0440\u0438 \u0437\u043c\u0456\u043d\u0430\u0445 \u0443 \u0441\u0445\u043e\u0432\u0438\u0449\u0456.<\/p>\n\n\n\n<p><em>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443: Svelte \u0440\u043e\u0437\u0433\u043b\u044f\u0434\u0430\u0454 \u0441\u0438\u043c\u0432\u043e\u043b <code>$<\/code> \u044f\u043a \n\u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u043e\u0432\u0430\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u0442\u0430 \u043d\u0435 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0434\u043b\u044f \n\u0437\u043c\u0456\u043d\u043d\u0438\u0445, \u0449\u043e \u043d\u0435 \u0441\u0442\u043e\u0441\u0443\u044e\u0442\u044c\u0441\u044f \u0441\u0445\u043e\u0432\u0438\u0449\u0430 (\u0430 \u0446\u0435 \u043c\u043e\u0436\u0435 \u0437\u0431\u0438\u0432\u0430\u0442\u0438 \u0437 \u043f\u0430\u043d\u0442\u0435\u043b\u0438\u043a\u0443). \u0422\u043e\u0436 \n\u044f\u043a\u0449\u043e \u0432\u0438 \u0437\u0432\u0438\u043a\u043b\u0438 \u043d\u0430\u0437\u0438\u0432\u0430\u0442\u0438 \u0437\u043c\u0456\u043d\u043d\u0456, \u0449\u043e \u043f\u043e\u0441\u0438\u043b\u0430\u044e\u0442\u044c\u0441\u044f \u043d\u0430 DOM \u0437 <code>$<\/code>, \u043d\u0435 \u0440\u043e\u0431\u0456\u0442\u044c \u0446\u044c\u043e\u0433\u043e \u0443 Svelte.<\/em><\/p>\n\n\n\n<p>\u0406\u0441\u043d\u0443\u0454 \u0439 \u0456\u043d\u0448\u0438\u0439 \u0432\u0430\u0440\u0456\u0430\u043d\u0442, \u044f\u043a\u0449\u043e \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u0432\u0438\u043a\u043e\u043d\u0430\u0442\u0438 \u043f\u0435\u0432\u043d\u0443 \u043b\u043e\u0433\u0456\u043a\u0443 \u043f\u0440\u0438 \u0437\u043c\u0456\u043d\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u043c\u0456\u043d\u043d\u043e\u0457 \u2014 \u043c\u0435\u0442\u043e\u0434 <code>subscribe()<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>username.subscribe(newValue => {\n  console.log(newValue)\n})\n<\/code><\/pre>\n\n\n\n<p>\u041e\u043a\u0440\u0456\u043c \u0441\u0445\u043e\u0432\u0438\u0449 \u0437\u0456 \u0437\u043c\u0456\u043d\u044e\u0432\u0430\u043d\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438, Svelte \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454 \u0442\u0430\u043a\u043e\u0436 \u0434\u0432\u0430 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0438\u0445 \u0432\u0438\u0434\u0438 \u0441\u0445\u043e\u0432\u0438\u0449: <em>\u0441\u0445\u043e\u0432\u0438\u0449\u0430 \u0447\u0438\u0442\u0430\u043d\u043d\u044f<\/em> \u0442\u0430 <em>\u0441\u0445\u043e\u0432\u0438\u0449\u0430 \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0432\u0430\u043d\u043d\u044f<\/em>.<\/p>\n\n\n\n<h4><strong>\u0421\u0445\u043e\u0432\u0438\u0449\u0430 \u0447\u0438\u0442\u0430\u043d\u043d\u044f \u0443 Svelte<\/strong><\/h4>\n\n\n\n<p>\u0421\u0445\u043e\u0432\u0438\u0449\u0435 \u0447\u0438\u0442\u0430\u043d\u043d\u044f \u0432\u0456\u0434\u0440\u0456\u0437\u043d\u044f\u0454\u0442\u044c\u0441\u044f \u0442\u0438\u043c, \u0449\u043e \u0439\u043e\u0433\u043e \u043d\u0435 \u043c\u043e\u0436\u043d\u0430 \u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0437\u043e\u0432\u043d\u0456 \u2014 \u0442\u0430\u043c \u043d\u0435\u043c\u0430\u0454 \u043c\u0435\u0442\u043e\u0434\u0456\u0432 <code>set()<\/code> \u0442\u0430 <code>update()<\/code>. \u041f\u0456\u0441\u043b\u044f \u0442\u043e\u0433\u043e \u044f\u043a \u0432\u0438 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u043b\u0438 \u043f\u043e\u0447\u0430\u0442\u043a\u043e\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u0437\u043c\u0456\u043d\u0438\u0442\u0438 \u0439\u043e\u0433\u043e \u0432\u0436\u0435 \u043d\u0435 \u043c\u043e\u0436\u043d\u0430.<\/p>\n\n\n\n<p>\u041e\u0444\u0456\u0446\u0456\u0439\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u044f Svelte \u043f\u043e\u043a\u0430\u0437\u0443\u0454 \u0446\u0456\u043a\u0430\u0432\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0442\u0430\u0439\u043c\u0435\u0440\u0430. \u041e\u043a\u0440\u0456\u043c \n\u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u0442\u0430\u0439\u043c\u0435\u0440\u0430, \u043c\u043e\u0436\u043d\u0430 \u0442\u0430\u043a\u043e\u0436 \u043e\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u043f\u0435\u0432\u043d\u0456 \u0440\u0435\u0441\u0443\u0440\u0441\u0438 \u0437 \u043c\u0435\u0440\u0435\u0436\u0456, \n\u0440\u043e\u0431\u0438\u0442\u0438 \u0432\u0438\u043a\u043b\u0438\u043a\u0438 API, \u043e\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u0434\u0430\u043d\u0456 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0457 \u0441\u0438\u0441\u0442\u0435\u043c\u0438 (\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \n\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0438\u0439 Node.js \u0441\u0435\u0440\u0432\u0435\u0440) \u0442\u043e\u0449\u043e.<\/p>\n\n\n\n<p>\u0412 \u043d\u0430\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u043c\u0438 \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u0456\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u0437\u043c\u0456\u043d\u043d\u043e\u0457 \u0441\u0445\u043e\u0432\u0438\u0449\u0430 \u0437 <code>writable()<\/code> \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0454\u043c\u043e <code>readable()<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { readable } from 'svelte\/store'\nexport const count = readable(0)\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u0442\u0430\u043a\u043e\u0436 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e, \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u043b\u044c\u043d\u0443 \u0437\u0430 \u043e\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f. \u0424\u0443\u043d\u043a\u0446\u0456\u044f \u043e\u0442\u0440\u0438\u043c\u0443\u0454 \u043c\u0435\u0442\u043e\u0434 <code>set()<\/code> \u0434\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0430\u0446\u0456\u0457 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport { readable } from 'svelte\/store'\nexport const count = readable(0, set => {\n  setTimeout(() => {\n    set(1)\n  }, 1000)\n})\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0443\u0442 \u043c\u0438 \u043e\u043d\u043e\u0432\u043b\u044e\u0454\u043c\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043f\u0456\u0441\u043b\u044f \u0442\u043e\u0433\u043e, \u044f\u043a \u043f\u0440\u043e\u0439\u0434\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u0430. \u041c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u043d\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u0434 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0432\u043d\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0432\u0430\u043b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { readable, get } from 'svelte\/store'\nexport const count = readable(0, set => {\n  setInterval(() => {\n    set(get(count) + 1)\n  }, 1000)\n})\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0430\u043a\u0443 \u043b\u043e\u0433\u0456\u043a\u0443 \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0432 \u0456\u043d\u0448\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456, \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0432\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport { count } from '.\/store.js'\n&lt;\/script>\n\n{$count}\n<\/code><\/pre>\n\n\n\n<h4><strong>\u0421\u0445\u043e\u0432\u0438\u0449\u0430 \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0432\u0430\u043d\u043d\u044f \u0443 Svelte<\/strong><\/h4>\n\n\n\n<p>\u0421\u0445\u043e\u0432\u0438\u0449\u0430 \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442\u044c \u0434\u043e\u0434\u0430\u0442\u0438 \u043d\u043e\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0434\u043e \u0441\u0445\u043e\u0432\u0438\u0449\u0430, \u044f\u043a\u0435 \u0431\u0430\u0437\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u0456 \u043d\u0430\u044f\u0432\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0432\u0438\u0449\u0430.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e <code>derived()<\/code>, \u0435\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043d\u0443 \u0437\u0456 <code>svelte\/store<\/code>, \u044f\u043a\u0430 \u043f\u0440\u0438\u0439\u043c\u0430\u0454 \u043f\u0435\u0440\u0448\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043d\u0430\u044f\u0432\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 \u0441\u0445\u043e\u0432\u0438\u0449\u0456, \u0430 \u044f\u043a \u0434\u0440\u0443\u0433\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2014 \u0444\u0443\u043d\u043a\u0446\u0456\u044e, \u0449\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 \u0446\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { writable, derived } from 'svelte\/store'\n\nexport const username = writable('Guest')\n\nexport const welcomeMessage = derived(username, $username => {\n  return `Welcome ${$username}`\n})\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport { username, welcomeMessage } from '.\/store.js'\n&lt;\/script>\n\n{$username}\n{$welcomeMessage}\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0441\u043b\u043e\u0442\u0438-\u0443-svelte\"><strong>\u0421\u043b\u043e\u0442\u0438 \u0443 Svelte<\/strong><\/h2>\n\n\n\n<p>\u0421\u043b\u043e\u0442\u0438 \u2014 \u0437\u0440\u0443\u0447\u043d\u0438\u0439 \u0441\u043f\u043e\u0441\u0456\u0431 \u043e\u0431&#8217;\u0454\u0434\u043d\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u0430 \u0449\u0435 \u0432\u043e\u043d\u0438 \u043a\u043e\u0440\u0438\u0441\u043d\u0456 \u0434\u043b\u044f \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0456\u043c\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432.<\/p>\n\n\n\n<p>\u041f\u043e\u044f\u0441\u043d\u0438\u043c\u043e, \u044f\u043a \u0432\u0441\u0435 \u043f\u0440\u0430\u0446\u044e\u0454. \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0441\u043b\u043e\u0442, \u0432\u043a\u0430\u0437\u0430\u0432\u0448\u0438 <code>&lt;slot \/&gt;<\/code> \u0447\u0438 <code>&lt;slot&gt;&lt;\/slot&gt;<\/code>.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Button.svelte<\/code>, \u044f\u043a\u0438\u0439 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0443 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 <code>&lt;button&gt;<\/code>. \u0412 React \u0446\u0435 \u0431\u0443\u043b\u043e \u0431 \u0442\u0430\u043a: <code>&lt;button&gt;{props.children}&lt;\/button&gt;<\/code>.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0432 \u0456\u043d\u0448\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0434\u043e\u0447\u0456\u0440\u043d\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u043e\u0433\u043e <code>Button<\/code> \u0456 \u0432\u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442\u044c \u043f\u043e\u043c\u0456\u0449\u0435\u043d\u0456 \u0432 \u0441\u043b\u043e\u0442.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport Button from '.\/Button.svelte'\n&lt;\/script>\n\n&lt;Button>Insert this into the slot&lt;\/Button>\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0434\u043b\u044f \u0441\u043b\u043e\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c, \u044f\u043a\u0449\u043e \u043d\u0435 \u0431\u0443\u0434\u0435 \u043f\u0435\u0440\u0435\u0434\u0431\u0430\u0447\u0435\u043d\u043e \u0456\u043d\u0448\u043e\u0433\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button>\n &lt;slot>\n   Default text for the button\n &lt;\/slot>\n&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u0441\u043b\u043e\u0442\u0456\u0432, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0456\u0434\u0440\u0456\u0437\u043d\u044f\u0442\u0438 \u0457\u0445 \u043c\u0456\u0436 \u0441\u043e\u0431\u043e\u044e \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>name<\/code>. \u0421\u043b\u043e\u0442 \u0431\u0435\u0437 \u043d\u0430\u0437\u0432\u0438 \u0431\u0443\u0434\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\u0441\u044c \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;slot name=\"before\" \/>\n&lt;button>\n  &lt;slot \/>\n&lt;\/button>\n&lt;slot name=\"after\" \/>\n<\/code><\/pre>\n\n\n\n<p>\u0410 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0432\u0430\u0442\u0438  \u0446\u0435 \u043c\u043e\u0436\u043d\u0430 \u0442\u0430\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nimport Button from '.\/Button.svelte'\n&lt;\/script>\n\n&lt;Button>\n  Insert this into the slot\n  &lt;p slot=\"before\">Add this before&lt;\/p>\n  &lt;p slot=\"after\">Add this after&lt;\/p>\n&lt;\/Button>\n<\/code><\/pre>\n\n\n\n<p>\u0410 \u0442\u0430\u043a \u0446\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435 \u0443 DOM:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p slot=\"before\">Add this before&lt;\/p>\n&lt;button>\n  Insert this into the slot\n&lt;\/button>\n&lt;p slot=\"after\">Add this after&lt;\/p>\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u043f\u043e\u0434\u0456\u0457-\u0436\u0438\u0442\u0442\u0454\u0432\u043e\u0433\u043e-\u0446\u0438\u043a\u043b\u0443-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-svelte\"><strong>\u041f\u043e\u0434\u0456\u0457 \u0436\u0438\u0442\u0442\u0454\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Svelte<\/strong><\/h2>\n\n\n\n<p>\u041a\u043e\u0436\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443 Svelte \u043c\u0430\u0454 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u0435\u0442\u0430\u043f\u0456\u0432 \u0436\u0438\u0442\u0442\u0454\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0443, \u043d\u0430 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u0437 \u043d\u0438\u0445 \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043f\u0435\u0432\u043d\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b.<\/p>\n\n\n\n<p>\u0406\u0441\u043d\u0443\u044e\u0442\u044c \u0442\u0430\u043a\u0456 \u043f\u043e\u0434\u0456\u0457 \u0436\u0438\u0442\u0442\u0454\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0443:<\/p>\n\n\n\n<ul><li><code>onMount<\/code> \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u0456\u0441\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/li><li><code>onDestroy<\/code> \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u0456\u0441\u043b\u044f \u0437\u043d\u0438\u0449\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/li><li><code>beforeUpdate<\/code> \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043e\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f\u043c DOM;<\/li><li><code>afterUpdate<\/code> \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u0456\u0441\u043b\u044f \u043e\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f DOM.<\/li><\/ul>\n\n\n\n<p>\u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0437\u0430\u043f\u043b\u0430\u043d\u0443\u0432\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u044f\u043a\u0456 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438\u043c\u0443\u0442\u044c\u0441\u044f Svelte \u043d\u0430 \u043f\u0435\u0432\u043d\u0438\u0445 \u0435\u0442\u0430\u043f\u0430\u0445.<\/p>\n\n\n\n<p>\u0417\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u043c\u0438 \u043d\u0435 \u043c\u0430\u0454\u043c\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u043f\u0435\u0440\u0435\u043b\u0456\u0447\u0435\u043d\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u0456\u0432, \u043e\u0434\u043d\u0430\u043a \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u0457\u0445 \u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <code>svelte<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0432\u0430\u0440\u0456\u0430\u043d\u0442 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f <code>onMount<\/code> \u2014 \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445 \u0437\u0456 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044c\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0443.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043a\u043b\u0430\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f <code>onMount<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { onMount } from 'svelte'\n\n  onMount(async () => {\n    \/\/ \u043f\u0435\u0432\u043d\u0456 \u0434\u0456\u0457\n  })\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p><code>onDestroy<\/code> \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u0438 \u0434\u0430\u043d\u0456 \u0430\u0431\u043e \u0437\u0443\u043f\u0438\u043d\u0438\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u044e, \u044f\u043a\u0443 \u043c\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438 \u0456\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a \u0442\u0430\u0439\u043c\u0435\u0440\u0456\u0432 \u0430\u0431\u043e <code>setInterval<\/code>).<\/p>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0437 <code>onMount<\/code>, \u0432\u043e\u043d\u0430 \u0432\u0438\u043a\u043e\u043d\u0443\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c\u0443 \u0436 \u0435\u0442\u0430\u043f\u0456, \u0449\u043e \u0439 <code>onDestroy<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { onMount } from 'svelte'\n\n  onMount(async () => {\n    \/\/\u0456\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\n\n    return () => {\n      \/\/ \u043f\u0456\u0441\u043b\u044f \u0437\u043d\u0438\u0449\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\n    }\n  })\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438 \u043f\u0435\u0440\u0456\u043e\u0434\u0438\u0447\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0443\u0432\u0430\u043d\u043d\u0456 \u0442\u0430 \u043e\u0447\u0438\u0449\u0430\u0442\u0438 \u0456\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043f\u0456\u0441\u043b\u044f \u0437\u043d\u0438\u0449\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { onMount } from 'svelte'\n\n  onMount(async () => {\n    const interval = setInterval(() => {\n      console.log('hey, just checking!')\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  })\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0437\u0432\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f-\u0443-svelte\"><strong>\u0417\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u0443 Svelte<\/strong><\/h2>\n\n\n\n<p>\u0417\u0456 Svelte \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0434\u0432\u043e\u043d\u0430\u043f\u0440\u044f\u043c\u043d\u0435 \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u0456\u0436 \u0434\u0430\u043d\u0438\u043c\u0438 \u0442\u0430 \nUI. \u0426\u0435 \u0434\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u043f\u0430\u0442\u0435\u0440\u043d \u0441\u0435\u0440\u0435\u0434 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0445 \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0456\u0432, \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u043e \n\u043a\u043e\u0440\u0438\u0441\u043d\u0438\u0439 \u0434\u043b\u044f \u0444\u043e\u0440\u043c:<\/p>\n\n\n\n<h4><strong><code>bind:value<\/code><\/strong><\/h4>\n\n\n\n<p>\u041f\u043e\u0447\u043d\u0435\u043c\u043e \u0437 \u043d\u0430\u0439\u0431\u0456\u043b\u044c\u0448 \u043f\u043e\u0448\u0438\u0440\u0435\u043d\u043e\u0457 \u0444\u043e\u0440\u043c\u0438 \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u044e <code>bind:value<\/code>. \u0412\u0438 \u0431\u0435\u0440\u0435\u0442\u0435 \u0437\u043c\u0456\u043d\u043d\u0443 \u0437\u0456 \u0441\u0442\u0430\u043d\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0430 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0443\u0454\u0442\u0435 \u0457\u0457 \u0434\u043e \u043f\u043e\u043b\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet name = ''\n&lt;\/script>\n\n&lt;input bind:value={name}>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u044f\u043a\u0449\u043e <code>name<\/code> \u0437\u043c\u0456\u043d\u0438\u0442\u044c\u0441\u044f, \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0443 \u0437\u043c\u0456\u043d\u0438\u0442\u044c\u0441\u044f \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e. \u0406 \u043d\u0430\u0432\u043f\u0430\u043a\u0438: \u044f\u043a\u0449\u043e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0435\u0432\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 \u043f\u043e\u043b\u0435: \u0437\u043c\u0456\u043d\u043d\u0430 <code>name<\/code> \u043e\u043d\u043e\u0432\u043b\u044e\u0454\u0442\u044c\u0441\u044f.<\/p>\n\n\n\n<p>\u041f\u0430\u043c&#8217;\u044f\u0442\u0430\u0439\u0442\u0435, \u0449\u043e \u0437\u043c\u0456\u043d\u043d\u0443 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043e\u0433\u043e\u043b\u043e\u0448\u0443\u0432\u0430\u0442\u0438 \u043a\u043b\u044e\u0447\u043e\u0432\u0438\u043c \u0441\u043b\u043e\u0432\u043e\u043c <code>let\/var<\/code>, \u0430 \u043d\u0435 <code>const<\/code>, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0432 \u043e\u0441\u0442\u0430\u043d\u043d\u044c\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 Svelte \u043d\u0435 \u0437\u043c\u043e\u0436\u0435 \u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u043c\u0456\u043d\u043d\u043e\u0457.<\/p>\n\n\n\n<p><code>bind:value<\/code> \u043f\u0440\u0430\u0446\u044e\u0454 \u0434\u043b\u044f \u0440\u0456\u0437\u043d\u0438\u0445 \u0442\u0438\u043f\u0456\u0432 \u043f\u043e\u043b\u0456\u0432 \u0432\u0432\u043e\u0434\u0443 (<code>type=\"number\"<\/code>, <code>type=\"email\"<\/code> \u0442\u043e\u0449\u043e), \u0430\u043b\u0435 \u0442\u0430\u043a\u043e\u0436 \u0456 \u0434\u043b\u044f \u0456\u043d\u0448\u0438\u0445 \u0442\u0438\u043f\u0456\u0432 \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a <code>textarea<\/code> \u0442\u0430 <code>select<\/code> (\u0431\u0456\u043b\u044c\u0448\u0435 \u043f\u0440\u043e <code>select<\/code> \u0434\u0430\u043b\u0456).<\/p>\n\n\n\n<h4><strong>\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u0438 \u0442\u0430 \u0440\u0430\u0434\u0456\u043e\u043a\u043d\u043e\u043f\u043a\u0438<\/strong><\/h4>\n\n\n\n<p>\u0427\u0435\u043a\u0431\u043e\u043a\u0441\u0438 \u0442\u0430 \u0440\u0430\u0434\u0456\u043e\u043a\u043d\u043e\u043f\u043a\u0438 (<code>input<\/code>-\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 \u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 <code>type=\"checkbox\"<\/code> \u0447\u0438 <code>type=\"radio\"<\/code>) \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442\u044c \u0442\u0440\u0438 \u0432\u0438\u0434\u0438 \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f:<\/p>\n\n\n\n<ul><li><code>bind:checked<\/code><\/li><li><code>bind:group<\/code><\/li><li><code>bind:indeterminate<\/code><\/li><\/ul>\n\n\n\n<p><code>bind:checked<\/code> \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0434\u043e \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 <code>checked<\/code> \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet isChecked\n&lt;\/script>\n\n&lt;input type=checkbox bind:checked={isChecked}>\n<\/code><\/pre>\n\n\n\n<p><code>bind:group<\/code> \u043a\u043e\u0440\u0438\u0441\u043d\u0438\u0439 \u0434\u043b\u044f \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0456\u0432 \u0442\u0430 \u0440\u0430\u0434\u0456\u043e\u043a\u043d\u043e\u043f\u043e\u043a, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0432\u043e\u043d\u0438 \u0447\u0430\u0441\u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c\u0441\u044f \u0432 \u0433\u0440\u0443\u043f\u0430\u0445. \u0417 <code>bind:group<\/code> \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u0438 \u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0456\u0441\u0442\u044c \u043c\u0430\u0441\u0438\u0432\u0443 JavaScript \u0441\u043f\u0438\u0441\u043e\u043a \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0456\u0432 \u0442\u0430 \u043d\u0430\u043f\u043e\u0432\u043d\u0438\u0442\u0438 \u0439\u043e\u0433\u043e \u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u0432\u0438\u0431\u043e\u0440\u0443 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u0438\u043a\u043b\u0430\u0434. \u041c\u0430\u0441\u0438\u0432 <code>goodDogs<\/code> \u043d\u0430\u043f\u043e\u0432\u043d\u044e\u0454\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u0430\u043d\u0438\u043c\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet goodDogs = []\nlet dogs = ['Roger', 'Syd']\n&lt;\/script>\n\n&lt;h2>\n  Who's a good dog?\n&lt;\/h2>\n\n&lt;ul>\n  {#each dogs as dog}\n    &lt;li>{dog} &lt;input type=checkbox bind:group={goodDogs} value={dog}>&lt;\/li>\n  {\/each}\n&lt;\/ul>\n\n&lt;h2>\n  Good dogs according to me:\n&lt;\/h2>\n\n&lt;ul>\n  {#each goodDogs as dog}\n    &lt;li>{dog}&lt;\/li>\n  {\/each}\n&lt;\/ul>\n<\/code><\/pre>\n\n\n\n<p>\u041f\u0440\u0438\u043a\u043b\u0430\u0434 \u043c\u043e\u0436\u043d\u0430 \u043e\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u043d\u0430\u0436\u0438\u0432\u043e <a href=\"https:\/\/svelte.dev\/repl\/059c1b5edffc4b058ad36301dd7a1a58\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>.<\/p>\n\n\n\n<p><code>bind:indeterminate<\/code> \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043d\u0430\u043c \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u0442\u0438\u0441\u044c \u0434\u043e <code>indeterminate<\/code> \u0441\u0442\u0430\u043d\u0443 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0431\u0456\u043b\u044c\u0448\u0435 \u2014 <a href=\"https:\/\/css-tricks.com\/indeterminate-checkboxes\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>)<\/p>\n\n\n\n<h4><strong>Select<\/strong><\/h4>\n\n\n\n<p><code>bind:value<\/code> \u0442\u0430\u043a\u043e\u0436 \u043f\u0440\u0430\u0446\u044e\u0454 \u0434\u043b\u044f \u043f\u043e\u043b\u044f \u0442\u0438\u043f\u0443 <code>select<\/code>, \u0449\u043e\u0431 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0430\u0442\u0438 \u043e\u0431\u0440\u0430\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u043c\u0456\u043d\u043d\u0456\u0439:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet selected\n&lt;\/script>\n\n&lt;select bind:value={selected}>\n  &lt;option value=\"1\">1&lt;\/option>\n  &lt;option value=\"2\">2&lt;\/option>\n  &lt;option value=\"3\">3&lt;\/option>\n&lt;\/select>\n\n{selected}\n<\/code><\/pre>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0433\u0435\u043d\u0435\u0440\u0443\u0454\u0442\u0435 \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0438 \u0434\u0438\u043d\u0430\u043c\u0456\u0447\u043d\u043e \u0437 \u043c\u0430\u0441\u0438\u0432\u0443 \u0447\u0438 \u043e\u0431&#8217;\u0454\u043a\u0442\u0456\u0432, \u043e\u0431\u0440\u0430\u043d\u0438\u0439 \u0432\u0430\u0440\u0456\u0430\u043d\u0442 \u0431\u0443\u0434\u0435 \u043e\u0431&#8217;\u0454\u043a\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0440\u044f\u0434\u043a\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet selected\n\nconst goodDogs = [\n  { name: 'Roger' },\n  { name: 'Syd' }\n]\n&lt;\/script>\n\n&lt;h2>List of possible good dogs:&lt;\/h2>\n&lt;select bind:value={selected}>\n  {#each goodDogs as goodDog}\n    &lt;option value={goodDog}>{goodDog.name}&lt;\/option>\n  {\/each}\n&lt;\/select>\n\n{#if selected}\n&lt;h2>\n  Good dog selected: {selected.name}\n&lt;\/h2>\n{\/if}\n<\/code><\/pre>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0432\u0456\u0440\u0442\u0435 <a href=\"https:\/\/svelte.dev\/repl\/7e06f9b7becd4c57880db5ed184ea0f3\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>.<\/p>\n\n\n\n<p><code>select<\/code> \u0442\u0430\u043a\u043e\u0436 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>multiple<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet selected = []\n\nconst goodDogs = [\n  { name: 'Roger' },\n  { name: 'Syd' }\n]\n&lt;\/script>\n\n&lt;h2>List of possible good dogs:&lt;\/h2>\n&lt;select multiple bind:value={selected}>\n  {#each goodDogs as goodDog}\n    &lt;option value={goodDog}>{goodDog.name}&lt;\/option>\n  {\/each}\n&lt;\/select>\n\n{#if selected.length}\n&lt;h2>Good dog selected:&lt;\/h2>\n&lt;ul>\n  {#each selected as dog}\n    &lt;li>{dog.name}&lt;\/li>\n  {\/each}\n&lt;\/ul>\n{\/if}\n<\/code><\/pre>\n\n\n\n<p>\u041f\u0440\u0438\u043a\u043b\u0430\u0434 <a href=\"https:\/\/svelte.dev\/repl\/b003248e87f04919a2f9fed63dbdab8c\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>.<\/p>\n\n\n\n<h4><strong>\u0406\u043d\u0448\u0456 \u0432\u0438\u0434\u0438 \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f<\/strong><\/h4>\n\n\n\n<p>\u0412\u0438\u0434\u0438 \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u044c \u0437\u0430\u043b\u0435\u0436\u0430\u0442\u044c \u0432\u0456\u0434 HTML-\u0442\u0435\u0433\u0456\u0432, \u0437 \u044f\u043a\u0438\u043c\u0438 \u0432\u0438 \u043f\u0440\u0430\u0446\u044e\u0454\u0442\u0435.<\/p>\n\n\n\n<p><code>bind:files<\/code> \u043f\u0440\u0430\u0446\u044e\u0454 \u0434\u043b\u044f \u043f\u043e\u043b\u0456\u0432 \u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>type=\"file\"<\/code> \u0434\u043b\u044f \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u0441\u043f\u0438\u0441\u043a\u0443 \u043e\u0431\u0440\u0430\u043d\u0438\u0445 \u0444\u0430\u0439\u043b\u0456\u0432.<\/p>\n\n\n\n<p>HTML-\u0435\u043b\u0435\u043c\u0435\u043d\u0442 <code>details<\/code> \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f <code>bind:open<\/code> \u0434\u043b\u044f \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u044c \u0432\u0456\u0434\u043a\u0440\u0438\u0442\u043e\u0433\u043e \u0456 \u0437\u0430\u043a\u0440\u0438\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u0443.<\/p>\n\n\n\n<p>\u041c\u0435\u0434\u0456\u0430\u0442\u0435\u0433\u0438 <code>audio<\/code> \u0442\u0430 <code>video<\/code> \u0432 HTML \u0442\u0430\u043a\u043e\u0436 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442\u044c \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u0442\u0438 \u0434\u0435\u044f\u043a\u0456 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456: <code>currentTime<\/code>, <code>duration<\/code>, <code>paused<\/code>, <code>buffered<\/code>, <code>seekable<\/code>, <code>played<\/code>, <code>volume<\/code>, <code>playbackRate<\/code>.<\/p>\n\n\n\n<p><code>textContent<\/code> \u0442\u0430 <code>innerHTML<\/code> \u043c\u043e\u0436\u043d\u0430 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u0442\u0438 \u0434\u043e <code>contenteditable<\/code> \u043f\u043e\u043b\u0456\u0432.<\/p>\n\n\n\n<h2 id=\"read-only-\u0437\u0432\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f\"><strong>Read-only \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f<\/strong><\/h2>\n\n\n\n<p><code>offsetWidth<\/code>, <code>offsetHeight<\/code>, <code>clientWidth<\/code>, <code>clientHeight<\/code>\n \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u043e\u0436\u0443\u0442\u044c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\u0441\u044c \u043b\u0438\u0448\u0435 \u0434\u043b\u044f \u0447\u0438\u0442\u0430\u043d\u043d\u044f \u0434\u043b\u044f \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0433\u043e \n\u0431\u043b\u043e\u043a\u043e\u0432\u043e\u0433\u043e HTML-\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u0430 \u0432\u0438\u043d\u044f\u0442\u043a\u043e\u043c \u043f\u0443\u0441\u0442\u0438\u0445 \u0442\u0435\u0433\u0456\u0432 (\u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a <code>br<\/code>) \u0442\u0430 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432, \u044f\u043a\u0456 \u044f\u0432\u043d\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0456 \u044f\u043a \u0440\u044f\u0434\u043a\u043e\u0432\u0456 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e <code>display: inline<\/code>.<\/p>\n\n\n\n<h4><strong>\u041e\u0442\u0440\u0438\u043c\u0430\u043d\u043d\u044f \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 HTML-\u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 JavaScript<\/strong><\/h4>\n\n\n\n<p><code>bind:this<\/code> \u2014 \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u0438\u0439 \u0432\u0438\u0434 \u0437\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f, \u044f\u043a\u0438\u0439 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 HTML-\u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0430 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0434\u043e JavaScript-\u0437\u043c\u0456\u043d\u043d\u043e\u0457:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet myInputField\n&lt;\/script>\n\n&lt;input bind:this={myInputField} \/>\n<\/code><\/pre>\n\n\n\n<p>\u0426\u0435 \u043a\u043e\u0440\u0438\u0441\u043d\u043e, \u043a\u043e\u043b\u0438 \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u0432\u0438\u043a\u043e\u043d\u0430\u0442\u0438 \u0434\u0435\u044f\u043a\u0443 \u043b\u043e\u0433\u0456\u043a\u0443 \u043d\u0430\u0434 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u043a\u043e\u043b\u0431\u0435\u043a <code>onMount()<\/code>.<\/p>\n\n\n\n<h4><strong>\u0417\u0432&#8217;\u044f\u0437\u0443\u0432\u0430\u043d\u043d\u044f props \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong><\/h4>\n\n\n\n<p>\u0417 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0454\u044e <code>bind:<\/code> \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0434\u043e \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0433\u043e prop-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0443 \u043d\u0430\u0441 \u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Car.svelte<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nexport let inMovement = false\n&lt;\/script>\n\n&lt;button on:click={() => inMovement = true }>Start car&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u041c\u043e\u0436\u043d\u0430 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u0442\u0438 prop <code>inMovement<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import Car from '.\/Car.svelte';\n\n  let carInMovement;\n&lt;\/script>\n\n&lt;Car bind:inMovement={carInMovement} \/>\n\n{carInMovement}\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0443\u043c\u043e\u0432\u043d\u0456-\u0432\u0438\u0440\u0430\u0437\u0438-\u0432-\u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445\"><strong>\u0423\u043c\u043e\u0432\u043d\u0456 \u0432\u0438\u0440\u0430\u0437\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445<\/strong><\/h2>\n\n\n\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 Svelte \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 HTML \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u0438\u0439 \n\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u0449\u043e\u0431 \u0437\u0440\u043e\u0431\u0438\u0442\u0438 UI \u0434\u043e\u0441\u043a\u043e\u043d\u0430\u043b\u0438\u043c \u043d\u0430 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u0435\u0442\u0430\u043f\u0456 \u0436\u0438\u0442\u0442\u0454\u0432\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0443 \n\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u0443\u043c\u043e\u0432\u043d\u0456 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438. \u041f\u0440\u0438\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0432\u0438\u043a\u043e\u043d\u0430\u0442\u0438 \u0440\u0456\u0437\u043d\u0456\n \u0434\u0456\u0457, \u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u0443\u043c\u043e\u0432\u0438. Svelte \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454 \u0434\u0443\u0436\u0435 \u043f\u043e\u0442\u0443\u0436\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 \u0443\u043c\u043e\u0432\u043d\u0438\u0445 \n\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0448\u0430 \u0437 \u043d\u0438\u0445 \u2013 <code>if<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{#if isRed}\n  &lt;p>Red&lt;\/p>\n{\/if}\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438\u0440\u0430\u0437 \u0441\u0442\u043e\u0457\u0442\u044c \u043c\u0456\u0436 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0454\u044e <code>{#if}<\/code> \u0442\u0430 <code>{\/if}<\/code>. \u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0457 \u043c\u0438 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0454\u043c\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u043c\u0456\u043d\u043d\u043e\u0457 \u0447\u0438 \u0432\u0438\u0440\u0430\u0437\u0443. \u042f\u043a\u0449\u043e \u0437\u043c\u0456\u043d\u043d\u0430 <code>isRed<\/code> \u043f\u0440\u0438\u0439\u043c\u0430\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f <code>true<\/code>, \u0431\u0443\u0434\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet isRed = true\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0430\u0440\u0442\u043e \u043f\u0430\u043c&#8217;\u044f\u0442\u0430\u0442\u0438, \u0449\u043e \u043f\u0443\u0441\u0442\u0438\u0439 \u0440\u044f\u0434\u043e\u043a, 0 \u0442\u0430 <code>false<\/code> \u043d\u0430\u043b\u0435\u0436\u0430\u0442\u044c \u0434\u043e \u0445\u0438\u0431\u043d\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u044c, \u0430 \u0440\u044f\u0434\u043e\u043a \u0437 \u0432\u043c\u0456\u0441\u0442\u043e\u043c, \u0447\u0438\u0441\u043b\u043e &gt; 0 \u0447\u0438 <code>true<\/code>  \u2014 \u043f\u0440\u0430\u0432\u0434\u0438\u0432\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f.<\/p>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432 \u0443\u043c\u043e\u0432\u043d\u0438\u0439 \u0432\u0438\u0440\u0430\u0437 \u043f\u043e\u0442\u0440\u0430\u043f\u043b\u044f\u0454 \u0445\u0438\u0431\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u043c\u0438 \u043d\u0435 \u043f\u043e\u0431\u0430\u0447\u0438\u043c\u043e \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0443.<\/p>\n\n\n\n<p>\u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u044e <code>else<\/code>, \u044f\u043a\u0449\u043e \u0442\u0440\u0435\u0431\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u0440\u043e\u0437\u043c\u0456\u0442\u043a\u0443 \u043f\u0440\u0438 \u0445\u0438\u0431\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u0456:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{#if isRed}\n  &lt;p>Red&lt;\/p>\n{:else}\n  &lt;p>Not red&lt;\/p>\n{\/if}\n<\/code><\/pre>\n\n\n\n<p>\u0417\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f <code>isRed<\/code> \u043c\u0438 \u043f\u043e\u0431\u0430\u0447\u0438\u043c\u043e \u043e\u0434\u043d\u0443 \u0437 \u0440\u043e\u0437\u043c\u0456\u0442\u043e\u043a.<\/p>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 JavaScript-\u0432\u0438\u0440\u0430\u0437 \u0443 \u0431\u043b\u043e\u0446\u0456 <code>if<\/code>, \u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0435\u0440\u0435\u0447\u0435\u043d\u043d\u044f \u2014 \u0441\u0438\u043c\u0432\u043e\u043b <code>!<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{#if !isRed}\n  &lt;p>Not red&lt;\/p>\n{:else}\n  &lt;p>Red&lt;\/p>\n{\/if}\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 <code>else<\/code> \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0443 \u0443\u043c\u043e\u0432\u0443. \u0422\u0443\u0442 \u043d\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0438\u0440\u0430\u0437 <code>{:else if somethingElse}<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{#if isRed}\n  &lt;p>Red&lt;\/p>\n{:else if isGreen}\n  &lt;p>Green&lt;\/p>\n{:else}\n  &lt;p>Not red nor green&lt;\/p>\n{\/if}\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u0430\u0442\u0438 \u0431\u0456\u043b\u044c\u0448\u0435 \u043d\u0456\u0436 \u043e\u0434\u0438\u043d \u043f\u043e\u0434\u0456\u0431\u043d\u0438\u0439 \u0431\u043b\u043e\u043a, \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u0456 \u0432\u043a\u043b\u0430\u0434\u0435\u043d\u0456\u0441\u0442\u044c. \u041e\u0441\u044c \u0441\u043a\u043b\u0430\u0434\u043d\u0456\u0448\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{#if isRed}\n  &lt;p>Red&lt;\/p>\n{:else if isGreen}\n  &lt;p>Green&lt;\/p>\n{:else if isBlue}\n  &lt;p>It is blue&lt;\/p>\n{:else}\n  {#if isDog}\n    &lt;p>It is a dog&lt;\/p>\n  {\/if}\n{\/if}\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0446\u0438\u043a\u043b\u0456\u0447\u043d\u0456-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0457-\u0432-\u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445-svelte\"><strong>\u0426\u0438\u043a\u043b\u0456\u0447\u043d\u0456 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0457 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 Svelte<\/strong><\/h2>\n\n\n\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 Svelte \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0446\u0438\u043a\u043b\u0438 \u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u044f\u043c\u0438 <code>{#each}{\/each}<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet goodDogs = ['Roger', 'Syd']\n&lt;\/script>\n\n{#each goodDogs as goodDog}\n  &lt;li>{goodDog}&lt;\/li>\n{\/each}\n<\/code><\/pre>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u043c\u0430\u043b\u0438 \u0434\u043e\u0441\u0432\u0456\u0434 \u0437 \u0456\u043d\u0448\u0438\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u0449\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u0438, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u0443\u0436\u0435 \u0441\u0445\u043e\u0436\u0438\u0439.<\/p>\n\n\n\n<p>\u0429\u043e\u0431 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0456\u043d\u0434\u0435\u043a\u0441 \u043a\u043e\u0436\u043d\u043e\u0457 \u0456\u0442\u0435\u0440\u0430\u0446\u0456\u0457:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet goodDogs = ['Roger', 'Syd']\n&lt;\/script>\n\n{#each goodDogs as goodDog, index}\n  &lt;li>{index}: {goodDog}&lt;\/li>\n{\/each}\n<\/code><\/pre>\n\n\n\n<p>\u041f\u0440\u0438 \u0434\u0438\u043d\u0430\u043c\u0456\u0447\u043d\u043e\u043c\u0443 \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u043d\u043d\u0456 \u0441\u043f\u0438\u0441\u043a\u0443, \u0432\u0438\u0434\u0430\u043b\u0435\u043d\u043d\u0456 \u0442\u0430 \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u0456 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0437\u0430\u0432\u0436\u0434\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u0438 \u0456\u0434\u0435\u043d\u0442\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440 .<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet goodDogs = ['Roger', 'Syd']\n&lt;\/script>\n\n{#each goodDogs as goodDog (goodDog)}\n  &lt;li>{goodDog}&lt;\/li>\n{\/each}\n\n&lt;!-- \u0437 \u0456\u043d\u0434\u0435\u043a\u0441\u043e\u043c -->\n{#each goodDogs as goodDog, index (goodDog)}\n  &lt;li>{goodDog}&lt;\/li>\n{\/each}\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u0442\u0430\u043a\u043e\u0436 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u043e\u0431&#8217;\u0454\u043a\u0442, \u0430\u043b\u0435 \u044f\u043a\u0449\u043e \u0432\u0430\u0448 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u0430\u0454 \u0443\u043d\u0456\u043a\u0430\u043b\u044c\u043d\u0438\u0439 \n\u0456\u0434\u0435\u043d\u0442\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u0440\u0430\u0449\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nlet goodDogs = [\n  { id: 1, name: 'Roger'},\n  { id: 2, name: 'Syd'}\n]\n&lt;\/script>\n\n{#each goodDogs as goodDog (goodDog.id)}\n  &lt;li>{goodDog.name}&lt;\/li>\n{\/each}\n\n&lt;!-- \u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c index -->\n{#each goodDogs as goodDog, index (goodDog.id)}\n  &lt;li>{goodDog.name}&lt;\/li>\n{\/each}\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u043f\u0440\u043e\u043c\u0456\u0441\u0438-\u0432-\u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445-svelte\"><strong>\u041f\u0440\u043e\u043c\u0456\u0441\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 Svelte<\/strong><\/h2>\n\n\n\n<p>\u041f\u0440\u043e\u043c\u0456\u0441\u0438 \u2014 \u0447\u0443\u0434\u043e\u0432\u0438\u0439 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u043f\u043e\u0434\u0456\u044f\u043c\u0438 \u0432 JavaScript. \u0410 \u0437 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f\u043c \u0432 ES2017 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 <code>await<\/code>, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u043c\u0456\u0441\u0438 \u0441\u0442\u0430\u043b\u043e \u0449\u0435 \u043b\u0435\u0433\u0448\u0435.<\/p>\n\n\n\n<p>Svelte \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u044e <code>{#await}<\/code> \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \u0434\u043b\u044f \u043f\u0440\u044f\u043c\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u043f\u0440\u043e\u043c\u0456\u0441\u0430\u043c\u0438 \u043d\u0430 \u0440\u0456\u0432\u043d\u0456 \u0448\u0430\u0431\u043b\u043e\u043d\u0443.<\/p>\n\n\n\n<p>\u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043f\u043e\u0447\u0435\u043a\u0430\u0442\u0438, \u043a\u043e\u043b\u0438 \u043f\u0440\u043e\u043c\u0456\u0441 \u043f\u0435\u0440\u0435\u0439\u0434\u0435 \u0432 \u0441\u0442\u0430\u0442\u0443\u0441 <code>resolved<\/code>, \u0442\u0430 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0456\u043d\u0448\u0438\u0439 UI \u0434\u043b\u044f \u0440\u0456\u0437\u043d\u0438\u0445 \u0441\u0442\u0430\u043d\u0456\u0432 \u043f\u0440\u043e\u043c\u0456\u0441\u0443: <code>unresolved<\/code>, <code>resolved<\/code> \u0442\u0430 <code>rejected<\/code>.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e, \u044f\u043a \u0443\u0441\u0435 \u043f\u0440\u0430\u0446\u044e\u0454. \u041c\u0438 \u043e\u0433\u043e\u043b\u043e\u0448\u0443\u0454\u043c\u043e \u043f\u0440\u043e\u043c\u0456\u0441 \u0442\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e \u0431\u043b\u043e\u043a <code>{#await}<\/code>, \u0434\u0435 \u043c\u0438 \u0447\u0435\u043a\u0430\u0454\u043c\u043e \u043d\u0430 \u0439\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n\n\n\n<p>\u042f\u043a \u0442\u0456\u043b\u044c\u043a\u0438 \u043f\u0440\u043e\u043c\u0456\u0441 \u043f\u0435\u0440\u0435\u0439\u0434\u0435 \u0432 \u0441\u0442\u0430\u043d <code>resolved<\/code>, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0432 \u0431\u043b\u043e\u043a <code>{:then}<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  const fetchImage = (async () => {\n    const response = await fetch('https:\/\/dog.ceo\/api\/breeds\/image\/random')\n    return await response.json()\n  })()\n&lt;\/script>\n\n{#await fetchImage}\n  &lt;p>...waiting&lt;\/p>\n{:then data}\n  &lt;img src={data.message} alt=\"Dog image\" \/>\n{\/await}\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0456\u0434\u043b\u043e\u0432\u0438\u0442\u0438 \u0441\u0442\u0430\u043d <code>rejected<\/code> \u043f\u0440\u043e\u043c\u0456\u0441\u0430 \u0443 <code>{:catch}<\/code> \u0431\u043b\u043e\u0446\u0456:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{#await fetchImage}\n  &lt;p>...waiting&lt;\/p>\n{:then data}\n  &lt;img src={data.message} alt=\"Dog image\" \/>\n{:catch error}\n  &lt;p>An error occurred!&lt;\/p>\n{\/await}\n<\/code><\/pre>\n\n\n\n<p>\u0417 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u0430 \u043e\u0437\u043d\u0430\u0439\u043e\u043c\u0438\u0442\u0438\u0441\u044c <a href=\"https:\/\/svelte.dev\/repl\/70e61d6cc91345cdaca2db9b7077a941\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>.<\/p>\n\n\n\n<h2 id=\"\u0440\u043e\u0431\u043e\u0442\u0430-\u0437-\u043f\u043e\u0434\u0456\u044f\u043c\u0438-\u0443-svelte\"><strong>\u0420\u043e\u0431\u043e\u0442\u0430 \u0437 \u043f\u043e\u0434\u0456\u044f\u043c\u0438 \u0443 Svelte<\/strong><\/h2>\n\n\n\n<h4><strong>\u0412\u0456\u0434\u0441\u0442\u0435\u0436\u0435\u043d\u043d\u044f DOM-\u043f\u043e\u0434\u0456\u0439<\/strong><\/h4>\n\n\n\n<p>\u0423 Svelte \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0441\u043b\u0443\u0445\u0430\u0447\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u0456\u0439 DOM \u043e\u0434\u0440\u0430\u0437\u0443 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0456, \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <code>on:&lt;event&gt;<\/code>.<\/p>\n\n\n\n<p>\u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0449\u043e\u0431 \u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0438\u0442\u0438 \u043f\u043e\u0434\u0456\u044e <code>click<\/code>, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>on:click<\/code>. \u0429\u043e\u0431 \u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0438\u0442\u0438 \u043f\u043e\u0434\u0456\u044e <code>onmousemove<\/code>, \u043c\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u043c\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>on:mousemove<\/code> \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e.<\/p>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0437 \u0444\u0443\u043d\u043a\u0446\u0456\u0454\u044e-\u043e\u0431\u0440\u043e\u0431\u043d\u0438\u043a\u043e\u043c, \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043e\u044e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0456:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button on:click={() => {\n  alert('clicked')\n}}>Click me&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0430 \u0456\u043d\u0448\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0437 \u0444\u0443\u043d\u043a\u0446\u0456\u0454\u044e-\u043e\u0431\u0440\u043e\u0431\u043d\u0438\u043a\u043e\u043c \u0432 \u0441\u0435\u043a\u0446\u0456\u0457 <code>script<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nconst doSomething = () => {\n  alert('clicked')\n}\n&lt;\/script>\n\n&lt;button on:click={doSomething}>Click me&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u044f \u0431\u0456\u043b\u044c\u0448\u0435 \u043f\u0456\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u043b\u044f \u0432\u0438\u043f\u0430\u0434\u043a\u0456\u0432, \u043a\u043e\u043b\u0438 \u0432 \u043e\u0431\u0440\u043e\u0431\u043d\u0438\u043a\u0443 \u043c\u0430\u043b\u043e \u043a\u043e\u0434\u0443. \u0412 \u0456\u043d\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u043a\u0440\u0430\u0449\u0435 \u0437\u0432\u0435\u0440\u043d\u0443\u0442\u0438\u0441\u044c \u0434\u043e <code>&lt;script&gt;<\/code>.<\/p>\n\n\n\n<p>Svelte \u043f\u0435\u0440\u0435\u0434\u0430\u0454 \u043e\u0431\u0440\u043e\u0431\u043d\u0438\u043a \u043f\u043e\u0434\u0456\u0457 \u044f\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u0430 \u0446\u0435 \u0437\u0440\u0443\u0447\u043d\u043e, \u0449\u043e\u0431 \n\u0437\u0443\u043f\u0438\u043d\u0438\u0442\u0438 \u0432\u0438\u043f\u043b\u0438\u0442\u0442\u044f (propagation), \u0430\u0431\u043e \u0449\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \n\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u043e\u0431&#8217;\u0454\u043a\u0442\u0430 <a href=\"https:\/\/flaviocopes.com\/javascript-events\/#the-event-object\" target=\"_blank\" rel=\"noreferrer noopener\"><code>Event<\/code><\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\nconst doSomething = event => {\n  console.log(event)\n  alert('clicked')\n}\n&lt;\/script>\n\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0438\u0449\u0435 \u043c\u0438 \u0437\u0433\u0430\u0434\u0430\u043b\u0438 \u043f\u0440\u043e  \u00ab\u043f\u0440\u0438\u043f\u0438\u043d\u0435\u043d\u043d\u044f \u0432\u0438\u043f\u043b\u0438\u0442\u0442\u044f\u00bb. \u0426\u0435 \u0447\u0430\u0441\u0442\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0449\u043e\u0431 \u0437\u0443\u043f\u0438\u043d\u0438\u0442\u0438 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044f \u0444\u043e\u0440\u043c\u0438. Svelte \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454 <em>\u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440\u0438<\/em>, \u0449\u043e\u0431 \u043d\u0435 \u0440\u043e\u0431\u0438\u0442\u0438 \u0446\u0435 \u0432\u0440\u0443\u0447\u043d\u0443. <code>stopPropagation<\/code> \u0442\u0430 <code>preventDefault<\/code> \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u044e\u0442\u044c\u0441\u044f \u043d\u0430\u0439\u0447\u0430\u0441\u0442\u0456\u0448\u0435.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440\u0456\u0432 \u0456\u0441\u043d\u0443\u0454 \u0442\u0430\u043a\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: <code>&lt;button on:click|stopPropagation|preventDefault={doSomething}&gt;Click me&lt;\/button&gt;<\/code>.<\/p>\n\n\n\n<p>\u0411\u0443\u0432\u0430\u044e\u0442\u044c \u0439 \u0456\u043d\u0448\u0456 \u043c\u043e\u0434\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440\u0438, \u043e\u0434\u043d\u0430\u043a \u0432\u043e\u043d\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c\u0441\u044f \u0440\u0456\u0434\u0448\u0435. <code>capture<\/code> \u0437\u0443\u043c\u043e\u0432\u043b\u044e\u0454 <a href=\"https:\/\/flaviocopes.com\/javascript-events\/#event-bubbling-and-event-capturing\" target=\"_blank\" rel=\"noreferrer noopener\"><code>\u043f\u043e\u0434\u0456\u0457 \u0437\u0430\u0445\u0432\u0430\u0442\u0443, \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u0441\u043f\u043b\u0438\u0432\u0430\u043d\u043d\u044f<\/code><\/a>, <code>once<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454 \u043f\u043e\u0434\u0456\u044e \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u043e, <code>self<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454 \u043f\u043e\u0434\u0456\u044e \u043b\u0438\u0448\u0435 \u044f\u043a\u0449\u043e \u0446\u0456\u043b\u044c\u043e\u0432\u0438\u0439 \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u0456\u0457 \u2014 \u043f\u043e\u0442\u043e\u0447\u043d\u0438\u0439 \u043e\u0431&#8217;\u0454\u043a\u0442 (\u0432\u0438\u0434\u0430\u043b\u0435\u043d\u043d\u044f \u0439\u043e\u0433\u043e \u0437 \u0456\u0454\u0440\u0430\u0440\u0445\u0456\u0457 \u0437\u0430\u0445\u0432\u0430\u0442\u0443\/\u0432\u0438\u043f\u043b\u0438\u0442\u0442\u044f).<\/p>\n\n\n\n<h4><strong>\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0432\u043b\u0430\u0441\u043d\u0438\u0445 \u043f\u043e\u0434\u0456\u0439 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/strong><\/h4>\n\n\n\n<p>\u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0442\u0430\u043a\u043e\u0436 \u0432\u043b\u0430\u0441\u043d\u0456 \u043f\u043e\u0434\u0456\u0457 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0442\u0430 \n\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0442\u0430\u043a\u0438\u0439 \u0441\u0430\u043c\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u044f\u043a \u0456 \u0443 \u0432\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0445 DOM-\u043f\u043e\u0434\u0456\u044f\u0445. \u0414\u043b\u044f\n \u0446\u044c\u043e\u0433\u043e \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e <code>createEventDispatcher<\/code> \u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <code>svelte<\/code> \u0442\u0430 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438 \u0457\u0457, \u0449\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440 \u043f\u043e\u0434\u0456\u0439:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { createEventDispatcher } from 'svelte'\n  const dispatch = createEventDispatcher()\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u041f\u0456\u0441\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0442\u0438 <code>dispatch()<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0440\u044f\u0434\u043e\u043a, \u044f\u043a\u0438\u0439 \u0456\u0434\u0435\u043d\u0442\u0438\u0444\u0456\u043a\u0443\u0454 \u043f\u043e\u0434\u0456\u044e (\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\u043c\u0435\u043c\u043e \u0439\u043e\u0433\u043e \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0457 <code>on:<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { createEventDispatcher } from 'svelte'\n  const dispatch = createEventDispatcher()\n\n  \/\/\u043a\u043e\u043b\u0438 \u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0438 \u043f\u043e\u0434\u0456\u044e\n  dispatch('eventName')\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0456\u043d\u0448\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u043c\u043e\u0436\u0443\u0442\u044c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043d\u0430\u0448\u0456 \u0440\u044f\u0434\u043a\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ComponentName on:eventName={event => {\n  \/\/\u043f\u0435\u0432\u043d\u0430 \u043b\u043e\u0433\u0456\u043a\u0430\n}} \/>\n<\/code><\/pre>\n\n\n\n<p>\u041c\u0438 \u0442\u0430\u043a\u043e\u0436 \u043c\u043e\u0436\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u043e\u0431&#8217;\u0454\u043a\u0442 \u044f\u043a \u0434\u0440\u0443\u0433\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>dispatch()<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script>\n  import { createEventDispatcher } from 'svelte'\n  const dispatch = createEventDispatcher()\n  const value = 'something'\n\n  \/\/\u043a\u043e\u043b\u0438 \u0447\u0430\u0441 \u0432\u0438\u043a\u043e\u043d\u0430\u0442\u0438 \u043f\u043e\u0434\u0456\u044e\n  dispatch('eventName', value)\n\n  \/\/\u0430\u0431\u043e\n\n  dispatch('eventName', {\n    someProperty: value\n  })\n&lt;\/script>\n<\/code><\/pre>\n\n\n\n<p>\u041e\u0431&#8217;\u0454\u043a\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u0438\u0439 \u0432 <code>dispatch()<\/code>, \u0431\u0443\u0434\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0438\u043c \u0432 <code>event<\/code>.<\/p>\n\n\n\n<h2 id=\"\u0449\u043e-\u0434\u0430\u043b\u0456\"><strong>\u0429\u043e \u0434\u0430\u043b\u0456?<\/strong><\/h2>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0430\u0441 \u0437\u0430\u0446\u0456\u043a\u0430\u0432\u0438\u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0456 \u0432\u0438 \u0431 \u0445\u043e\u0442\u0456\u043b\u0438 \u0431 \u0434\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044c \u0431\u0456\u043b\u044c\u0448\u0435, \u043e\u0437\u043d\u0430\u0439\u043c\u0442\u0435\u0441\u044c \u0437:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u041e\u0444\u0456\u0446\u0456\u0439\u043d\u0438\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u043c Svelte<\/a>;<\/li><li><a href=\"https:\/\/sapper.svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sapper<\/a> \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u043c \u043d\u0430 \u0431\u0430\u0437\u0456 Svelte \u0434\u043b\u044f SSR-\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432 \u043d\u0430 Node.js \u0442\u0430 Svelte.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0434\u043e\u0441\u0456 \u043d\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043b\u0438 \u0437\u0456 Svetle, \u0442\u043e \u0446\u0435 \u0447\u0443\u0434\u043e\u0432\u0430 \u043c\u043e\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044c \u043f\u043e\u0447\u0430\u0442\u0438. \u041c\u0430\u0442\u0435\u0440\u0456\u0430\u043b \u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432, \u044f\u043a\u0456 \u0440\u0430\u043d\u0456\u0448\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043b\u0438 \u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a Vue \u0447\u0438 React \u0456 \u0448\u0443\u043a\u0430\u044e\u0442\u044c \u043d\u043e\u0432\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[86],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1060"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1060"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1060\/revisions"}],"predecessor-version":[{"id":1061,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1060\/revisions\/1061"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}