{"id":527,"date":"2023-12-18T09:53:09","date_gmt":"2023-12-18T01:53:09","guid":{"rendered":"http:\/\/ericw.top\/?p=527"},"modified":"2024-01-02T09:28:29","modified_gmt":"2024-01-02T01:28:29","slug":"vue-%e5%bf%ab%e9%80%9f%e4%b8%8a%e6%89%8b","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=527","title":{"rendered":"Vue \u5feb\u901f\u4e0a\u624b"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"toc-0\">Vue \u5feb\u901f\u4e0a\u624b<\/h1>\n\n\n\n<p><strong>\u521b\u5efa Vue \u5b9e\u4f8b\uff0c\u521d\u59cb\u5316\u6e32\u67d3<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702862839029-300x74.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-1\">\u521b\u5efaVue\u5b9e\u4f8b<\/h2>\n\n\n\n<p><strong>\u521b\u5efa Vue \u5b9e\u4f8b\uff0c\u521d\u59cb\u5316\u6e32\u67d3\u7684\u6838\u5fc3\u6b65\u9aa4\uff1a<\/strong> <\/p>\n\n\n\n<ol>\n<li>\n<p>\u51c6\u5907\u5bb9\u5668 <\/p>\n<\/li>\n\n\n\n<li>\n<p>\u5f15\u5305 (\u5b98\u7f51) - \u5f00\u53d1\u7248\u672c \/ \u751f\u4ea7\u7248\u672c <\/p>\n<\/li>\n\n\n\n<li>\n<p>\u521b\u5efa Vue \u5b9e\u4f8b new Vue() <\/p>\n<\/li>\n\n\n\n<li>\n<p>\u6307\u5b9a\u914d\u7f6e\u9879 el data =&gt; \u6e32\u67d3\u6570\u636e <\/p>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2460 el \u6307\u5b9a\u6302\u8f7d\u70b9\uff0c\u9009\u62e9\u5668\u6307\u5b9a\u63a7\u5236\u7684\u662f\u54ea\u4e2a\u76d2\u5b50 <\/p>\n\n\n\n<p>\u2461 data \u63d0\u4f9b\u6570\u636e<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-2\">\u63d2\u503c\u8868\u8fbe\u5f0f<\/h2>\n\n\n\n<p><strong>\u63d2\u503c\u8868\u8fbe\u5f0f<\/strong>\u662f\u4e00\u79cdVue\u7684\u6a21\u677f\u5f0f\u8bed\u6cd5<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702862937816-300x110.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>1. \u4f5c\u7528:<\/strong> \u5229\u7528\u8868\u8fbe\u5f0f\u8fdb\u884c\u63d2\u503c\uff0c<strong>\u6e32\u67d3<\/strong>\u5230\u9875\u9762\u4e2d <\/p>\n\n\n\n<p><strong>\u8868\u8fbe\u5f0f\uff1a\u662f\u53ef\u4ee5\u88ab\u6c42\u503c\u7684\u4ee3\u7801\uff0cJS\u5f15\u64ce\u4f1a\u5c06\u5176\u8ba1\u7b97\u51fa\u4e00\u4e2a\u7ed3\u679c<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863011593-300x79.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>2. \u8bed\u6cd5\uff1a<\/strong><code class=\"prettyprint\" >{{ \u8868\u8fbe\u5f0f }}<\/code><\/p>\n\n\n\n<p><strong>3. \u6ce8\u610f\u70b9\uff1a<\/strong> <\/p>\n\n\n\n<p>\uff081\uff09\u4f7f\u7528\u7684\u6570\u636e\u5fc5\u987b\u5b58\u5728 <code class=\"prettyprint\" >\uff08data\uff09 <\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;p&gt;{{ hobby }}&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>\uff082\uff09\u652f\u6301\u7684\u662f\u8868\u8fbe\u5f0f\uff0c\u800c\u975e\u8bed\u53e5\uff0c\u6bd4\u5982\uff1a<code class=\"prettyprint\" >if for ... <\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;p&gt;{{ if }}&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>\uff083\uff09\u4e0d\u80fd\u5728\u6807\u7b7e\u5c5e\u6027\u4e2d\u4f7f\u7528<code class=\"prettyprint\" > {{ }} <\/code>\u63d2\u503c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;p title=&quot;{{ username }}&quot;&gt;\u6211\u662fp\u6807\u7b7e&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-3\">Vue\u6838\u5fc3\u7279\u6027\uff1a\u54cd\u5e94\u5f0f<\/h2>\n\n\n\n<p><strong>\u6570\u636e\u7684\u54cd\u5e94\u5f0f\u5904\u7406<\/strong> \u2192 \u54cd\u5e94\u5f0f\uff1a<strong>\u6570\u636e\u53d8\u5316\uff0c\u89c6\u56fe\u81ea\u52a8\u66f4\u65b0<\/strong><\/p>\n\n\n\n<p><strong>\u2460 \u8bbf\u95ee\u6570\u636e\uff1a <code class=\"prettyprint\" >&quot;\u5b9e\u4f8b.\u5c5e\u6027\u540d&quot;<\/code><\/strong> <\/p>\n\n\n\n<p><strong>\u2461 \u4fee\u6539\u6570\u636e\uff1a <code class=\"prettyprint\" >&quot;\u5b9e\u4f8b.\u5c5e\u6027\u540d&quot; = &quot;\u503c&quot;<\/code><\/strong><\/p>\n\n\n\n<p>\u6570\u636e\u6539\u53d8\uff0c\u89c6\u56fe\u4f1a\u81ea\u52a8\u66f4\u65b0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"219\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863363468-1024x219.png\" alt=\"\" class=\"wp-image-531\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863363468-1024x219.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863363468-300x64.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863363468-768x164.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863363468.png 1217w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>\u805a\u7126\u4e8e\u6570\u636e \u2192 \u6570\u636e\u9a71\u52a8\u89c6\u56fe<\/strong> <\/p>\n\n\n\n<p>\u4f7f\u7528 Vue \u5f00\u53d1\uff0c\u5173\u6ce8<strong>\u4e1a\u52a1\u7684\u6838\u5fc3\u903b\u8f91<\/strong>\uff0c\u6839\u636e\u4e1a\u52a1<strong>\u4fee\u6539\u6570\u636e<\/strong>\u5373\u53ef<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-4\">\u5b89\u88c5Vue\u5f00\u53d1\u8005\u5de5\u5177<\/h2>\n\n\n\n<p>\uff081\uff09\u901a\u8fc7\u8c37\u6b4c\u5e94\u7528\u5546\u5e97\u5b89\u88c5 \uff08\u56fd\u5916\u7f51\u7ad9\uff09 <\/p>\n\n\n\n<p>\uff082\uff09\u6781\u7b80\u63d2\u4ef6: \u4e0b\u8f7d \u2192 \u5f00\u53d1\u8005\u6a21\u5f0f \u2192 \u62d6\u62fd\u5b89\u88c5 \u2192 \u63d2\u4ef6\u8be6\u60c5\u5141\u8bb8\u8bbf\u95ee\u6587\u4ef6 <\/p>\n\n\n\n<p>\u200b           <a href=\"https:\/\/chrome.zzzmh.cn\/index\">https:\/\/chrome.zzzmh.cn\/index<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"336\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863497892-1024x336.png\" alt=\"\" class=\"wp-image-532\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863497892-1024x336.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863497892-300x98.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863497892-768x252.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863497892.png 1313w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>\u5b89\u88c5 Vue \u5f00\u53d1\u8005\u5de5\u5177\uff1a\u88c5\u63d2\u4ef6\u8c03\u8bd5 Vue \u5e94\u7528<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"375\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863517634-1024x375.png\" alt=\"\" class=\"wp-image-533\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863517634-1024x375.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863517634-300x110.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863517634-768x281.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702863517634.png 1258w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-5\">\u603b\u7ed3<\/h2>\n\n\n\n<p><strong>\u63d2\u503c\u8868\u8fbe\u5f0f\u7684\u4f5c\u7528\u662f\u4ec0\u4e48\uff1f<\/strong> <\/p>\n\n\n\n<p>\u5229\u7528\u8868\u8fbe\u5f0f\u8fdb\u884c\u63d2\u503c\uff0c\u5c06\u6570\u636e\u6e32\u67d3\u9875\u9762\u4e2d <\/p>\n\n\n\n<p><strong>\u8bed\u6cd5\u683c\u5f0f\uff1f<\/strong> <\/p>\n\n\n\n<p><code class=\"prettyprint\" >{{ \u8868\u8fbe\u5f0f }} <\/code><\/p>\n\n\n\n<p><strong>\u63d2\u503c\u8868\u8fbe\u5f0f\u7684\u6ce8\u610f\u70b9\uff1a<\/strong> <\/p>\n\n\n\n<p>\u2460 \u4f7f\u7528\u7684\u6570\u636e\u8981\u5b58\u5728 \uff08data\uff09 <\/p>\n\n\n\n<p>\u2461 \u652f\u6301\u7684\u662f\u8868\u8fbe\u5f0f\uff0c\u800c\u975e\u8bed\u53e5 if ... for <\/p>\n\n\n\n<p>\u2462 \u4e0d\u80fd\u5728\u6807\u7b7e\u5c5e\u6027\u91cc\u9762\u4f7f\u7528<\/p>\n\n\n\n<p><strong>\u4ec0\u4e48\u662f\u54cd\u5e94\u5f0f\u5462\uff1f<\/strong> <\/p>\n\n\n\n<p>\u6570\u636e\u6539\u53d8\uff0c\u89c6\u56fe\u81ea\u52a8\u66f4\u65b0 <\/p>\n\n\n\n<p>\u4f7f\u7528 Vue \u5f00\u53d1 \u2192 \u4e13\u6ce8\u4e8e\u4e1a\u52a1\u6838\u5fc3\u903b\u8f91 \u5373\u53ef <\/p>\n\n\n\n<p><strong>\u5982\u4f55\u8bbf\u95ee\u6216\u4fee\u6539\u6570\u636e\u5462\uff1f<\/strong> <\/p>\n\n\n\n<p>data\u4e2d\u7684\u6570\u636e, \u6700\u7ec8\u4f1a\u88ab\u6dfb\u52a0\u5230\u5b9e\u4f8b\u4e0a <\/p>\n\n\n\n<p>\u2460 \u8bbf\u95ee\u6570\u636e\uff1a \"\u5b9e\u4f8b.\u5c5e\u6027\u540d\" <\/p>\n\n\n\n<p>\u2461 \u4fee\u6539\u6570\u636e\uff1a \"\u5b9e\u4f8b.\u5c5e\u6027\u540d\" = \"\u503c\"<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue \u5feb\u901f\u4e0a\u624b \u521b\u5efa Vue \u5b9e\u4f8b\uff0c\u521d\u59cb\u5316\u6e32\u67d3 \u521b\u5efaVue\u5b9e\u4f8b \u521b\u5efa Vue \u5b9e\u4f8b\uff0c\u521d\u59cb\u5316\u6e32\u67d3\u7684\u6838\u5fc3\u6b65\u9aa4\uff1a  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/527"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=527"}],"version-history":[{"count":2,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/527\/revisions"}],"predecessor-version":[{"id":594,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/527\/revisions\/594"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/531"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=527"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}