{"id":73,"date":"2026-06-04T16:00:29","date_gmt":"2026-06-04T08:00:29","guid":{"rendered":"http:\/\/8.137.197.254\/?p=73"},"modified":"2026-06-04T16:00:29","modified_gmt":"2026-06-04T08:00:29","slug":"vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/","title":{"rendered":"vue2 \u96f6\u57fa\u7840\u6559\u7a0b"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E4%B8%80%E3%80%81%E5%AD%A6%E5%89%8D%E5%87%86%E5%A4%87\" >\u4e00\u3001\u5b66\u524d\u51c6\u5907<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E4%BD%A0%E9%9C%80%E8%A6%81%E6%8E%8C%E6%8F%A1%E7%9A%84%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86\" >1. \u4f60\u9700\u8981\u638c\u63e1\u7684\u524d\u7f6e\u77e5\u8bc6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#2_%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85\" >2. \u73af\u5883\u5b89\u88c5<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E4%BA%8C%E3%80%81%E7%AC%AC%E4%B8%80%E7%AB%A0%EF%BC%9AVue2_%E6%A0%B8%E5%BF%83%E5%9F%BA%E7%A1%80\" >\u4e8c\u3001\u7b2c\u4e00\u7ae0\uff1aVue2 \u6838\u5fc3\u57fa\u7840<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA_Vue_%E9%A1%B9%E7%9B%AE\" >1. \u521b\u5efa\u7b2c\u4e00\u4e2a Vue \u9879\u76ee<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#2_Vue_%E5%AE%9E%E4%BE%8B%E4%B8%8E%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95\" >2. Vue \u5b9e\u4f8b\u4e0e\u6a21\u677f\u8bed\u6cd5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#3_%E6%8C%87%E4%BB%A4%E5%A4%A7%E5%85%A8%EF%BC%88%E9%AB%98%E9%A2%91%E5%BF%85%E8%80%83%EF%BC%89\" >3. \u6307\u4ee4\u5927\u5168\uff08\u9ad8\u9891\u5fc5\u8003\uff09<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E4%B8%89%E3%80%81%E7%AC%AC%E4%BA%8C%E7%AB%A0%EF%BC%9AVue_%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95\" >\u4e09\u3001\u7b2c\u4e8c\u7ae0\uff1aVue \u6570\u636e\u4e0e\u65b9\u6cd5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_data_%E5%BF%85%E9%A1%BB%E6%98%AF%E5%87%BD%E6%95%B0\" >1. data \u5fc5\u987b\u662f\u51fd\u6570<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#2_methods_%E6%96%B9%E6%B3%95\" >2. methods \u65b9\u6cd5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#3_%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7_computed%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89\" >3. \u8ba1\u7b97\u5c5e\u6027 computed\uff08\u91cd\u8981\uff09<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#4_%E4%BE%A6%E5%90%AC%E5%99%A8_watch\" >4. \u4fa6\u542c\u5668 watch<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E5%9B%9B%E3%80%81%E7%AC%AC%E4%B8%89%E7%AB%A0%EF%BC%9A%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89\" >\u56db\u3001\u7b2c\u4e09\u7ae0\uff1a\u7ec4\u4ef6\u5316\u5f00\u53d1\uff08\u91cd\u8981\uff09<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E4%B8%8E%E4%BD%BF%E7%94%A8\" >1. \u7ec4\u4ef6\u5b9a\u4e49\u4e0e\u4f7f\u7528<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#2_%E7%88%B6%E4%BC%A0%E5%AD%90_props\" >2. \u7236\u4f20\u5b50 props<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#3_%E5%AD%90%E4%BC%A0%E7%88%B6_emit\" >3. \u5b50\u4f20\u7236 $emit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#4_%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1\" >4. \u5144\u5f1f\u7ec4\u4ef6\u901a\u4fe1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#5_%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%EF%BC%88%E5%BF%85%E8%80%83%EF%BC%89\" >5. \u751f\u547d\u5468\u671f\uff08\u5fc5\u8003\uff09<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E4%BA%94%E3%80%81%E7%AC%AC%E5%9B%9B%E7%AB%A0%EF%BC%9AVue_Router_%E8%B7%AF%E7%94%B1\" >\u4e94\u3001\u7b2c\u56db\u7ae0\uff1aVue Router \u8def\u7531<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E5%AE%89%E8%A3%85\" >1. \u5b89\u88c5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#2_%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE\" >2. \u8def\u7531\u914d\u7f6e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#3_%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC\" >3. \u8def\u7531\u8df3\u8f6c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#4_%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82\" >4. \u8def\u7531\u4f20\u53c2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#5_%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB\" >5. \u8def\u7531\u5b88\u536b<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E5%85%AD%E3%80%81%E7%AC%AC%E4%BA%94%E7%AB%A0%EF%BC%9AVuex_%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86\" >\u516d\u3001\u7b2c\u4e94\u7ae0\uff1aVuex \u72b6\u6001\u7ba1\u7406<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E5%AE%89%E8%A3%85-2\" >1. \u5b89\u88c5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#2_%E4%BA%94%E5%A4%A7%E6%A0%B8%E5%BF%83\" >2. \u4e94\u5927\u6838\u5fc3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#3_%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8\" >3. \u57fa\u7840\u4f7f\u7528<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E4%B8%83%E3%80%81%E7%AC%AC%E5%85%AD%E7%AB%A0%EF%BC%9A%E6%8F%92%E6%A7%BD_slot\" >\u4e03\u3001\u7b2c\u516d\u7ae0\uff1a\u63d2\u69fd slot<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E6%8F%92%E6%A7%BD_slot\" >1. \u63d2\u69fd slot<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E5%85%AB%E3%80%81%E7%AC%AC%E4%B8%83%E7%AB%A0%EF%BC%9Aaxios_%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82\" >\u516b\u3001\u7b2c\u4e03\u7ae0\uff1aaxios \u7f51\u7edc\u8bf7\u6c42<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#%E4%B9%9D%E3%80%81%E7%AC%AC%E5%85%AB%E7%AB%A0%EF%BC%9AVue_%E9%A1%B9%E7%9B%AE%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%E5%AE%9E%E6%88%98\" >\u4e5d\u3001\u7b2c\u516b\u7ae0\uff1aVue \u9879\u76ee\u5de5\u7a0b\u5316\u4e0e\u5b9e\u6218<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/wanyi.art\/index.php\/2026\/06\/04\/vue2-%e9%9b%b6%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b\/#1_%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%84%E8%8C%83\" >1. \u9879\u76ee\u7ed3\u6784\u89c4\u8303<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%B8%80%E3%80%81%E5%AD%A6%E5%89%8D%E5%87%86%E5%A4%87\"><\/span>\u4e00\u3001\u5b66\u524d\u51c6\u5907<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E4%BD%A0%E9%9C%80%E8%A6%81%E6%8E%8C%E6%8F%A1%E7%9A%84%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86\"><\/span>1. \u4f60\u9700\u8981\u638c\u63e1\u7684\u524d\u7f6e\u77e5\u8bc6<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML \/ CSS \/ JavaScript\uff08ES6 \u91cd\u70b9\uff09<\/li>\n\n\n\n<li>\u57fa\u672c\u547d\u4ee4\u884c\u64cd\u4f5c<\/li>\n\n\n\n<li>\u65e0\u9700 Vue \u57fa\u7840\u3001\u65e0\u9700\u6846\u67b6\u57fa\u7840<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85\"><\/span>2. \u73af\u5883\u5b89\u88c5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5b89\u88c5 <strong>Node.js<\/strong>\uff08\u81ea\u5e26 npm\uff09<\/li>\n\n\n\n<li>\u5b89\u88c5 Vue \u811a\u624b\u67b6\uff1a<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">bash<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install -g @vue\/cli<\/pre>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u68c0\u67e5\u662f\u5426\u5b89\u88c5\u6210\u529f\uff1a<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">bash<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">vue --version<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%BA%8C%E3%80%81%E7%AC%AC%E4%B8%80%E7%AB%A0%EF%BC%9AVue2_%E6%A0%B8%E5%BF%83%E5%9F%BA%E7%A1%80\"><\/span>\u4e8c\u3001\u7b2c\u4e00\u7ae0\uff1aVue2 \u6838\u5fc3\u57fa\u7840<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA_Vue_%E9%A1%B9%E7%9B%AE\"><\/span>1. \u521b\u5efa\u7b2c\u4e00\u4e2a Vue \u9879\u76ee<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">vue create vue2-demo<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u9009\u62e9\uff1a<strong>Default ([Vue 2] babel, eslint)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fdb\u5165\u9879\u76ee\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cd vue2-demo<br>npm run serve<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Vue_%E5%AE%9E%E4%BE%8B%E4%B8%8E%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95\"><\/span>2. Vue \u5b9e\u4f8b\u4e0e\u6a21\u677f\u8bed\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;template&gt;<br>  &lt;div id=\"app\"&gt;<br> &nbsp;  &lt;!-- \u63d2\u503c\u8868\u8fbe\u5f0f --&gt;<br> &nbsp;  &lt;h1&gt;{{ msg }}&lt;\/h1&gt;<br>  &lt;\/div&gt;<br>&lt;\/template&gt;<br>\u200b<br>&lt;script&gt;<br>export default {<br>  data() {<br> &nbsp;  return {<br> &nbsp; &nbsp;  msg: \"\u6b22\u8fce\u52a0\u5165vue2\"<br> &nbsp;  }<br>  }<br>}<br>&lt;\/script&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E6%8C%87%E4%BB%A4%E5%A4%A7%E5%85%A8%EF%BC%88%E9%AB%98%E9%A2%91%E5%BF%85%E8%80%83%EF%BC%89\"><\/span>3. \u6307\u4ee4\u5927\u5168\uff08\u9ad8\u9891\u5fc5\u8003\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>v-bind:<\/code> \u7ed1\u5b9a\u5c5e\u6027\uff08\u7b80\u5199 <code>:<\/code>\uff09<\/li>\n\n\n\n<li><code>v-model<\/code> \u53cc\u5411\u7ed1\u5b9a<\/li>\n\n\n\n<li><code>v-if<\/code> \/ <code>v-else<\/code> \/ <code>v-else-if<\/code> \u6761\u4ef6\u6e32\u67d3<\/li>\n\n\n\n<li><code>v-show<\/code> \u663e\u793a\u9690\u85cf\uff08\u5207\u6362 display\uff09<\/li>\n\n\n\n<li><code>v-for<\/code> \u5217\u8868\u6e32\u67d3\uff08\u5fc5\u987b\u52a0 key\uff09<\/li>\n\n\n\n<li><code>v-on:<\/code> \u7ed1\u5b9a\u4e8b\u4ef6\uff08\u7b80\u5199 <code>@<\/code>\uff09<\/li>\n\n\n\n<li><code>v-text<\/code> \/ <code>v-html<\/code> \u6e32\u67d3\u6587\u672c \/ HTML<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;input v-model=\"msg\" \/&gt;<br>&lt;button @click=\"changeMsg\"&gt;\u70b9\u51fb&lt;\/button&gt;<br>\u200b<br>&lt;div v-if=\"isShow\"&gt;\u663e\u793a&lt;\/div&gt;<br>&lt;div v-else&gt;\u9690\u85cf&lt;\/div&gt;<br>\u200b<br>&lt;ul&gt;<br>  &lt;li v-for=\"(item, index) in list\" :key=\"index\"&gt;<br> &nbsp;  {{ item }}<br>  &lt;\/li&gt;<br>&lt;\/ul&gt;<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%B8%89%E3%80%81%E7%AC%AC%E4%BA%8C%E7%AB%A0%EF%BC%9AVue_%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95\"><\/span>\u4e09\u3001\u7b2c\u4e8c\u7ae0\uff1aVue \u6570\u636e\u4e0e\u65b9\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_data_%E5%BF%85%E9%A1%BB%E6%98%AF%E5%87%BD%E6%95%B0\"><\/span>1. data \u5fc5\u987b\u662f\u51fd\u6570<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">data() {<br>  return {<br> &nbsp;  name: \"Vue\"<br>  }<br>}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_methods_%E6%96%B9%E6%B3%95\"><\/span>2. methods \u65b9\u6cd5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">methods: {<br>  sayHi() {<br> &nbsp;  alert(this.name)<br>  }<br>}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7_computed%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89\"><\/span>3. \u8ba1\u7b97\u5c5e\u6027 computed\uff08\u91cd\u8981\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9002\u5408\u590d\u6742\u903b\u8f91\u3001\u6709\u7f13\u5b58<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">computed: {\n  reversedMsg() {\n    return this.msg.split('').reverse().join('')\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_%E4%BE%A6%E5%90%AC%E5%99%A8_watch\"><\/span>4. \u4fa6\u542c\u5668 watch<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u76d1\u542c\u6570\u636e\u53d8\u5316\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">watch: {\n  msg(newVal, oldVal) {\n    console.log(\"\u4f60\u53d8\u4e86\")\n  }\n}<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%9B%9B%E3%80%81%E7%AC%AC%E4%B8%89%E7%AB%A0%EF%BC%9A%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89\"><\/span>\u56db\u3001\u7b2c\u4e09\u7ae0\uff1a\u7ec4\u4ef6\u5316\u5f00\u53d1\uff08\u91cd\u8981\uff09<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E4%B8%8E%E4%BD%BF%E7%94%A8\"><\/span>1. \u7ec4\u4ef6\u5b9a\u4e49\u4e0e\u4f7f\u7528<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u521b\u5efa <code>components\/Hello.vue<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;template&gt;\n  &lt;div&gt;\u6211\u662f\u5b50\u7ec4\u4ef6&lt;\/div&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7236\u7ec4\u4ef6\u4f7f\u7528\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;template&gt;\n  &lt;Hello \/&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport Hello from '.\/components\/Hello.vue'\nexport default {\n}\n&lt;\/script&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%E7%88%B6%E4%BC%A0%E5%AD%90_props\"><\/span>2. \u7236\u4f20\u5b50 props<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7236\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;Child :title=\"msg\" \/&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b50\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">props: {\n  title: {\n    type: String,\n    required: true\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E5%AD%90%E4%BC%A0%E7%88%B6_emit\"><\/span>3. \u5b50\u4f20\u7236 $emit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b50\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">this.$emit('sendMsg', '\u6211\u662f\u5b50\u7ec4\u4ef6\u6570\u636e')<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7236\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;Child @sendMsg=\"handle\" \/&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1\"><\/span>4. \u5144\u5f1f\u7ec4\u4ef6\u901a\u4fe1<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e8b\u4ef6\u603b\u7ebf\uff08bus\uff09<\/li>\n\n\n\n<li>Vuex\uff08\u63a8\u8350\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%EF%BC%88%E5%BF%85%E8%80%83%EF%BC%89\"><\/span>5. \u751f\u547d\u5468\u671f\uff08\u5fc5\u8003\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">8 \u5927\u751f\u547d\u5468\u671f\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>beforeCreate<\/li>\n\n\n\n<li>created <strong>\uff08\u53d1\u9001\u8bf7\u6c42\u5e38\u7528\uff09<\/strong><\/li>\n\n\n\n<li>beforeMount<\/li>\n\n\n\n<li>mounted <strong>\uff08DOM \u64cd\u4f5c\uff09<\/strong><\/li>\n\n\n\n<li>beforeUpdate<\/li>\n\n\n\n<li>updated<\/li>\n\n\n\n<li>beforeDestroy<\/li>\n\n\n\n<li>destroyed <strong>\uff08\u6e05\u9664\u5b9a\u65f6\u5668\uff09<\/strong><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%BA%94%E3%80%81%E7%AC%AC%E5%9B%9B%E7%AB%A0%EF%BC%9AVue_Router_%E8%B7%AF%E7%94%B1\"><\/span>\u4e94\u3001\u7b2c\u56db\u7ae0\uff1aVue Router \u8def\u7531<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E5%AE%89%E8%A3%85\"><\/span>1. \u5b89\u88c5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install vue-router@3<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE\"><\/span>2. \u8def\u7531\u914d\u7f6e<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import Vue from 'vue'\nimport VueRouter from 'vue-router'\nimport Home from '.\/views\/Home.vue'\n\nVue.use(VueRouter)\n\nconst routes = [\n  { path: '\/', component: Home },\n  { path: '\/about', component: () =&gt; import('.\/views\/About.vue') }\n]\n\nconst router = new VueRouter({ routes })\nexport default router<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC\"><\/span>3. \u8def\u7531\u8df3\u8f6c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">vue<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;router-link to=\"\/about\"&gt;\u8df3\u8f6c&lt;\/router-link&gt;\n\n&lt;button @click=\"$router.push('\/about')\"&gt;\u7f16\u7a0b\u5f0f\u5bfc\u822a&lt;\/button&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82\"><\/span>4. \u8def\u7531\u4f20\u53c2<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>query\uff1a<code>\/user?id=1<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB\"><\/span>5. \u8def\u7531\u5b88\u536b<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5168\u5c40\u5b88\u536b\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">router.beforeEach((to, from, next) =&gt; {\n  if(to.path === '\/cart' &amp;&amp; !token) next('\/login')\n  else next()\n})<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%85%AD%E3%80%81%E7%AC%AC%E4%BA%94%E7%AB%A0%EF%BC%9AVuex_%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86\"><\/span>\u516d\u3001\u7b2c\u4e94\u7ae0\uff1aVuex \u72b6\u6001\u7ba1\u7406<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E5%AE%89%E8%A3%85-2\"><\/span>1. \u5b89\u88c5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install vuex@3<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%E4%BA%94%E5%A4%A7%E6%A0%B8%E5%BF%83\"><\/span>2. \u4e94\u5927\u6838\u5fc3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>state\uff1a\u6570\u636e<\/li>\n\n\n\n<li>mutations\uff1a\u4fee\u6539\u6570\u636e\uff08\u540c\u6b65\uff09<\/li>\n\n\n\n<li>actions\uff1a\u5f02\u6b65\u64cd\u4f5c<\/li>\n\n\n\n<li>getters\uff1a\u8ba1\u7b97\u5c5e\u6027<\/li>\n\n\n\n<li>modules\uff1a\u6a21\u5757\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8\"><\/span>3. \u57fa\u7840\u4f7f\u7528<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import Vue from 'vue'<br>import Vuex from 'vuex'<br>Vue.use(Vuex)<br>\u200b<br>export default new Vuex.Store({<br>  state: {<br> &nbsp;  count: 0<br>  },<br>  mutations: {<br> &nbsp;  add(state) { state.count++ }<br>  },<br>  actions: {<br> &nbsp;  asyncAdd({commit}) {<br> &nbsp; &nbsp;  setTimeout(()=&gt;{commit('add')},1000)<br> &nbsp;  }<br>  },<br>  getters: {<br> &nbsp;  doubleCount(state) { return state.count*2 }<br>  }<br>})<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">this.$store.state.count<br>this.$store.commit('add')<br>this.$store.dispatch('asyncAdd')<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%B8%83%E3%80%81%E7%AC%AC%E5%85%AD%E7%AB%A0%EF%BC%9A%E6%8F%92%E6%A7%BD_slot\"><\/span>\u4e03\u3001\u7b2c\u516d\u7ae0\uff1a\u63d2\u69fd slot<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E6%8F%92%E6%A7%BD_slot\"><\/span>1. \u63d2\u69fd slot<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u666e\u901a\u63d2\u69fd<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\u7559\u4e00\u4e2a\u5751\uff0c\u7236\u7ec4\u4ef6\u586b\u5185\u5bb9<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\uff08Child.vue\uff09<\/li>\n\n\n\n<li>&lt;template><br>\u00a0&lt;div><br>\u00a0 \u00a0&lt;h3>\u6211\u662f\u5b50\u7ec4\u4ef6&lt;\/h3><br>\u00a0 \u00a0&lt;!&#8211; \u666e\u901a\u63d2\u69fd\uff1a\u7559\u5751 &#8211;><br>\u00a0 \u00a0&lt;slot>&lt;\/slot><br>\u00a0&lt;\/div><br>&lt;\/template>\u7236\u7ec4\u4ef6&lt;template><br>\u00a0&lt;Child><br>\u00a0 \u00a0&lt;!&#8211; \u586b\u5230\u5b50\u7ec4\u4ef6\u7684 slot \u91cc &#8211;><br>\u00a0 \u00a0&lt;p>\u6211\u662f\u7236\u7ec4\u4ef6\u586b\u8fdb\u6765\u7684\u5185\u5bb9&lt;\/p><br>\u00a0&lt;\/Child><br>&lt;\/template><\/li>\n\n\n\n<li>\u5177\u540d\u63d2\u69fd<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\u7559\u591a\u4e2a\u5751\uff0c\u6bcf\u4e2a\u5751\u8d77\u540d\u5b57\uff0c\u7236\u7ec4\u4ef6\u5bf9\u53f7\u5165\u5ea7<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\uff08Child.vue\uff09vue&lt;template><br>&lt;div><br>\u00a0 &lt;!&#8211; \u5934\u90e8\u5751 &#8211;><br>\u00a0 &lt;slot name=&#8221;header&#8221;>&lt;\/slot><br>\u200b<br>\u00a0 &lt;!&#8211; \u4e2d\u95f4\u5751\uff08\u9ed8\u8ba4\uff09 &#8211;><br>\u00a0 &lt;slot>&lt;\/slot><br>\u200b<br>\u00a0 &lt;!&#8211; \u5e95\u90e8\u5751 &#8211;><br>\u00a0 &lt;slot name=&#8221;footer&#8221;>&lt;\/slot><br>&lt;\/div><br>&lt;\/template>\u7236\u7ec4\u4ef6\uff08Vue2 \u5199\u6cd5\uff1aslot=&#8221;\u540d\u5b57&#8221;\uff09vue&lt;template><br>&lt;Child><br>\u00a0 &lt;div slot=&#8221;header&#8221;><br>\u00a0 \u00a0 \u6211\u662f\u5934\u90e8\u5185\u5bb9<br>\u00a0 &lt;\/div><br>\u200b<br>\u00a0 &lt;div slot=&#8221;footer&#8221;><br>\u00a0 \u00a0 \u6211\u662f\u5e95\u90e8\u5185\u5bb9<br>\u00a0 &lt;\/div><br>\u200b<br>\u00a0 &lt;!&#8211; \u4e0d\u5199slot\u5c31\u662f\u9ed8\u8ba4\u63d2\u69fd &#8211;><br>\u00a0 &lt;div>\u6211\u662f\u4e2d\u95f4\u5185\u5bb9&lt;\/div><br>&lt;\/Child><br>&lt;\/template><\/li>\n\n\n\n<li>\u4f5c\u7528\u57df\u63d2\u69fd<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\u628a\u81ea\u5df1\u7684\u6570\u636e\uff0c\u4f20\u7ed9\u7236\u7ec4\u4ef6\u7684\u63d2\u69fd\u5185\u5bb9\u4f7f\u7528<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\uff08Child.vue\uff09\u628a\u6570\u636e\u7ed1\u5728 slot \u4e0a\uff1avue&lt;template><br>&lt;div><br>\u00a0 &lt;!&#8211; \u5b50\u7ec4\u4ef6\u628a\u6570\u636e\u4f20\u7ed9\u63d2\u69fd &#8211;><br>\u00a0 &lt;slot :user=&#8221;user&#8221; :age=&#8221;18&#8243;>&lt;\/slot><br>&lt;\/div><br>&lt;\/template><br>\u200b<br>&lt;script><br>export default {<br>data() {<br>\u00a0 return {<br>\u00a0 \u00a0 user: { name: &#8220;\u5f20\u4e09&#8221; }<br>\u00a0 }<br>}<br>}<br>&lt;\/script>\u7236\u7ec4\u4ef6\uff08Vue2 \u5199\u6cd5\uff1aslot-scope\uff09vue&lt;template><br>&lt;Child><br>\u00a0 &lt;!&#8211; slot-scope \u63a5\u6536\u5b50\u7ec4\u4ef6\u4f20\u8fc7\u6765\u7684\u6570\u636e &#8211;><br>\u00a0 &lt;template slot-scope=&#8221;scope&#8221;><br>\u00a0 \u00a0 &lt;p>\u59d3\u540d\uff1a{{ scope.user.name }}&lt;\/p><br>\u00a0 \u00a0 &lt;p>\u5e74\u9f84\uff1a{{ scope.age }}&lt;\/p><br>\u00a0 &lt;\/template><br>&lt;\/Child><br>&lt;\/template><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%85%AB%E3%80%81%E7%AC%AC%E4%B8%83%E7%AB%A0%EF%BC%9Aaxios_%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82\"><\/span>\u516b\u3001\u7b2c\u4e03\u7ae0\uff1aaxios \u7f51\u7edc\u8bf7\u6c42<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd0\u884c<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install axios<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c01\u88c5\u8bf7\u6c42\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import axios from 'axios'<br>const request = axios.create({<br>  baseURL: 'http:\/\/xxx.com\/api'<br>})<br>\u200b<br>request.interceptors.request.use(config=&gt;{<br>  \/\/ \u8bf7\u6c42\u5934\u52a0token<br>  return config<br>})<br>\u200b<br>export default request<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%B9%9D%E3%80%81%E7%AC%AC%E5%85%AB%E7%AB%A0%EF%BC%9AVue_%E9%A1%B9%E7%9B%AE%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%E5%AE%9E%E6%88%98\"><\/span>\u4e5d\u3001\u7b2c\u516b\u7ae0\uff1aVue \u9879\u76ee\u5de5\u7a0b\u5316\u4e0e\u5b9e\u6218<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%84%E8%8C%83\"><\/span>1. \u9879\u76ee\u7ed3\u6784\u89c4\u8303<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">plaintext<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">src\/<br>\u251c\u2500\u2500 api\/ &nbsp; &nbsp; &nbsp; \u63a5\u53e3<br>\u251c\u2500\u2500 assets\/ &nbsp;  \u9759\u6001\u8d44\u6e90<br>\u251c\u2500\u2500 components\/\u516c\u5171\u7ec4\u4ef6<br>\u251c\u2500\u2500 router\/ &nbsp;  \u8def\u7531<br>\u251c\u2500\u2500 store\/ &nbsp; &nbsp; vuex<br>\u251c\u2500\u2500 utils\/ &nbsp; &nbsp; \u5de5\u5177<br>\u251c\u2500\u2500 views\/ &nbsp; &nbsp; \u9875\u9762<br>\u2514\u2500\u2500 App.vue<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u3001\u5b66\u524d\u51c6\u5907 1. \u4f60\u9700\u8981\u638c\u63e1\u7684\u524d\u7f6e\u77e5\u8bc6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[9],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-9"],"views":10,"_links":{"self":[{"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":2,"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/posts\/73\/revisions\/75"}],"wp:attachment":[{"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wanyi.art\/index.php\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}