{"id":180,"date":"2018-11-14T21:37:43","date_gmt":"2018-11-14T13:37:43","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=180"},"modified":"2018-11-14T21:37:43","modified_gmt":"2018-11-14T13:37:43","slug":"vue-vue-headlines","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=180","title":{"rendered":"[Vue] Vue Headlines"},"content":{"rendered":"\n<p>\u4eca\u5929\u63a1\u7528 vue-cli \/ vue-router \/ vuex \u88fd\u4f5c\u4e00\u500b\u542b\u6709 routes\u3001\u7d71\u4e00\u7ba1\u7406 state \u7684\u6587\u7ae0\u5217\u8868\u3002<br \/><a href=\"https:\/\/github.com\/yichinweng\/vue-practice\/tree\/master\/vue-headlines\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/yichinweng\/vue-practice\/tree\/master\/vue-headlines<\/a><\/p>\n\n\n<p>\u4ee5\u4e0b\u7c21\u55ae\u7d00\u9304\u5361\u95dc\u90e8\u5206\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>\u4f7f\u7528 vue-router \u88fd\u4f5c SPA\uff0c\u9801\u9762\u9593\u5207\u63db\u6642\u4e0d\u8981\u4f7f\u7528 &lt;a&gt;\uff0c\u6703\u5c0e\u81f4\u771f\u6b63\u7684\u91cd\u5c0e\u5411\uff0c\u63a1\u7528 $router.push (\u4ee5\u524d\u73a9 React \u660e\u660e\u8e29\u904e\u4e00\u6b21\uff0c\u9084\u786c\u8981\u518d\u8e29\u4e00\u6b21 Orz)\u3002<\/li><li>\u63a1\u7528 vue single file component \u6642\uff0cinner component \u7684\u5beb\u6cd5\u5982\u4e0b\uff0c\u6b64\u5beb\u6cd5\u8981\u958b\u555f <a href=\"https:\/\/cli.vuejs.org\/zh\/config\/#runtimecompiler\" target=\"_blank\" rel=\"noopener\">runtimeCompiler<\/a>\u3002<br \/>\u5176\u4ed6\u66f4\u591a\u7a2e\u505a\u6cd5\u53ef\u4ee5\u53c3\u8003\uff1a<a href=\"https:\/\/codewithhugo.com\/writing-multiple-vue-components-in-a-single-file\/\" target=\"_blank\" rel=\"noopener\">Writing multiple Vue components in a single file<\/a>\u3002<\/li><li>\u5b50\u7d44\u4ef6\u8981\u4f7f\u7528\u7236\u7d44\u4ef6\u7684 methods \u6642\uff0c\u8981\u52a0\u4e0a<code>.native<\/code>\u4fee\u98fe\u5b57\u3002<\/li><\/ul>\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- template \u5340\u6bb5 --&gt;\n&lt;HeadlineTitle\n  v-for=\"(item, index) in headlines.articles\"\n  v-bind:article=\"item\"\n  v-bind:key=\"index\"\n  v-on:click.native=\"moveToContent(index)\"&gt;&lt;\/HeadlineTitle&gt;\n&lt;!-- js \u5340\u6bb5 --&gt;\nconst HeadlineTitle = {\n  props: ['article'],\n  template: `\n    &lt;li&gt;\n        {{ article.title }}\n    &lt;\/li&gt;`\n};<\/pre>\n\n\n<ul class=\"wp-block-list\"><li>build \u5f8c\u76f4\u63a5\u958b\u555f\u70ba\u7a7a\u767d\uff0c\u9700\u8981\u81ea\u5df1\u5efa\u7acb vue.config.js \u8a2d\u5b9a baseUrl\uff0c\u4e26\u78ba\u8a8d vue-router \u95dc\u9589 history mode\u3002<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u5929\u63a1\u7528 vue-cli \/ vue-router&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[5],"tags":[30],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-vue","tag-30"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=180"}],"version-history":[{"count":0,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}