{"id":1388,"date":"2020-03-24T13:46:26","date_gmt":"2020-03-24T05:46:26","guid":{"rendered":"https:\/\/199604.com\/?p=1388"},"modified":"2022-03-07T18:26:58","modified_gmt":"2022-03-07T10:26:58","slug":"vue-js%e4%b8%adwatch%e3%80%81computed%e3%80%81%e5%92%8cmethods%e4%b8%89%e8%80%85%e5%8c%ba%e5%88%ab","status":"publish","type":"post","link":"https:\/\/199604.com\/1388","title":{"rendered":"Vue.js\u4e2dwatch\u3001computed\u3001\u548cmethods\u4e09\u8005\u533a\u522b~"},"content":{"rendered":"<p>\u6700\u8fd1\u518d\u6b21\u590d\u4e60\u4e86vue.js\uff0c\u4e00\u76f4\u6df7\u6dc6watch\u3001computed\u3001\u548cmethods\u4e09\u8005\u3002\u5c31\u8c22\u8c22\u7b14\u8bb0\u5427~<\/p>\n<h2>computed\uff1a<\/h2>\n<p>\u5c5e\u6027\u7684\u7ed3\u679c\u4f1a\u88ab\u7f13\u5b58\uff0c\u9664\u975e\u4f9d\u8d56\u7684\u54cd\u5e94\u5f0f\u5c5e\u6027\u53d8\u5316\u624d\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0c<strong>\u4e3b\u8981\u5f53\u4f5c\u5c5e\u6027\u6765\u4f7f\u7528<\/strong>\u3002<\/p>\n<p>\u4f8b:<\/p>\n<pre><code class=\"language-vue \">computed:{\n    test1:function(){\n        return 'computed:test1';\n    },\n    test2(){\n        return 'computed:test2'\n    }\n}\n\/\/html\u5f15\u7528\n{{test1}}\n{{test2}}\n<\/code><\/pre>\n<h2>methods\uff1a<\/h2>\n<p>\u662f\u4e00\u4e2a\u65b9\u6cd5\uff0c\u8868\u793a\u4e00\u4e2a\u5177\u4f53\u7684\u64cd\u4f5c\uff0c<strong>\u4e3b\u8981\u4e66\u5199\u4e1a\u52a1\u903b\u8f91<\/strong>\u3002<\/p>\n<p>\u4f8b\uff1a<\/p>\n<pre><code class=\"language-vue \">methods:{\n    handleSubmit(){\n        this.count +=1\n        console.log('count:'+this.count)\n    },\n    logInfo(event){\n        console.log(event);\n    },\n    test(){\n        return 'methods:test';\n    }\n}\n\n&lt;form v-on:submit.prevent=\"handleSubmit()\"&gt;\n    &lt;p&gt;\u65e0pervent&lt;\/p&gt;\n    &lt;input type=\"submit\" value=\"\u63d0\u4ea4\" \/&gt;\n&lt;\/form&gt;\n&lt;input type=\"text\" v-on:keyup.enter=\"logInfo($event)\" \/&gt;\n&lt;input type=\"text\" @click.ctrl=\"logInfo($event)\" \/&gt;\n{{test()}}\n<\/code><\/pre>\n<p>\u6570\u636e\u91cf\u5927\uff0c\u9700\u8981\u7f13\u5b58\u7684\u65f6\u5019\u7528computed\uff1b\u6bcf\u6b21\u786e\u5b9e\u9700\u8981\u91cd\u65b0\u52a0\u8f7d\uff0c\u4e0d\u9700\u8981\u7f13\u5b58\u65f6\u7528methods<\/p>\n<h2>watch(\u4fa6\u542c\u5c5e\u6027)\uff1a<\/h2>\n<p>\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u952e\u662f\u9700\u8981\u89c2\u5bdf\u7684\u8868\u8fbe\u5f0f\uff0c\u503c\u662f\u5bf9\u5e94\u56de\u8c03\u51fd\u6570\uff0c<strong>\u4e3b\u8981\u7528\u6765\u76d1\u542c\u67d0\u4e9b\u7279\u5b9a\u6570\u636e\u7684\u53d8\u5316\uff0c\u4ece\u800c\u8fdb\u884c\u67d0\u4e9b\u5177\u4f53\u7684\u4e1a\u52a1\u903b\u8f91\u64cd\u4f5c<\/strong>\uff1b\u53ef\u4ee5\u770b\u505a\u662fcomputed\u548cmethods \u7684\u7ed3\u5408\u4f53\u3002<\/p>\n<p>\u4f8b\uff1a<\/p>\n<pre><code class=\"language-vue \">let app11 = new Vue({\n    el: '#app-11',\n    data: {\n        firstName: 'Foo',\n        lastName: 'Bar',\n        fullName: '1'\n    },\n    watch: {\n        firstName: function(val) {\n            this.fullName = val + ' ' + this.lastName\n        },\n        lastName: function(val) {\n            this.fullName = this.firstName + ' ' + val\n        },\n        firstName: function(newValue,oldValue){\n            console.log(newValue+'   '+oldValue)\n            \/\/console.log('changed firstName')\n        }\n    }   \n});\n\n&lt;div id=\"app-11\"&gt;\n    {{ firstName }}\n    &lt;input type=\"text\"  v-model=\"firstName\"\/&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>&#8211;>http:\/\/www.imooc.com\/article\/49239?block_id=tuijian_wz \u4e0d\u9519\u7684\u603b\u7ed3\u5427~<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u518d\u6b21\u590d\u4e60\u4e86vue.js\uff0c\u4e00\u76f4\u6df7\u6dc6watch\u3001computed\u3001\u548cmethods\u4e09\u8005\u3002\u5c31\u8c22\u8c22\u7b14\u8bb0\u5427~ com [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[238],"class_list":["post-1388","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-vue"],"_links":{"self":[{"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/posts\/1388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":6,"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"predecessor-version":[{"id":2197,"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/posts\/1388\/revisions\/2197"}],"wp:attachment":[{"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/199604.com\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}