{"id":3021,"date":"2020-09-14T11:13:40","date_gmt":"2020-09-14T03:13:40","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3021"},"modified":"2026-08-18T12:35:32","modified_gmt":"2026-08-18T04:35:32","slug":"58%e9%81%93vue%e5%b8%b8%e8%a7%81%e9%9d%a2%e8%af%95%e9%a2%98%e9%9b%86%e9%94%a6%ef%bc%8c%e6%b6%b5%e7%9b%96%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3021","title":{"rendered":"58\u9053Vue\u5e38\u89c1\u9762\u8bd5\u9898\u96c6\u9526\uff0c\u6db5\u76d6\u5165\u95e8\u5230\u7cbe\u901a"},"content":{"rendered":"
\n

\u4e0b\u9762 58 \u9053\u9898\u4ece\u5165\u95e8\u6307\u4ee4\u4e00\u8def\u95ee\u5230\u751f\u547d\u5468\u671f\u3001\u8def\u7531\u548c Vuex\uff0c\u8986\u76d6\u65e5\u5e38\u5f00\u53d1\u548c\u9762\u8bd5\u9ad8\u9891\u70b9\u3002\u9898\u76ee\u5168\u90e8\u4fdd\u7559\uff0c\u7b54\u6848\u6309\u539f\u6587\u77e5\u8bc6\u70b9\u6574\u7406\uff0c\u65b9\u4fbf\u5bf9\u7167\u81ea\u6d4b\u3002<\/p>\n

\u5efa\u8bae\u5148\u628a\u57fa\u7840\u6307\u4ee4\u3001\u7ec4\u4ef6\u901a\u4fe1\u548c\u53cc\u5411\u7ed1\u5b9a\u8bb2\u987a\uff0c\u518d\u8865\u5de5\u7a0b\u5316\uff08vue-loader\u3001\u61d2\u52a0\u8f7d\u3001\u9996\u5c4f\uff09\u548c\u72b6\u6001\u7ba1\u7406\u3002\u4f5c\u8005 Lucky Girl\uff0c\u539f\u6587\u89c1\u77e5\u4e4e\u4e13\u680f\u3002<\/p>\n\n\n\n\n\n\n\n\n\n
\u5206\u7ec4<\/th>\n\u9898\u53f7<\/th>\n\u6293\u4ec0\u4e48<\/th>\n<\/tr>\n<\/thead>\n
\u57fa\u7840\u7528\u6cd5<\/td>\n1\u201325<\/td>\n\u6307\u4ee4\u3001props\u3001$emit\u3001v-if\/v-show<\/td>\n<\/tr>\n
\u5de5\u7a0b\u4e0e\u5b9e\u8df5<\/td>\n26\u201341<\/td>\n\u5c01\u88c5\u7ec4\u4ef6\u3001\u6253\u5305\u8def\u5f84\u3001slot\u3001axios<\/td>\n<\/tr>\n
\u751f\u547d\u5468\u671f<\/td>\n42\u201347<\/td>\n\u516b\u4e2a\u94a9\u5b50\u548c\u9002\u7528\u573a\u666f<\/td>\n<\/tr>\n
\u8def\u7531<\/td>\n48\u201355<\/td>\n\u52a8\u6001\u8def\u7531\u3001\u5bfc\u822a\u94a9\u5b50\u3001\u61d2\u52a0\u8f7d<\/td>\n<\/tr>\n
Vuex<\/td>\n56\u201358<\/td>\n\u4e94\u5c5e\u6027\u3001ajax \u653e\u54ea<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e00\u3001\u57fa\u7840\u7528\u6cd5<\/h2>\n

1. vue \u4f18\u70b9\uff1f<\/h3>\n
    \n
  • \n
    \u8f7b\u91cf\u7ea7\u6846\u67b6\uff1a\u53ea\u5173\u6ce8\u89c6\u56fe\u5c42\uff0c\u5927\u5c0f\u53ea\u6709\u51e0\u5341 kb<\/code><\/section>\n<\/li>\n
  • \n
    \u7b80\u5355\u6613\u5b66\uff1a\u56fd\u4eba\u5f00\u53d1\uff0c\u4e2d\u6587\u6587\u6863\uff0c\u6ca1\u6709\u8bed\u8a00\u969c\u788d<\/section>\n<\/li>\n
  • \n
    \u53cc\u5411\u6570\u636e\u7ed1\u5b9a\uff1a\u4fdd\u7559 angular \u7684\u7279\u70b9\uff0c\u6570\u636e\u64cd\u4f5c\u66f4\u7b80\u5355<\/section>\n<\/li>\n
  • \n
    \u7ec4\u4ef6\u5316\uff1a\u4fdd\u7559 react \u7684\u4f18\u70b9\uff0cHTML \u5c01\u88c5\u91cd\u7528\uff0c\u5355\u9875\u5e94\u7528\u6709\u4f18\u52bf<\/section>\n<\/li>\n
  • \n
    \u89c6\u56fe\u3001\u6570\u636e\u3001\u7ed3\u6784\u5206\u79bb\uff1a\u6539\u6570\u636e\u5373\u53ef\uff0c\u4e0d\u5fc5\u6539\u903b\u8f91\u4ee3\u7801<\/section>\n<\/li>\n
  • \n
    \u865a\u62df DOM\uff1a\u4e0d\u518d\u76f4\u63a5\u539f\u751f\u64cd\u4f5c\u8282\u70b9\uff0c\u6362\u4e00\u79cd\u65b9\u5f0f\u64cd\u4f5c DOM<\/section>\n<\/li>\n
  • \n
    \u8fd0\u884c\u901f\u5ea6\uff1a\u540c\u6837\u64cd\u4f5c\u865a\u62df DOM\uff0c\u76f8\u5bf9 react \u6709\u6027\u80fd\u4f18\u52bf<\/section>\n<\/li>\n<\/ul>\n

    2. vue \u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff1f<\/h3>\n

    \u901a\u8fc7 props<\/code>\u3002<\/p>\n

    3. \u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u4e8b\u4ef6\uff1f<\/h3>\n

    $emit<\/code> \u65b9\u6cd5\u3002<\/p>\n

    4. v-show \u548c v-if \u6307\u4ee4\u7684\u5171\u540c\u70b9\u548c\u4e0d\u540c\u70b9\uff1f<\/h3>\n

    \u5171\u540c\u70b9\uff1a<\/strong>\u90fd\u80fd\u63a7\u5236\u5143\u7d20\u663e\u793a\u548c\u9690\u85cf\u3002<\/p>\n

    \u4e0d\u540c\u70b9\uff1a<\/strong>v-show<\/code> \u672c\u8d28\u662f\u6539 CSS display: none<\/code>\uff0c\u53ea\u7f16\u8bd1\u4e00\u6b21\uff1bv-if<\/code> \u662f\u52a8\u6001\u589e\u5220 DOM\uff0c\u521d\u59cb\u4e3a false \u5219\u4e0d\u7f16\u8bd1\u3002\u9891\u7e41\u5207\u6362\u7528 v-show\uff08\u5207\u6362\u5f00\u9500\u5c0f\u3001\u521d\u59cb\u5f00\u9500\u5927\uff09\uff1b\u4e0d\u5e38\u5207\u6362\u7528 v-if\uff08\u521d\u59cb\u5f00\u9500\u5c0f\u3001\u5207\u6362\u5f00\u9500\u5927\uff09\u3002<\/p>\n

    5. \u5982\u4f55\u8ba9 CSS \u53ea\u5728\u5f53\u524d\u7ec4\u4ef6\u4e2d\u8d77\u4f5c\u7528\uff1f<\/h3>\n

    \u7ec4\u4ef6 style<\/code> \u4e0a\u52a0 scoped<\/code>\u3002<\/p>\n

    6. keep-alive \u7684\u4f5c\u7528\u662f\u4ec0\u4e48\uff1f<\/h3>\n

    <keep-alive><\/keep-alive><\/code> \u662f Vue \u5185\u7f6e\u7ec4\u4ef6\uff0c\u8ba9\u88ab\u5305\u542b\u7684\u7ec4\u4ef6\u4fdd\u7559\u72b6\u6001\uff0c\u6216\u907f\u514d\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n

    7. \u5982\u4f55\u83b7\u53d6 DOM\uff1f<\/h3>\n

    ref=\"domName\"<\/code>\uff0c\u7528\u6cd5 this.$refs.domName<\/code>\u3002<\/p>\n

    8. \u8bf4\u51fa\u51e0\u79cd vue \u6307\u4ee4\u548c\u7528\u6cd5\uff1f<\/h3>\n

    v-model<\/code> \u53cc\u5411\u7ed1\u5b9a\uff1bv-for<\/code> \u5faa\u73af\uff1bv-if<\/code> \/ v-show<\/code> \u663e\u793a\u9690\u85cf\uff1bv-on<\/code> \u4e8b\u4ef6\uff1bv-once<\/code> \u53ea\u7ed1\u5b9a\u4e00\u6b21\u3002<\/p>\n

    9. vue-loader \u662f\u4ec0\u4e48\uff1f\u7528\u9014\u6709\u54ea\u4e9b\uff1f<\/h3>\n

    vue \u6587\u4ef6\u52a0\u8f7d\u5668\uff0c\u628a template\/js\/style \u8f6c\u6210 js \u6a21\u5757\u3002js \u53ef\u5199 es6\uff0cstyle \u53ef\u7528 scss\/less\uff0ctemplate \u53ef\u52a0 jade \u7b49\u3002<\/p>\n

    10. \u4e3a\u4ec0\u4e48\u4f7f\u7528 key\uff1f<\/h3>\n

    \u7ed9\u6bcf\u4e2a\u8282\u70b9\u552f\u4e00\u6807\u8bc6\uff0cDiff \u624d\u80fd\u6b63\u786e\u8bc6\u522b\u3002\u4e3b\u8981\u4e3a\u4e86\u9ad8\u6548\u66f4\u65b0\u865a\u62df DOM\u3002<\/p>\n

    11. axios \u53ca\u5b89\u88c5\uff1f<\/h3>\n

    \u8bf7\u6c42\u540e\u53f0\u8d44\u6e90\u7684\u6a21\u5757\u3002npm install axios --save<\/code>\uff0cjs \u91cc import\uff0c\u7136\u540e .get<\/code> \u6216 .post<\/code>\u3002\u6210\u529f\u8d70 .then<\/code>\uff0c\u5931\u8d25\u8d70 .catch<\/code>\u3002<\/p>\n

    12. v-model \u7684\u4f7f\u7528<\/h3>\n

    v-model<\/code> \u7528\u4e8e\u8868\u5355\u53cc\u5411\u7ed1\u5b9a\uff0c\u662f\u8bed\u6cd5\u7cd6\uff1a\u80cc\u540e\u662f v-bind<\/code> \u7ed1 value\uff0c\u518d\u7528 v-on<\/code> \u7ed1 input \u4e8b\u4ef6\u3002<\/p>\n

    13. vue-cli \u9879\u76ee src \u76ee\u5f55\u6bcf\u4e2a\u6587\u4ef6\u5939\u548c\u6587\u4ef6\u7684\u7528\u6cd5\uff1f<\/h3>\n

    assets<\/code> \u653e\u9759\u6001\u8d44\u6e90\uff1bcomponents<\/code> \u653e\u7ec4\u4ef6\uff1brouter<\/code> \u5b9a\u4e49\u8def\u7531\uff1bapp.vue<\/code> \u5e94\u7528\u4e3b\u7ec4\u4ef6\uff1bmain.js<\/code> \u5165\u53e3\u6587\u4ef6\u3002<\/p>\n

    14. \u5206\u522b\u7b80\u8ff0 computed \u548c watch \u7684\u4f7f\u7528\u573a\u666f<\/h3>\n
      \n
    • \n
      computed<\/code>\uff1a\u4e00\u4e2a\u5c5e\u6027\u53d7\u591a\u4e2a\u5c5e\u6027\u5f71\u54cd\uff0c\u5178\u578b\u662f\u8d2d\u7269\u8f66\u7ed3\u7b97<\/section>\n<\/li>\n
    • \n
      watch<\/code>\uff1a\u4e00\u6761\u6570\u636e\u5f71\u54cd\u591a\u6761\u6570\u636e\uff0c\u4f8b\u5982\u641c\u7d22<\/section>\n<\/li>\n<\/ul>\n

      15. v-on \u53ef\u4ee5\u76d1\u542c\u591a\u4e2a\u65b9\u6cd5\u5417\uff1f<\/h3>\n

      \u53ef\u4ee5\u3002<\/p>\n

      16. $nextTick \u7684\u4f7f\u7528<\/h3>\n

      \u6539\u4e86 data \u9a6c\u4e0a\u53d6 DOM \u503c\uff0c\u62ff\u4e0d\u5230\u66f4\u65b0\u540e\u7684\u503c\u3002\u8981\u7528 $nextTick<\/code> \u56de\u8c03\uff0c\u7b49\u6e32\u67d3\u5230 DOM \u540e\u518d\u53d6\u3002<\/p>\n

      17. vue \u7ec4\u4ef6\u4e2d data \u4e3a\u4ec0\u4e48\u5fc5\u987b\u662f\u4e00\u4e2a\u51fd\u6570\uff1f<\/h3>\n

      JavaScript \u7279\u6027\uff1acomponent \u91cc data \u5fc5\u987b\u662f\u51fd\u6570\uff0c\u6bcf\u6b21\u590d\u7528\u8fd4\u56de\u4e00\u4efd\u65b0 data\uff0c\u5b9e\u4f8b\u5404\u6709\u79c1\u6709\u7a7a\u95f4\u3002\u5199\u6210\u5bf9\u8c61\u5219\u6240\u6709\u5b9e\u4f8b\u5171\u4eab\u4e00\u4efd\uff0c\u6539\u4e00\u4e2a\u5168\u6539\u3002<\/p>\n

      18. \u6e10\u8fdb\u5f0f\u6846\u67b6\u7684\u7406\u89e3<\/h3>\n

      \u4e3b\u5f20\u6700\u5c11\uff1b\u53ef\u6839\u636e\u4e0d\u540c\u9700\u6c42\u9009\u62e9\u4e0d\u540c\u5c42\u7ea7\u3002<\/p>\n

      19. Vue \u4e2d\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff1f<\/h3>\n

      \u6570\u636e\u52ab\u6301 + \u53d1\u5e03\u8ba2\u9605\uff0c\u6570\u636e\u548c\u89c6\u56fe\u540c\u6b65\u3002\u6838\u5fc3\u662f Object.defineProperty()<\/code>\u3002<\/p>\n

      20. \u5355\u9875\u9762\u5e94\u7528\u548c\u591a\u9875\u9762\u5e94\u7528\u533a\u522b\u53ca\u4f18\u7f3a\u70b9<\/h3>\n

      SPA \u53ea\u6709\u4e00\u4e2a\u4e3b\u9875\u9762\uff0c\u5f00\u59cb\u52a0\u8f7d\u5fc5\u8981\u7684 html\/js\/css\uff0c\u8df3\u8f6c\u53ea\u5237\u65b0\u5c40\u90e8\uff0c\u591a\u7528\u4e8e PC\u3002MPA \u591a\u4e2a\u9875\u9762\uff0c\u8df3\u8f6c\u6574\u9875\u5237\u65b0\u3002<\/p>\n

      SPA \u4f18\u70b9\uff1a\u4f53\u9a8c\u597d\u3001\u5bf9\u670d\u52a1\u5668\u538b\u529b\u5c0f\u3001\u524d\u540e\u7aef\u5206\u79bb\u3001\u53ef\u505a\u8f6c\u573a\u52a8\u753b\u3002\u7f3a\u70b9\uff1a\u4e0d\u5229\u4e8e SEO\uff1b\u5bfc\u822a\u8981\u81ea\u5df1\u505a\u524d\u8fdb\u540e\u9000\uff1b\u9996\u5c4f\u8017\u65f6\u957f\uff1b\u9875\u9762\u66f4\u590d\u6742\u3002<\/p>\n

      21. v-if \u548c v-for \u7684\u4f18\u5148\u7ea7<\/h3>\n

      \u4e00\u8d77\u7528\u65f6 v-for \u4f18\u5148\u7ea7\u66f4\u9ad8\uff0cv-if \u4f1a\u5728\u6bcf\u6b21\u5faa\u73af\u91cc\u8dd1\u3002\u4e0d\u63a8\u8350\u540c\u65f6\u4f7f\u7528\uff1b\u82e5\u8981\u7528\uff0cv-if \u5e94\u653e\u5230\u5916\u5c42\u3002<\/p>\n

      22. assets \u548c static \u7684\u533a\u522b<\/h3>\n

      \u76f8\u540c\u70b9\uff1a<\/strong>\u90fd\u5b58\u653e\u9759\u6001\u8d44\u6e90\u3002<\/p>\n

      \u4e0d\u540c\u70b9\uff1a<\/strong>assets<\/code> \u4f1a\u5728 npm run build<\/code> \u65f6\u6253\u5305\u538b\u7f29\uff0c\u6700\u7ec8\u8fdb static \u968f index.html \u4e0a\u4f20\uff1bstatic<\/code> \u4e0d\u8d70\u538b\u7f29\uff0c\u76f4\u63a5\u8fdb\u6253\u5305\u76ee\u5f55\u3002static \u4f53\u79ef\u66f4\u5927\u4f46\u6253\u5305\u66f4\u5feb\u3002<\/p>\n

      \u5efa\u8bae\uff1a<\/strong>\u4e1a\u52a1\u6837\u5f0f\u548c js \u653e assets\uff1b\u5df2\u5904\u7406\u8fc7\u7684\u7b2c\u4e09\u65b9\u5982 iconfont.css \u653e static\u3002<\/p>\n

      23. vue \u5e38\u7528\u7684\u4fee\u9970\u7b26<\/h3>\n
        \n
      • \n
        .stop<\/code>\uff1a\u7b49\u540c event.stopPropagation()\uff0c\u9632\u5192\u6ce1<\/section>\n<\/li>\n
      • \n
        .prevent<\/code>\uff1a\u7b49\u540c event.preventDefault()\uff0c\u53d6\u6d88\u9ed8\u8ba4\u884c\u4e3a<\/section>\n<\/li>\n
      • \n
        .capture<\/code>\uff1a\u6355\u83b7\u9636\u6bb5\uff0c\u7531\u5916\u5230\u5185<\/section>\n<\/li>\n
      • \n
        .self<\/code>\uff1a\u53ea\u89e6\u53d1\u81ea\u5df1\uff0c\u4e0d\u542b\u5b50\u5143\u7d20<\/section>\n<\/li>\n
      • \n
        .once<\/code>\uff1a\u53ea\u89e6\u53d1\u4e00\u6b21<\/section>\n<\/li>\n<\/ul>\n

        24. vue \u7684\u4e24\u4e2a\u6838\u5fc3\u70b9<\/h3>\n

        \u6570\u636e\u9a71\u52a8\u3001\u7ec4\u4ef6\u7cfb\u7edf\u3002\u6570\u636e\u9a71\u52a8\u9760 ViewModel \u4fdd\u8bc1\u6570\u636e\u548c\u89c6\u56fe\u4e00\u81f4\uff1b\u7ec4\u4ef6\u7cfb\u7edf\u628a UI \u770b\u6210\u7ec4\u4ef6\u6811\u3002<\/p>\n

        25. vue \u548c jQuery \u7684\u533a\u522b<\/h3>\n

        jQuery \u7528\u9009\u62e9\u5668\u9009 DOM \u518d\u8d4b\u503c\u3001\u53d6\u503c\u3001\u7ed1\u4e8b\u4ef6\uff0c\u6570\u636e\u548c\u754c\u9762\u5728\u4e00\u8d77\uff0c\u4f8b\u5982 $(\"label\").val()<\/code>\u3002Vue \u901a\u8fc7 Vue \u5bf9\u8c61\u628a\u6570\u636e\u548c View \u5206\u5f00\uff0c\u4e0d\u5fc5\u5f15\u7528\u5bf9\u5e94 DOM\uff0c\u9760 VM \u4e92\u76f8\u7ed1\u5b9a\uff0c\u4e5f\u5c31\u662f MVVM\u3002<\/p>\n

        \u4e8c\u3001\u5de5\u7a0b\u4e0e\u5b9e\u8df5<\/h2>\n

        26. \u5f15\u8fdb\u7ec4\u4ef6\u7684\u6b65\u9aa4<\/h3>\n

        template \u91cc\u5199\u7ec4\u4ef6\uff1bscript \u7b2c\u4e00\u884c import \u8def\u5f84\uff1bcomponents \u91cc\u767b\u8bb0\u7ec4\u4ef6\u540d\u3002<\/p>\n

        27. delete \u548c Vue.delete \u5220\u9664\u6570\u7ec4\u7684\u533a\u522b<\/h3>\n

        delete<\/code> \u53ea\u628a\u5143\u7d20\u53d8\u6210 empty\/undefined\uff0c\u5176\u4ed6\u952e\u503c\u4e0d\u53d8\uff1bVue.delete<\/code> \u771f\u6b63\u5220\u6389\u5e76\u6539\u53d8\u952e\u503c\u3002<\/p>\n

        28. SPA \u9996\u5c4f\u52a0\u8f7d\u6162\u5982\u4f55\u89e3\u51b3<\/h3>\n

        \u52a8\u6001\u61d2\u52a0\u8f7d\u63d2\u4ef6\uff1b\u4f7f\u7528 CDN \u8d44\u6e90\u3002<\/p>\n

        29. Vue-router \u8df3\u8f6c\u548c location.href \u6709\u4ec0\u4e48\u533a\u522b<\/h3>\n

        location.href<\/code> \u7b80\u5355\u4f46\u5237\u65b0\u9875\u9762\uff1bhistory.pushState<\/code> \u65e0\u5237\u65b0\uff1brouter.push<\/code> \u7528\u4e86 diff\uff0c\u6309\u9700\u52a0\u8f7d\u3002vue-router \u5728 history \u6a21\u5f0f\u4e0b\u5c31\u662f pushState\u3002<\/p>\n

        30. vue slot<\/h3>\n

        \u7236\u7ec4\u4ef6\u8981\u5728\u5b50\u7ec4\u4ef6\u91cc\u653e\u4e00\u4e9b DOM\uff0c\u8fd9\u4e9b DOM \u663e\u4e0d\u663e\u793a\u3001\u5728\u54ea\u663e\u793a\u3001\u5982\u4f55\u663e\u793a\uff0c\u7531 slot \u5206\u53d1\u8d1f\u8d23\u3002<\/p>\n

        31. \u4f60\u4eec vue \u9879\u76ee\u662f\u6253\u5305\u4e86\u4e00\u4e2a js\u3001\u4e00\u4e2a css\uff0c\u8fd8\u662f\u591a\u4e2a\u6587\u4ef6\uff1f<\/h3>\n

        \u6309 vue-cli \u811a\u624b\u67b6\u89c4\u8303\uff0c\u4e00\u4e2a js \u6587\u4ef6\uff0c\u4e00\u4e2a CSS \u6587\u4ef6\u3002<\/p>\n

        32. Vue \u91cc router-link \u7535\u8111\u6709\u7528\u3001\u5b89\u5353\u6ca1\u53cd\u5e94\u600e\u4e48\u89e3\u51b3\uff1f<\/h3>\n

        Android \u4e0a\u662f babel \u95ee\u9898\uff0c\u5b89\u88c5 babel polyfill \u63d2\u4ef6\u3002<\/p>\n

        33. Vue2 \u4e2d\u6ce8\u518c\u5728 router-link \u4e0a\u4e8b\u4ef6\u65e0\u6548<\/h3>\n

        \u7528 @click.native<\/code>\u3002router-link \u4f1a\u963b\u6b62 click\uff0c.native \u8868\u793a\u76f4\u63a5\u76d1\u542c\u539f\u751f\u4e8b\u4ef6\u3002<\/p>\n

        34. RouterLink \u5728 IE \u548c Firefox \u4e0d\u8d77\u4f5c\u7528\uff08\u8def\u7531\u4e0d\u8df3\u8f6c\uff09<\/h3>\n

        \u65b9\u6cd5\u4e00\uff1a\u53ea\u7528 a \u6807\u7b7e\uff0c\u4e0d\u7528 button\uff1b\u65b9\u6cd5\u4e8c\uff1abutton + Router.navigate\u3002<\/p>\n

        35. axios \u7684\u7279\u70b9\u6709\u54ea\u4e9b<\/h3>\n
          \n
        • \n
          \u6d4f\u89c8\u5668\u91cc\u521b\u5efa XMLHttpRequests<\/section>\n<\/li>\n
        • \n
          node.js \u521b\u5efa http \u8bf7\u6c42<\/section>\n<\/li>\n
        • \n
          \u652f\u6301 Promise API<\/section>\n<\/li>\n
        • \n
          \u62e6\u622a\u8bf7\u6c42\u548c\u54cd\u5e94<\/section>\n<\/li>\n
        • \n
          \u8f6c\u6362\u8bf7\u6c42\/\u54cd\u5e94\u6570\u636e<\/section>\n<\/li>\n
        • \n
          \u53d6\u6d88\u8bf7\u6c42<\/section>\n<\/li>\n
        • \n
          \u81ea\u52a8\u8f6c\u6362 json<\/section>\n<\/li>\n<\/ul>\n

          \u53d1\u9001\u5b57\u6bb5\u7528 data \u548c params\uff1aparams \u8ddf\u5730\u5740\u8d70\uff0cdata \u4f5c\u4e3a\u8bf7\u6c42\u4f53\u3002params \u4e00\u822c get\uff0cdata \u4e00\u822c post\/put\u3002<\/p>\n

          36. \u8bf7\u8bf4\u4e0b\u5c01\u88c5 vue \u7ec4\u4ef6\u7684\u8fc7\u7a0b\uff1f<\/h3>\n
            \n
          • \n
            \u642d\u6a21\u677f\u548c\u6837\u5f0f\uff0c\u60f3\u6e05\u695a\u57fa\u672c\u903b\u8f91<\/section>\n<\/li>\n
          • \n
            \u5b9a props \u7684\u6570\u636e\u548c\u7c7b\u578b<\/section>\n<\/li>\n
          • \n
            \u66b4\u9732\u8be5\u66b4\u9732\u7684\u65b9\u6cd5<\/section>\n<\/li>\n
          • \n
            \u5c01\u88c5\u5b8c\u76f4\u63a5\u8c03\u7528<\/section>\n<\/li>\n<\/ul>\n

            37. params \u548c query \u7684\u533a\u522b<\/h3>\n

            query \u7528 path \u5f15\u5165\uff0cparams \u7528 name \u5f15\u5165\uff1b\u53d6\u53c2\u5206\u522b\u662f this.$route.query.name<\/code> \u548c this.$route.params.name<\/code>\u3002query \u50cf get\uff0c\u5730\u5740\u680f\u770b\u5f97\u5230\uff1bparams \u50cf post\uff0c\u5730\u5740\u680f\u770b\u4e0d\u5230\u3002query \u5237\u65b0\u4e0d\u4e22\uff0cparams \u5237\u65b0\u4f1a\u4e22\u3002<\/p>\n

            38. vue \u521d\u59cb\u5316\u9875\u9762\u95ea\u52a8\u95ee\u9898<\/h3>\n

            \u521d\u59cb\u5316\u524d div \u4e0d\u5f52 vue \u7ba1\uff0c\u5bb9\u6613\u770b\u5230 {{message}}<\/code>\u3002\u5148\u5728 css \u52a0 [v-cloak] { display: none; }<\/code>\u3002\u8fd8\u4e0d\u5f7b\u5e95\u5c31\u5728\u6839\u5143\u7d20\u52a0 style=”display: none;” \u548c :style=”{display: ‘block’}”\u3002<\/p>\n

            39. vue \u66f4\u65b0\u6570\u7ec4\u65f6\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0\u7684\u65b9\u6cd5<\/h3>\n

            push()\uff1bpop()\uff1bshift()\uff1bunshift()\uff1bsplice()\uff1bsort()\uff1breverse()<\/p>\n

            40. vue \u5e38\u7528\u7684 UI \u7ec4\u4ef6\u5e93<\/h3>\n

            Mint UI\uff0celement\uff0cVUX<\/p>\n

            41. vue \u4fee\u6539\u6253\u5305\u540e\u9759\u6001\u8d44\u6e90\u8def\u5f84<\/h3>\n

            cli2\uff1a\u6539 config\/index.js \u91cc assetsPublicPath \u4e3a .\/<\/p>\n

            build: {\n  \/\/ ...\n  assetsPublicPath: '.\/',\n  \/\/ ...\n}<\/code><\/pre>\n
            cli3\uff1a\u6839\u76ee\u5f55 vue.config.js\uff1a<\/p>\n
            module.exports = {\n  publicPath: '.\/', \/\/ \u76f8\u5bf9\u4e8e HTML \u9875\u9762\uff08\u76ee\u5f55\u76f8\u540c\uff09\n}<\/code><\/pre>\n
            \u4e09\u3001\u751f\u547d\u5468\u671f\u51fd\u6570\u9762\u8bd5\u9898<\/h2>\n
            42. \u4ec0\u4e48\u662f vue \u751f\u547d\u5468\u671f\uff1f\u6709\u4ec0\u4e48\u4f5c\u7528\uff1f<\/h3>\n
            \u6bcf\u4e2a\u5b9e\u4f8b\u521b\u5efa\u65f6\u8981\u8d70\u521d\u59cb\u5316\uff1a\u6570\u636e\u76d1\u542c\u3001\u7f16\u8bd1\u6a21\u677f\u3001\u6302\u8f7d DOM\u3001\u6570\u636e\u53d8\u5316\u65f6\u66f4\u65b0 DOM\u3002\u8fc7\u7a0b\u4e2d\u4f1a\u8dd1\u751f\u547d\u5468\u671f\u94a9\u5b50\uff0c\u8ba9\u4f60\u5728\u4e0d\u540c\u9636\u6bb5\u52a0\u4ee3\u7801\u3002\u4f8b\u5982\u8981\u5728\u6e32\u67d3\u5b8c\u5f39\u5e7f\u544a\uff0c\u6700\u65e9\u53ef\u5728 mounted\u3002<\/p>\n
            43. \u7b2c\u4e00\u6b21\u9875\u9762\u52a0\u8f7d\u4f1a\u89e6\u53d1\u54ea\u51e0\u4e2a\u94a9\u5b50\uff1f<\/h3>\n
            beforeCreate\uff0ccreated\uff0cbeforeMount\uff0cmounted<\/p>\n
            44. \u7b80\u8ff0\u6bcf\u4e2a\u5468\u671f\u5177\u4f53\u9002\u5408\u54ea\u4e9b\u573a\u666f<\/h3>\n
            beforeCreate\uff1a<\/strong> new \u4e4b\u540e\u53ea\u6709\u9ed8\u8ba4\u94a9\u5b50\u548c\u4e8b\u4ef6\uff0cdata \u548c methods \u90fd\u8fd8\u6ca1\u521d\u59cb\u5316\uff0c\u4e0d\u80fd\u7528\u3002<\/p>\n
            created\uff1a<\/strong> data \u548c methods \u5df2\u521d\u59cb\u5316\uff0c\u8981\u8c03\u65b9\u6cd5\u6216\u6539\u6570\u636e\u6700\u65e9\u5728\u8fd9\u3002<\/p>\n
            beforeMount\uff1a<\/strong> \u5185\u5b58\u91cc\u6a21\u677f\u7f16\u8bd1\u597d\u4e86\uff0c\u8fd8\u6ca1\u6302\u5230\u9875\u9762\uff0c\u9875\u9762\u4ecd\u662f\u65e7\u7684\u3002<\/p>\n
            mounted\uff1a<\/strong> \u5b9e\u4f8b\u521d\u59cb\u5316\u5b8c\u6210\uff0c\u8fdb\u5165\u8fd0\u884c\u9636\u6bb5\u3002\u8981\u64cd\u4f5c\u9875\u9762 DOM\uff0c\u6700\u65e9\u5728\u8fd9\u3002<\/p>\n
            beforeUpdate\uff1a<\/strong> \u9875\u9762\u8fd8\u662f\u65e7\u6570\u636e\uff0cdata \u5df2\u662f\u65b0\u7684\uff0c\u5c1a\u672a\u540c\u6b65\u3002<\/p>\n
            updated\uff1a<\/strong> \u9875\u9762\u548c data \u90fd\u662f\u6700\u65b0\u3002<\/p>\n
            beforeDestroy\uff1a<\/strong> \u8fdb\u5165\u9500\u6bc1\u9636\u6bb5\uff0cdata\u3001methods\u3001\u6307\u4ee4\u3001\u8fc7\u6ee4\u5668\u4ecd\u53ef\u7528\u3002<\/p>\n
            destroyed\uff1a<\/strong> \u5168\u90e8\u4e0d\u53ef\u7528\uff0c\u7ec4\u4ef6\u5df2\u9500\u6bc1\u3002<\/p>\n
            45. created \u548c mounted \u7684\u533a\u522b<\/h3>\n
            created\uff1a\u6a21\u677f\u6e32\u67d3\u6210 html \u524d\uff0c\u9002\u5408\u521d\u59cb\u5316\u5c5e\u6027\u518d\u6e32\u67d3\u3002mounted\uff1a\u6e32\u67d3\u6210 html \u540e\uff0c\u9002\u5408\u64cd\u4f5c DOM\u3002<\/p>\n
            46. vue \u83b7\u53d6\u6570\u636e\u5728\u54ea\u4e2a\u5468\u671f\u51fd\u6570<\/h3>\n
            \u4e00\u822c created \/ beforeMount \/ mounted \u90fd\u53ef\u4ee5\u3002\u8981\u64cd\u4f5c DOM \u5fc5\u987b mounted\u3002<\/p>\n
            47. \u8bf7\u8be6\u7ec6\u8bf4\u4e0b\u4f60\u5bf9 vue \u751f\u547d\u5468\u671f\u7684\u7406\u89e3\uff1f<\/h3>\n
            \u5171 8 \u4e2a\u9636\u6bb5\uff1a\u521b\u5efa\u524d\/\u540e\uff0c\u8f7d\u5165\u524d\/\u540e\uff0c\u66f4\u65b0\u524d\/\u540e\uff0c\u9500\u6bc1\u524d\/\u540e\u3002<\/p>\n
            \u521b\u5efa\u524d\/\u540e\uff1a<\/strong> beforeCreate \u65f6 $el \u548c data \u90fd\u662f undefined\uff1bcreated \u65f6 data \u6709\u4e86\uff0c$el \u8fd8\u6ca1\u6709\u3002<\/p>\n
            \u8f7d\u5165\u524d\/\u540e\uff1a<\/strong> beforeMount \u65f6 $el \u548c data \u90fd\u521d\u59cb\u5316\u4e86\uff0c\u4ecd\u662f\u865a\u62df\u8282\u70b9\uff1bmounted \u6302\u8f7d\u5b8c\u6210\uff0c\u6570\u636e\u6e32\u67d3\u51fa\u6765\u3002<\/p>\n
            \u66f4\u65b0\u524d\/\u540e\uff1a<\/strong> data \u53d8\u5316\u89e6\u53d1 beforeUpdate \u548c updated\u3002<\/p>\n
            \u9500\u6bc1\u524d\/\u540e\uff1a<\/strong> destroy \u4e4b\u540e\u6539 data \u4e0d\u518d\u89e6\u53d1\u94a9\u5b50\uff0c\u4e8b\u4ef6\u76d1\u542c\u548c DOM \u7ed1\u5b9a\u89e3\u9664\uff0c\u4f46 DOM \u7ed3\u6784\u8fd8\u5728\u3002<\/p>\n
            \u56db\u3001vue \u8def\u7531\u9762\u8bd5\u9898<\/h2>\n
            48. mvvm \u6846\u67b6\u662f\u4ec0\u4e48\uff1f<\/h3>\n
            vue \u662f\u5b9e\u73b0\u4e86\u53cc\u5411\u7ed1\u5b9a\u7684 MVVM\uff1a\u89c6\u56fe\u53d8\u5219\u6a21\u578b\u53d8\uff0c\u6a21\u578b\u53d8\u5219\u89c6\u56fe\u53d8\u3002<\/p>\n
            49. vue-router \u662f\u4ec0\u4e48\uff1f\u5b83\u6709\u54ea\u4e9b\u7ec4\u4ef6<\/h3>\n
            \u5199\u8def\u7531\u7684\u63d2\u4ef6\u3002\u7ec4\u4ef6\uff1arouter-link\u3001router-view\u3002<\/p>\n
            50. active-class \u662f\u54ea\u4e2a\u7ec4\u4ef6\u7684\u5c5e\u6027\uff1f<\/h3>\n
            vue-router \u6a21\u5757\u7684 router-link \u7ec4\u4ef6\u3002\u5b50\u8def\u7531\u7528 children \u6570\u7ec4\u5b9a\u4e49\u3002<\/p>\n
            51. \u600e\u4e48\u5b9a\u4e49 vue-router \u7684\u52a8\u6001\u8def\u7531\uff1f\u600e\u4e48\u83b7\u53d6\u4f20\u8fc7\u6765\u7684\u503c\uff1f<\/h3>\n
            router\/index.js \u91cc path \u52a0\u4e0a \/:id\u3002\u7528 router \u5bf9\u8c61\u7684 params.id \u53d6\u3002<\/p>\n
            52. vue-router \u6709\u54ea\u51e0\u79cd\u5bfc\u822a\u94a9\u5b50\uff1f<\/h3>\n
            \u4e09\u79cd\u3002<\/p>\n
            \u7b2c\u4e00\u79cd\uff1a<\/strong> \u5168\u5c40 router.beforeEach(to,from,next)<\/code>\uff0c\u8df3\u8f6c\u524d\u62e6\u622a\u3002<\/p>\n
            \u7b2c\u4e8c\u79cd\uff1a<\/strong> \u7ec4\u4ef6\u5185\u7684\u94a9\u5b50\u3002<\/p>\n
            \u7b2c\u4e09\u79cd\uff1a<\/strong> \u5355\u72ec\u8def\u7531\u72ec\u4eab\u5b88\u536b\u3002<\/p>\n
            53. $route \u548c $router \u7684\u533a\u522b<\/h3>\n
            $router<\/code> \u662f VueRouter \u5b9e\u4f8b\uff0cscript \u91cc\u7528 $router.push<\/code> \u5bfc\u822a\uff0c\u8fd4\u56de\u5386\u53f2\u7528 $router.go(-1)<\/code>\u3002<\/p>\n
            $route<\/code> \u662f\u5f53\u524d\u8df3\u8f6c\u5bf9\u8c61\uff0c\u53ef\u53d6 name\u3001path\u3001query\u3001params\u3002<\/p>\n
            54. vue-router \u7684\u4e24\u79cd\u6a21\u5f0f<\/h3>\n
            hash \u6a21\u5f0f\uff1a<\/strong> \u5730\u5740\u680f URL \u91cc\u7684 #\u3002<\/p>\n
            history \u6a21\u5f0f\uff1a<\/strong> HTML5 History \u7684 pushState \/ replaceState\uff08\u9700\u6d4f\u89c8\u5668\u652f\u6301\uff09\u3002<\/p>\n
            55. vue-router \u5b9e\u73b0\u8def\u7531\u61d2\u52a0\u8f7d\uff08\u52a8\u6001\u52a0\u8f7d\u8def\u7531\uff09<\/h3>\n
            \u7b2c\u4e00\u79cd\uff1a<\/strong> vue \u5f02\u6b65\u7ec4\u4ef6\uff0c\u4e00\u4e2a\u7ec4\u4ef6\u4e00\u4e2a js\u3002<\/p>\n
            \u7b2c\u4e8c\u79cd\uff1a<\/strong> \u8def\u7531\u61d2\u52a0\u8f7d\uff08import\uff09\u3002<\/p>\n
            \u7b2c\u4e09\u79cd\uff1a<\/strong> webpack require.ensure()\uff0c\u76f8\u540c chunkName \u4f1a\u6253\u6210\u4e00\u4e2a js\u3002<\/p>\n
            \u4e94\u3001vuex \u5e38\u89c1\u9762\u8bd5\u9898<\/h2>\n
            56. vuex \u662f\u4ec0\u4e48\uff1f\u600e\u4e48\u4f7f\u7528\uff1f\u54ea\u79cd\u529f\u80fd\u573a\u666f\u4f7f\u7528\u5b83\uff1f<\/h3>\n
            vue \u7684\u72b6\u6001\u7ba1\u7406\u3002\u5728 main.js \u5f15\u5165 store \u5e76\u6ce8\u5165\u3002\u65b0\u5efa store.js \u518d export\u3002\u573a\u666f\uff1a\u5355\u9875\u91cc\u7ec4\u4ef6\u95f4\u5171\u4eab\u72b6\u6001\uff0c\u5982\u97f3\u4e50\u64ad\u653e\u3001\u767b\u5f55\u3001\u8d2d\u7269\u8f66\u3002<\/p>\n
            57. vuex \u6709\u54ea\u51e0\u79cd\u5c5e\u6027\uff1f<\/h3>\n
            \u4e94\u79cd\uff1aState\u3001Getter\u3001Mutation\u3001Action\u3001Module\u3002<\/p>\n
              \n
            • \n
              state => \u57fa\u672c\u6570\u636e<\/section>\n<\/li>\n
            • \n
              getters => \u6d3e\u751f\u6570\u636e<\/section>\n<\/li>\n
            • \n
              mutations => \u540c\u6b65\u6539\u6570\u636e<\/section>\n<\/li>\n
            • \n
              actions => \u5305\u4e00\u5c42 mutations\uff0c\u53ef\u4ee5\u5f02\u6b65<\/section>\n<\/li>\n
            • \n
              modules => \u6a21\u5757\u5316 Vuex<\/section>\n<\/li>\n<\/ul>\n
              58. Vue.js \u4e2d ajax \u5e94\u8be5\u5199\u5728\u7ec4\u4ef6 methods \u8fd8\u662f vuex \u7684 actions\uff1f<\/h3>\n
              \u6570\u636e\u53ea\u5728\u672c\u7ec4\u4ef6\u7528\uff0c\u4e0d\u5fc5\u8fdb vuex state\u3002\u82e5\u522b\u5904\u8981\u590d\u7528\uff0c\u8bf7\u6c42\u653e action \u65b9\u4fbf\u590d\u7528\u3002<\/p>\n
              \u4ee5\u4e0a\u9762\u8bd5\u9898\u4ec5\u4f9b\u4e2a\u4eba\u5b66\u4e60\uff0c\u5982\u6709\u9519\u8bef\u8bf7\u6307\u6b63\u3002\u4f5c\u8005\uff1aLucky Girl\u3000https:\/\/zhuanlan.zhihu.com\/p\/92407628<\/p>\n
              \n
              \u4e00\u53e5\u8bdd\u603b\u7ed3\uff1a58 \u9898\u6309\u300c\u6307\u4ee4\u4e0e\u901a\u4fe1 \u2192 \u5de5\u7a0b\u5b9e\u8df5 \u2192 \u751f\u547d\u5468\u671f \u2192 \u8def\u7531 \u2192 Vuex\u300d\u4e32\u8d77\u6765\uff1a\u5148\u80fd\u8bb2\u6e05\u6570\u636e\u9a71\u52a8\u548c\u7ec4\u4ef6\u6811\uff0c\u518d\u8865\u94a9\u5b50\u987a\u5e8f\u548c\u72b6\u6001\u8be5\u4e0d\u8be5\u8fdb store\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
              \u4e0b\u9762 58 \u9053\u9898\u4ece\u5165\u95e8\u6307\u4ee4\u4e00\u8def\u95ee\u5230\u751f\u547d\u5468\u671f\u3001\u8def\u7531\u548c Vuex\uff0c\u8986\u76d6\u65e5\u5e38\u5f00\u53d1\u548c\u9762\u8bd5\u9ad8\u9891\u70b9\u3002\u9898\u76ee\u5168\u90e8\u4fdd\u7559\uff0c\u7b54\u6848\u6309\u539f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[105,128],"tags":[140],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3021"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3021"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3021\/revisions"}],"predecessor-version":[{"id":3023,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3021\/revisions\/3023"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}