{"id":169,"date":"2018-11-13T23:49:29","date_gmt":"2018-11-13T15:49:29","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=169"},"modified":"2018-11-13T23:49:29","modified_gmt":"2018-11-13T15:49:29","slug":"vue-todos","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=169","title":{"rendered":"[Vue] Vue Todos"},"content":{"rendered":"\n<p>\u6700\u8fd1\u5728\u6478\u6478 Vue\uff0c\u5f9e\u6700\u57fa\u790e Tutorial \u958b\u59cb\uff0c\u4e26\u5be6\u4f5c\u4e00\u500b Todo App\u3002<br \/><a href=\"https:\/\/codepen.io\/yichinweng\/pen\/eQdwow\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/yichinweng\/pen\/eQdwow<\/a><br \/><a href=\"https:\/\/github.com\/yichinweng\/vue-practice\/tree\/master\/vue-todos\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/yichinweng\/vue-practice\/tree\/master\/vue-todos<\/a><br \/><\/p>\n\n\n<p>\u4ee5\u4e0b\u7c21\u55ae\u7d00\u9304\u4e00\u4e0b\u8e29\u5230\u7684\u5751\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>v-bind \u7b49\u65b9\u6cd5\u5f8c\u9762\u63a5\u7684 key \u4e0d\u53ef\u4ee5\u70ba\u5c0f\u99dd\u5cf0\uff0c\u591a\u500b\u55ae\u8a5e\u8acb\u7528 hyphen\uff0c\u50b3\u70ba props \u6642\u6703\u81ea\u52d5\u8f49\u8b6f\u70ba\u5c0f\u99dd\u5cf0\u3002<a href=\"https:\/\/cn.vuejs.org\/v2\/guide\/components-props.html#Prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-camelCase-vs-kebab-case\" target=\"_blank\" rel=\"noopener\">\u53c3\u95b1<\/a>\u3002<\/li><li>event \u7684\u5f48\u51fa\u8207\u76e3\u807d\u4e00\u5f8b\u4f7f\u7528 kebab-case (hyphen)\u3002<a href=\"https:\/\/cn.vuejs.org\/v2\/guide\/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D\" target=\"_blank\" rel=\"noopener\">\u53c3\u95b1<\/a>\u3002<\/li><li>\u908f\u8f2f\u904b\u7b97\u76e1\u91cf\u62c9\u51fa\u70ba computed \u65b9\u6cd5\u6216 methods\uff0c\u907f\u514d\u5728\u6a23\u677f\u4e2d\u8655\u7406\u8907\u96dc\u7684\u908f\u8f2f\u904b\u7b97\u3002<\/li><li>\u5728\u7d44\u4ef6 filter-button \u4e2d template \u4f7f\u7528\u5230 $emit<br \/><code>v-on:click=\"$emit('set-filter', filterItem)\"<\/code><br \/>\u5176\u7236\u7d44\u4ef6\u70ba\u00a0filter-button\uff0c\u56e0\u6b64\u4e8b\u4ef6\u76e3\u807d v-on \u61c9\u653e\u6b64\u8655\u3002<br \/>&gt; \u627f\u4e0a\uff0c\u66f4\u597d\u7684\u505a\u6cd5\uff1a\u5c07 $emit \u6539\u70ba methods\uff0c\u4e26\u5728\u7236\u7d44\u4ef6 mounted \u6642\u639b\u8f09 event listener\u3002<br \/>&gt; best practice\uff1a\u63a1\u7528 vuex \u7b49\u7d71\u4e00\u7ba1\u7406\u8cc7\u6599\uff0c\u6e1b\u5c11\u4f9d\u8cf4\u3002<\/li><li>computed\uff1a<ul><li>getter\u3001setter \u7684 this \u81ea\u52d5\u7d81\u5b9a\u5230 instance\u3002<\/li><li>\u8a08\u7b97\u7d50\u679c\u6703\u88ab\u66ab\u5b58\uff0c\u9664\u975e\u53c3\u8003\u5230\u7684\u5c6c\u6027\u6709\u8b8a\u5316\u3002<\/li><li>\u5c6c\u6027\u82e5\u5728\u7bc4\u7587\u4e4b\u5916\uff0c\u8a08\u7b97\u4e0d\u6703\u66f4\u65b0\u3002<\/li><li>\u8981\u6709 return\u3002<\/li><li>\u547c\u53eb\u6642\u4e0d\u7528\u52a0 ()\u3002<\/li><\/ul><\/li><li>methods\uff1a<ul><li>this \u81ea\u52d5\u7d81\u5b9a\u5230 instance\u3002<\/li><li>\u901a\u5e38\u642d\u914d event trigger \u4f7f\u7528\u3002<\/li><li>\u56e0\u70ba\u662f\u65b9\u6cd5\uff0c\u904b\u7b97\u6548\u80fd\u6bd4 computed \u5dee\u3002<\/li><li>\u4e0d\u4e00\u5b9a\u8981\u6709 return\u3002<\/li><li>\u547c\u53eb\u6642\u8981\u52a0\u4e0a ()\u3002<br \/><\/li><\/ul><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u5728\u6478\u6478 Vue\uff0c\u5f9e\u6700\u57fa\u790e Tutorial \u958b&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-169","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\/169","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=169"}],"version-history":[{"count":0,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}