{"id":603,"date":"2017-04-17T20:40:20","date_gmt":"2017-04-17T12:40:20","guid":{"rendered":"http:\/\/loveuhouse.cn\/wordpress\/?p=603"},"modified":"2022-10-29T17:23:08","modified_gmt":"2022-10-29T09:23:08","slug":"vue%e5%88%9d%e6%8e%a2%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/loveuhouse.cn\/wordpress\/?p=603","title":{"rendered":"Vue\u521d\u63a2\u7b14\u8bb0"},"content":{"rendered":"<figure style=\"width: 1200px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/cn.vuejs.org\/v2\/guide\/instance.html#\u751f\u547d\u5468\u671f\u56fe\u793a\"><img loading=\"lazy\" class=\"size-large\" src=\"https:\/\/v2.cn.vuejs.org\/images\/lifecycle.png\" alt=\"vue\u5b9e\u4f8b\u751f\u547d\u5468\u671f-\u94a9\u5b50\u51fd\u6570\u53c2\u8003\" width=\"1200\" height=\"3039\" \/><\/a><figcaption class=\"wp-caption-text\">vue\u5b9e\u4f8b\u751f\u547d\u5468\u671f-\u94a9\u5b50\u51fd\u6570\u53c2\u8003\uff08\u70b9\u51fb\u8fdb\u5165\u5b98\u65b9\u6587\u6863\uff09<\/figcaption><\/figure>\n<h1>Vue\u521d\u63a2\u7b14\u8bb0<\/h1>\n<h2>\u7ed1\u5b9a\u4e8b\u4ef6<\/h2>\n<p>\u7ed1\u5b9a\u4e8b\u4ef6\u53ef\u4ee5\u7528v-on\uff0c\u5e76\u4e14\u5728\u51fd\u6570\u4e2d this \u6307\u5411\u4e86data,<br \/>\n\u4e00\u822c\u6587\u6863\u64cd\u4f5c\u9700\u8981\u8f6c\u6362\u601d\u8def\uff0c\u6539\u4e3a \u5bf9 app\u5bf9\u8c61\u8fdb\u884c\u64cd\u4f5c \u6bd4\u5982 <\/p>\n<pre><code>this.message = [String]\n\n&lt;pre class=&quot;lang:html decode:true&quot;&gt;&lt;!-- html --&gt;&lt;\/pre&gt;\n&lt;div id=&quot;app-5&quot;&gt;{{ message }} &lt;button&gt; \u7ffb\u6eda\u5427\uff01 &lt;\/button&gt;&lt;\/div&gt;\n&lt;!-- js --&gt; var app5 = new Vue({ el:&quot;#app-5&quot;, data:{ &#039;message&#039;:&quot;\u57fa\u62c9&quot;, }, methods:{ reverseMessage: function(){ this.message = this.message.split(&quot;&quot;).reverse().join(&quot;&quot;); } } })<\/code><\/pre>\n<h2>\u7ed3\u5408css\u8fc7\u6e21\u52a8\u753b<\/h2>\n<p>\u89e6\u53d1\u4e8b\u4ef6\u4e0d\u4e00\u5b9a\u8981\u7528v-on \u4f7f\u7528@click\u4e5f\u53ef\u4ee5\u5b8c\u6210\u7b80\u5355\u7684\u70b9\u51fb\u89e6\u53d1\u4e8b\u4ef6<br \/>\n\u901a\u8fc7\u5207\u6362\u72b6\u6001\u89e6\u53d1css\u52a8\u753b\uff0c<code>v-enter<\/code> \u53ef\u4ee5\u7528 transition\u7684name\u6765\u4ee3\u66ff\uff0c\u6bd4\u5982 <code>.silde-fade-enter<\/code><br \/>\ncss\u52a8\u753b\u4e5f\u6709\u6280\u5de7\uff1a<\/p>\n<figure style=\"width: 1078px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-large\" src=\"http:\/\/cn.vuejs.org\/images\/transition.png\" width=\"1078\" height=\"430\" \/><figcaption class=\"wp-caption-text\">vue css\u52a8\u753b \u8fdb\u5165\u9000\u51fa\u72b6\u6001\u8bf4\u660e<\/figcaption><\/figure>\n<ol>\n<li>v-enter: \u5b9a\u4e49\u8fdb\u5165\u8fc7\u6e21\u7684\u5f00\u59cb\u72b6\u6001\u3002\u5728\u5143\u7d20\u88ab\u63d2\u5165\u65f6\u751f\u6548\uff0c\u5728\u4e0b\u4e00\u4e2a\u5e27\u79fb\u9664\u3002<\/li>\n<li>v-enter-active: \u5b9a\u4e49\u8fdb\u5165\u8fc7\u6e21\u7684\u7ed3\u675f\u72b6\u6001\u3002\u5728\u5143\u7d20\u88ab\u63d2\u5165\u65f6\u751f\u6548\uff0c\u5728 transition\/animation \u5b8c\u6210\u4e4b\u540e\u79fb\u9664\u3002<\/li>\n<li>v-leave: \u5b9a\u4e49\u79bb\u5f00\u8fc7\u6e21\u7684\u5f00\u59cb\u72b6\u6001\u3002\u5728\u79bb\u5f00\u8fc7\u6e21\u88ab\u89e6\u53d1\u65f6\u751f\u6548\uff0c\u5728\u4e0b\u4e00\u4e2a\u5e27\u79fb\u9664\u3002<\/li>\n<li>v-leave-active: \u5b9a\u4e49\u79bb\u5f00\u8fc7\u6e21\u7684\u7ed3\u675f\u72b6\u6001\u3002\u5728\u79bb\u5f00\u8fc7\u6e21\u88ab\u89e6\u53d1\u65f6\u751f\u6548\uff0c\u5728 transition\/animation \u5b8c\u6210\u4e4b\u540e\u79fb\u9664\u3002<\/li>\n<\/ol>\n<pre class=\"lang:html decode:true\"><!-- html -->\n<\/pre>\n<div id=\"app-5-1\">\n<p><button> Toggle render <\/button><\/p>\n<p>hello<\/p>\n<p>\u00a0<\/p>\n<\/div>\n<p><!-- js --> <script>\n    var app5_1 = new Vue({\n        el: \"#app-5-1\",\n        data:{\n            \"show\":true\n        }\n    })\n    <\/script> <!-- css --><\/p>\n<style>\n.silde-fade-enter-active{<br \/>\n  transition:all .3s ease;<br \/>\n}<br \/>\n.silde-fade-leave-active{<br \/>\n  transition:all .8s ease;<br \/>\n}<br \/>\n.silde-fade-enter, .silde-fade-leave-active{<br \/>\n  transform: translateX(10px);<br \/>\n  opacity: 0;<br \/>\n}<br \/>\n<\/style>\n<h2>\u5b9e\u4f8b\u5316\u7684\u4e00\u4e9b\u5c0f\u4e8b<\/h2>\n<p>\u5982\u679c\u6211\u5b9e\u4f8b\u5316\u7684\u65f6\u5019\u6ca1\u6709\u5b9a\u4e49b\u53d8\u91cf\uff0c\u5728\u76d1\u542ca\u53d8\u5316\u4e4b\u540e\u624d\u5b9a\u4e49\u503c\u7684\u8bdd<br \/>\n\u7b2c\u4e00\u6b21b\u4f1a\u6b63\u5e38\u663e\u793a\u51fa\u6765\uff0c\u4f46\u662f\u7b2c\u4e8c\u6b21dom\uff08{{ b }}\uff09\u6ca1\u6709\u53cd\u5e94\u4f46\u8d4b\u503c\uff08vm.b\uff09\u5df2\u7ecf\u53d8\u4e86\u4e5f\u5c31\u662f\uff0c<br \/>\n\u7b2c\u4e09\u6b21a\u6539\u53d8\uff0cdom\uff08{{ b }}\uff09\u663e\u793a\u7b2c\u4e8c\u6b21\u7684\u7ed3\u679c\uff0c\u4f46\u8d4b\u503c\uff08vm.b\uff09\u548c\u7b2c\u4e09\u6b21\u540c\u6b65<br \/>\n\u5047\u5982\u4e00\u5f00\u59cb\u5c31\u5b9a\u4e49b\uff0c\u5c31\u4e0d\u4f1a\u53d1\u751f\u8fd9\u79cd\u7384\u5b66\u7684\u4e8b\u60c5<\/p>\n<pre class=\"lang:html decode:true\"><!-- html -->\n<\/pre>\n<div>Vue\u5b9e\u4f8b\u66b4\u9732\u7684\u4e00\u4e9b\u5b9e\u4f8b\u5c5e\u6027\u4e0e\u65b9\u6cd5<\/div>\n<p>&nbsp;<\/p>\n<div id=\"app1-2\">\n<p>\u5230\u63a7\u5236\u53f0\u6539\u53d8data.a\u7684\u503c\u8bd5\u8bd5\u5427 \u6570\u636e a={{ a }}<\/p>\n<p>tip:{{ b }}<\/p>\n<p>\u00a0<\/p>\n<\/div>\n<p><!-- js --> <script>\n    var data = {\n  a: 1 ,\n \/\/ b: \"\" ,\n  show: false\n};\nvar vm = new Vue({\n  el: \"#app1-2\",\n  data: data,\n})\nvm.$data === data; \/\/ -> true\nvm.$el === document.getElementById(\"app1-2\");\nvm.$watch(\"a\",function(newVal, oldVal){\n  this.show = true;\n  this.b = <code>\u6570\u636e\u5df2\u88ab\u6539\u53d8[${oldVal} -&gt; ${newVal}]<\/code>;\n  console.log(this.b);\n})\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue\u521d\u63a2\u7b14\u8bb0 \u7ed1\u5b9a\u4e8b\u4ef6 \u7ed1\u5b9a\u4e8b\u4ef6\u53ef\u4ee5\u7528v-on\uff0c\u5e76\u4e14\u5728\u51fd\u6570\u4e2d this \u6307\u5411\u4e86data, \u4e00\u822c\u6587\u6863\u64cd\u4f5c\u9700\u8981\u8f6c &hellip; <a href=\"https:\/\/loveuhouse.cn\/wordpress\/?p=603\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">Vue\u521d\u63a2\u7b14\u8bb0<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25],"tags":[],"_links":{"self":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/603"}],"collection":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=603"}],"version-history":[{"count":10,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/603\/revisions"}],"predecessor-version":[{"id":832,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/603\/revisions\/832"}],"wp:attachment":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}