{"id":14323,"date":"2024-01-04T20:17:14","date_gmt":"2024-01-04T16:47:14","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d9%85%d9%82%d8%af%d8%a7%d8%b1-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d8%b4%d8%af%d9%87-%db%8c%da%a9-%d9%85%d9%86%d9%88%db%8c-%da%a9%d8%b4%d9%88%db%8c%db%8c-%d8%b1%d8%a7-%d8%af%d8%b1-vue-%d8%af%d8%b1\/"},"modified":"2024-01-04T20:17:14","modified_gmt":"2024-01-04T16:47:14","slug":"%d9%85%d9%82%d8%af%d8%a7%d8%b1-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d8%b4%d8%af%d9%87-%db%8c%da%a9-%d9%85%d9%86%d9%88%db%8c-%da%a9%d8%b4%d9%88%db%8c%db%8c-%d8%b1%d8%a7-%d8%af%d8%b1-vue-%d8%af%d8%b1","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d9%85%d9%82%d8%af%d8%a7%d8%b1-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d8%b4%d8%af%d9%87-%db%8c%da%a9-%d9%85%d9%86%d9%88%db%8c-%da%a9%d8%b4%d9%88%db%8c%db%8c-%d8%b1%d8%a7-%d8%af%d8%b1-vue-%d8%af%d8%b1\/","title":{"rendered":"\u0645\u0642\u062f\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u062f\u0631 Vue \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"mt-8 content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<p>\u062a\u0645\u0631\u06a9\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u0631\u0648\u0634 \u0627\u062a\u0635\u0627\u0644 Vue \u0628\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0642\u062f\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0632 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u062f\u0631 \u0642\u0627\u0644\u0628 Vue\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0641\u0631\u0645\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0628\u0627\u0634\u06af\u0627\u0647 \u0641\u0648\u062a\u0628\u0627\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0622\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<pre><code class=\"hljs\">&lt;template&gt;\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-control\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"club\"<\/span>&gt;<\/span>Which football club do you support?<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"club\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"club\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"acmilan\"<\/span>&gt;<\/span>AC Milan<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"liverpool\"<\/span>&gt;<\/span>Liverpool<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"arsenal\"<\/span>&gt;<\/span>Arsenal<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"chelsea\"<\/span>&gt;<\/span>Chlesea<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"barcelona\"<\/span>&gt;<\/span>Barcelona<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"realmadrid\"<\/span>&gt;<\/span>Real Madrid<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u062f\u0631 Vue\u060c \u0627\u0632 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0647\u0631\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631\u062f <code>v-model<\/code>\u060c \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0627\u062a\u0635\u0627\u0644 \u062f\u0648 \u0637\u0631\u0641\u0647 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u062f\u0648 \u0637\u0631\u0641\u0647\u060c \u0645\u0627 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0641\u0647\u0631\u0633\u062a \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06af\u0648\u0634 \u062f\u0647\u06cc\u0645\u060c \u0628\u0644\u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0642\u062f\u0627\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0642\u0628\u0644\u0627\u064b \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u060c \u0644\u063a\u0648 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Vue \u062e\u0648\u062f\u060c \u0627\u0628\u062a\u062f\u0627 \u0686\u0646\u062f \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0634\u06cc\u0621 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<br \/>\n\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0645\u0648\u0631\u062f \u06a9\u0634\u0648\u06cc\u06cc \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0627\u0633\u062a\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u062e\u0627\u0644\u06cc \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0622\u0646 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n  <span class=\"hljs-keyword\">return<\/span> {\n    <span class=\"hljs-attr\">club<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n  };\n},\n<\/code><\/pre>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a <code>club<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0647\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0631\u0627 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647\u200c\u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0645\u0642\u062f\u0627\u0631 \u0641\u0647\u0631\u0633\u062a \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u062f. <code>v-model<\/code>.<\/p>\n<p>\u0628\u0639\u062f\u060c a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>v-model<\/code> \u0628\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc\u060c \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u06cc\u0645 &#8211; <code>club<\/code>.  \u0628\u0627 \u0627\u06cc\u0646 \u062f\u0631 \u062c\u0627\u06cc \u062e\u0648\u062f\u060c \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f <code>club<\/code>\u060c \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06af\u0632\u06cc\u0646\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0627\u0632 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f:<\/p>\n<div data-nosnippet=\"\" id=\"newsletter\">\n<div class=\"bg-gray-100 border rounded my-8\">\n<div class=\"py-3 px-3 sm:px-4 lg:py-6 lg:px-6\">\n<div class=\"text-center\"><span class=\"text-xl font-extrabold tracking-tight text-gray-600 sm:text-2xl\">\u062f\u0648\u0631\u0647 \u0647\u0627\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646\u060c \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0647\u062f\u0627\u06cc\u062a \u0634\u062f\u0647 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/span><\/div>\n<div class=\"mt-4\">\n<div class=\"flex justify-center\">\n<div class=\"flex-grow flex-col justify-center\">\n<form class=\"group sm:flex sm:justify-center\"><label for=\"email-address\" class=\"sr-only\">\u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644<\/label><input id=\"email-address\" name=\"email-address\" type=\"email\" autocomplete=\"email\" required=\"\" class=\"flex-1 w-full sm:max-w-md px-5 py-3 border sm:border-r-0 border-gray-400 placeholder-gray-500 rounded-md sm:rounded-r-none sm:rounded-l-md focus:ring-0 focus:border-gray-900\" placeholder=\"Enter your email\" value=\"\"><\/p>\n<div class=\"mt-3 sm:mt-0 sm:flex-shrink-0\"><button type=\"submit\" class=\"w-full flex items-center justify-center px-5 py-3 rounded-md sm:rounded-l-none sm:rounded-r-md shadow border border-transparent text-base font-medium text-white bg-orange-500 hover:bg-orange-600\">\u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631<\/button><\/div>\n<\/form>\n<p class=\"text-center mt-3 text-sm text-gray-500\">\u0628\u062f\u0648\u0646 \u0647\u0631\u0632\u0646\u0627\u0645\u0647 \u0647\u0631\u06af\u0632.  \u0644\u063a\u0648 \u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631 \u0647\u0631 \u0632\u0645\u0627\u0646.  \u0645\u0627 \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<!-- --> \u0633\u06cc\u0627\u0633\u062a \u062d\u0641\u0638 \u062d\u0631\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><code class=\"hljs\">&lt;template&gt;\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-control\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"club\"<\/span>&gt;<\/span>Which football club do you support?<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"club\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"club\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"club\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"acmilan\"<\/span>&gt;<\/span>AC Milan<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"liverpool\"<\/span>&gt;<\/span>Liverpool<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"arsenal\"<\/span>&gt;<\/span>Arsenal<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"chelsea\"<\/span>&gt;<\/span>Chlesea<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"barcelona\"<\/span>&gt;<\/span>Barcelona<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"realmadrid\"<\/span>&gt;<\/span>Real Madrid<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0634\u0648\u06cc\u06cc \u0633\u0631\u0648\u06a9\u0627\u0631 \u062f\u0627\u0631\u06cc\u0645\u060c \u0627\u063a\u0644\u0628 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u0628\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u062e\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f\u060c \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0622\u0646 \u0635\u0648\u0631\u062a\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645\u060c \u0648 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0634\u062a \u0635\u062d\u0646\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0648 \u0646\u0645\u0648\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645. <code>club<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0647 \u0647\u0631 \u0645\u0642\u062f\u0627\u0631 \u06af\u0632\u06cc\u0646\u0647 \u062f\u0644\u062e\u0648\u0627\u0647 \u0634\u0645\u0627:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-function\"><span class=\"hljs-title\">data<\/span>(<span class=\"hljs-params\"><\/span>)<\/span> {\n  <span class=\"hljs-keyword\">return<\/span> {\n    <span class=\"hljs-attr\">club<\/span>: <span class=\"hljs-string\">\"aresnal\"<\/span>,\n  };\n},\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f \u06a9\u0647 &#8220;arsenal&#8221; \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0627\u0632 \u0642\u0628\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 page \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0634\u0645\u0627<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0632 \u062f\u0631\u0648\u0646 \u06cc\u0627\u0628\u06cc \u0631\u0634\u062a\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>club<\/code> \u0628\u0647 DOM:<\/p>\n<pre><code class=\"hljs\">&lt;template&gt;\n  &lt;!--string interpolation to render the club to the DOM --&gt;\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>{{ club }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span><\/span>\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-control\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"club\"<\/span>&gt;<\/span>Which football club do you support?<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"club\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"club\"<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"club\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"acmilan\"<\/span>&gt;<\/span>AC Milan<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"liverpool\"<\/span>&gt;<\/span>Liverpool<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"arsenal\"<\/span>&gt;<\/span>Arsenal<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"chelsea\"<\/span>&gt;<\/span>Chlesea<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"barcelona\"<\/span>&gt;<\/span>Barcelona<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"realmadrid\"<\/span>&gt;<\/span>Real Madrid<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f \u06a9\u0647 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06af\u0632\u06cc\u0646\u0647 \u06a9\u0634\u0648\u06cc\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0647\u0645\u06cc\u0646 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u062f\u0631 Vue \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f.<\/p>\n<\/div>\n<p><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-04 20:17:04<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;14323&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0645\u0642\u062f\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0631\u0627 \u062f\u0631 Vue \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u062a\u0645\u0631\u06a9\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0631\u0648\u06cc \u0631\u0648\u0634 \u0627\u062a\u0635\u0627\u0644 Vue \u0628\u0647 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0642\u062f\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0632 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc. \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u062f\u0631 \u0642\u0627\u0644\u0628 Vue\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0641\u0631\u0645\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0628\u0627\u0634\u06af\u0627\u0647 \u0641\u0648\u062a\u0628\u0627\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0622\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f: &lt;template&gt; &lt;div class=&#8221;form-control&#8221;&gt; &lt;label for=&#8221;club&#8221;&gt;Which football club do you support?&lt;\/label&gt; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":9049,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[3292,1843,1842,1967,2242,1841,1103,2750,1774,1803,2342,2097,3343,1806,2706,3342,2322,1813],"class_list":["post-14323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming","tag-vue","tag-nodejs-hosting","tag-nodejs-vps","tag----nodejs","tag-2242","tag-1841","tag-1103","tag-2750","tag-1774","tag-1803","tag-2342","tag-2097","tag-3343","tag-1806","tag-2706","tag-3342","tag-2322","tag-1813"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/14323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=14323"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/14323\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media\/9049"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=14323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=14323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=14323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}