{"id":63,"date":"2022-05-29T12:48:41","date_gmt":"2022-05-29T04:48:41","guid":{"rendered":"http:\/\/www.33weixin.com\/index\/?p=63"},"modified":"2022-05-29T12:51:58","modified_gmt":"2022-05-29T04:51:58","slug":"%e8%bf%87%e6%b8%a1%e7%8a%b6%e6%80%81","status":"publish","type":"post","link":"http:\/\/www.33weixin.com\/index\/index.php\/2022\/05\/29\/%e8%bf%87%e6%b8%a1%e7%8a%b6%e6%80%81\/","title":{"rendered":"\u8fc7\u6e21\u72b6\u6001"},"content":{"rendered":"<p>Vue \u7684\u8fc7\u6e21\u7cfb\u7edf\u63d0\u4f9b\u4e86\u975e\u5e38\u591a\u7b80\u5355\u7684\u65b9\u6cd5\u8bbe\u7f6e\u8fdb\u5165\u3001\u79bb\u5f00\u548c\u5217\u8868\u7684\u52a8\u6548\u3002\u90a3\u4e48\u5bf9\u4e8e\u6570\u636e\u5143\u7d20\u672c\u8eab\u7684\u52a8\u6548\u5462\uff0c\u6bd4\u5982\uff1a<\/p>\n<ul>\n<li>\u6570\u5b57\u548c\u8fd0\u7b97<\/li>\n<li>\u989c\u8272\u7684\u663e\u793a<\/li>\n<li>SVG \u8282\u70b9\u7684\u4f4d\u7f6e<\/li>\n<li>\u5143\u7d20\u7684\u5927\u5c0f\u548c\u5176\u4ed6\u7684\u5c5e\u6027<\/li>\n<\/ul>\n<p>\u6240\u6709\u7684\u539f\u59cb\u6570\u5b57\u90fd\u88ab\u4e8b\u5148\u5b58\u50a8\u8d77\u6765\uff0c\u53ef\u4ee5\u76f4\u63a5\u8f6c\u6362\u5230\u6570\u5b57\u3002\u505a\u5230\u8fd9\u4e00\u6b65\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u7ed3\u5408 Vue \u7684\u54cd\u5e94\u5f0f\u548c\u7ec4\u4ef6\u7cfb\u7edf\uff0c\u4f7f\u7528\u7b2c\u4e09\u65b9\u5e93\u6765\u5b9e\u73b0\u5207\u6362\u5143\u7d20\u7684\u8fc7\u6e21\u72b6\u6001\u3002<\/p>\n<h2 id=\"\u72b6\u6001\u52a8\u753b-\u4e0e-watcher\">\u72b6\u6001\u52a8\u753b \u4e0e watcher<\/h2>\n<p>\u901a\u8fc7 watcher \u6211\u4eec\u80fd\u76d1\u542c\u5230\u4efb\u4f55\u6570\u503c\u5c5e\u6027\u7684\u6570\u503c\u66f4\u65b0\u3002\u53ef\u80fd\u542c\u8d77\u6765\u5f88\u62bd\u8c61\uff0c\u6240\u4ee5\u8ba9\u6211\u4eec\u5148\u6765\u770b\u770b\u4f7f\u7528Tweenjs\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/tween.js@16.3.4\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"animated-number-demo\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">v-model.number<\/span>=<span class=\"hljs-string\">\"number\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"number\"<\/span> <span class=\"hljs-attr\">step<\/span>=<span class=\"hljs-string\">\"20\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{{ animatedNumber }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<pre><code class=\"lang-js\"><span class=\"hljs-keyword\">new<\/span> Vue({\n  el: <span class=\"hljs-string\">'#animated-number-demo'<\/span>,\n  data: {\n    number: <span class=\"hljs-number\">0<\/span>,\n    animatedNumber: <span class=\"hljs-number\">0<\/span>\n  },\n  watch: {\n    number: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">newValue, oldValue<\/span>) <\/span>{\n      <span class=\"hljs-keyword\">var<\/span> vm = <span class=\"hljs-keyword\">this<\/span>\n      <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">animate<\/span> (<span class=\"hljs-params\">time<\/span>) <\/span>{\n        requestAnimationFrame(animate)\n        TWEEN.update(time)\n      }\n      <span class=\"hljs-keyword\">new<\/span> TWEEN.Tween({ tweeningNumber: oldValue })\n        .easing(TWEEN.Easing.Quadratic.Out)\n        .to({ tweeningNumber: newValue }, <span class=\"hljs-number\">500<\/span>)\n        .onUpdate(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> () <\/span>{\n          vm.animatedNumber = <span class=\"hljs-keyword\">this<\/span>.tweeningNumber.toFixed(<span class=\"hljs-number\">0<\/span>)\n        })\n        .start()\n      animate()\n    }\n  }\n})\n<\/code><\/pre>\n<div id=\"animated-number-demo\" class=\"demo\"><input step=\"20\" type=\"number\" \/>0<\/p>\n<\/div>\n<p>\u5f53\u4f60\u628a\u6570\u503c\u66f4\u65b0\u65f6\uff0c\u5c31\u4f1a\u89e6\u53d1\u52a8\u753b\u3002\u8fd9\u4e2a\u662f\u4e00\u4e2a\u4e0d\u9519\u7684\u6f14\u793a\uff0c\u4f46\u662f\u5bf9\u4e8e\u4e0d\u80fd\u76f4\u63a5\u50cf\u6570\u5b57\u4e00\u6837\u5b58\u50a8\u7684\u503c\uff0c\u6bd4\u5982 CSS \u4e2d\u7684 color \u7684\u503c\uff0c\u901a\u8fc7\u4e0b\u9762\u7684\u4f8b\u5b50\u6211\u4eec\u6765\u901a\u8fc7 Color.js \u5b9e\u73b0\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"lang-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/tween.js@16.3.4\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/color-js@1.0.3\/color.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"example-7\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n    <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"colorQuery\"<\/span>\n    <span class=\"hljs-attr\">v-on:keyup.enter<\/span>=<span class=\"hljs-string\">\"updateColor\"<\/span>\n    <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter a color\"<\/span>\n  &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">v-on:click<\/span>=<span class=\"hljs-string\">\"updateColor\"<\/span>&gt;<\/span>Update<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Preview:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>\n    <span class=\"hljs-attr\">v-bind:style<\/span>=<span class=\"hljs-string\">\"{ backgroundColor: tweenedCSSColor }\"<\/span>\n    <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"example-7-color-preview\"<\/span>\n  &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/pre>\n<pre><code class=\"lang-js\"><span class=\"hljs-keyword\">var<\/span> Color = net.brehaut.Color\n\n<span class=\"hljs-keyword\">new<\/span> Vue({\n  el: <span class=\"hljs-string\">'#example-7'<\/span>,\n  data: {\n    colorQuery: <span class=\"hljs-string\">''<\/span>,\n    color: {\n      red: <span class=\"hljs-number\">0<\/span>,\n      green: <span class=\"hljs-number\">0<\/span>,\n      blue: <span class=\"hljs-number\">0<\/span>,\n      alpha: <span class=\"hljs-number\">1<\/span>\n    },\n    tweenedColor: {}\n  },\n  created: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> () <\/span>{\n    <span class=\"hljs-keyword\">this<\/span>.tweenedColor = <span class=\"hljs-built_in\">Object<\/span>.assign({}, <span class=\"hljs-keyword\">this<\/span>.color)\n  },\n  watch: {\n    color: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> () <\/span>{\n      <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">animate<\/span> (<span class=\"hljs-params\">time<\/span>) <\/span>{\n        requestAnimationFrame(animate)\n        TWEEN.update(time)\n      }\n      <span class=\"hljs-keyword\">new<\/span> TWEEN.Tween(<span class=\"hljs-keyword\">this<\/span>.tweenedColor)\n        .to(<span class=\"hljs-keyword\">this<\/span>.color, <span class=\"hljs-number\">750<\/span>)\n        .start()\n      animate()\n    }\n  },\n  computed: {\n    tweenedCSSColor: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> () <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> Color({\n        red: <span class=\"hljs-keyword\">this<\/span>.tweenedColor.red,\n        green: <span class=\"hljs-keyword\">this<\/span>.tweenedColor.green,\n        blue: <span class=\"hljs-keyword\">this<\/span>.tweenedColor.blue,\n        alpha: <span class=\"hljs-keyword\">this<\/span>.tweenedColor.alpha\n      }).toCSS()\n    }\n  },\n  methods: {\n    updateColor: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> () <\/span>{\n      <span class=\"hljs-keyword\">this<\/span>.color = <span class=\"hljs-keyword\">new<\/span> Color(<span class=\"hljs-keyword\">this<\/span>.colorQuery).toRGB()\n      <span class=\"hljs-keyword\">this<\/span>.colorQuery = <span class=\"hljs-string\">''<\/span>\n    }\n  }\n})\n<\/code><\/pre>\n<pre><code class=\"lang-css\"><span class=\"hljs-selector-class\">.example-7-color-preview<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: inline-block;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">50px<\/span>;\n}\n<\/code><\/pre>\n<div id=\"example-7\" class=\"demo\"><input type=\"text\" placeholder=\"Enter a color\" \/>\u00a0<button>Update<\/button>Preview:<\/p>\n<p>{{ tweenedCSSColor }}<\/p>\n<\/div>\n<p>## \u52a8\u6001\u72b6\u6001\u8f6c\u6362 \u5c31\u50cf Vue \u7684\u8fc7\u6e21\u7ec4\u4ef6\u4e00\u6837\uff0c\u6570\u636e\u80cc\u540e\u72b6\u6001\u8f6c\u6362\u4f1a\u5b9e\u65f6\u66f4\u65b0\uff0c\u8fd9\u5bf9\u4e8e\u539f\u578b\u8bbe\u8ba1\u5341\u5206\u6709\u7528\u3002\u5f53\u4f60\u4fee\u6539\u4e00\u4e9b\u53d8\u91cf\uff0c\u5373\u4f7f\u662f\u4e00\u4e2a\u7b80\u5355\u7684 SVG \u591a\u8fb9\u5f62\u4e5f\u53ef\u662f\u5b9e\u73b0\u5f88\u591a\u96be\u4ee5\u60f3\u8c61\u7684\u6548\u679c\u3002<\/p>\n<div id=\"svg-polygon-demo\" class=\"demo\"><label>Sides: 10<\/label><input class=\"demo-range-input\" max=\"500\" min=\"3\" type=\"range\" \/><label>Minimum Radius: 50%<\/label><input class=\"demo-range-input\" max=\"90\" min=\"0\" type=\"range\" \/><label>Update Interval: 500 milliseconds<\/label><input class=\"demo-range-input\" max=\"2000\" min=\"10\" type=\"range\" \/><\/div>\n<p>See [this fiddle](https:\/\/jsfiddle.net\/chrisvfritz\/65gLu2b6\/) for the complete code behind the above demo. ## \u901a\u8fc7\u7ec4\u4ef6\u7ec4\u7ec7\u8fc7\u6e21 \u7ba1\u7406\u592a\u591a\u7684\u72b6\u6001\u8f6c\u6362\u7684\u5f88\u5feb\u4f1a\u63a5\u8fd1\u5230 Vue \u5b9e\u4f8b\u6216\u8005\u7ec4\u4ef6\u7684\u590d\u6742\u6027\uff0c\u5e78\u597d\u5f88\u591a\u7684\u52a8\u753b\u53ef\u4ee5\u63d0\u53d6\u5230\u4e13\u7528\u7684\u5b50\u7ec4\u4ef6\u3002 \u6211\u4eec\u6765\u5c06\u4e4b\u524d\u7684\u793a\u4f8b\u6539\u5199\u4e00\u4e0b\uff1a &#8220;` html<\/p>\n<div id=\"example-8\"><input step=\"20\" type=\"number\" \/>\u00a0+\u00a0<input step=\"20\" type=\"number\" \/>\u00a0=<\/div>\n<p>+\u00a0=<\/p>\n<p>&lt;\/div&gt;<\/p>\n<pre><code>\n``` js\n\/\/ \u8fd9\u79cd\u590d\u6742\u7684\u8865\u95f4\u52a8\u753b\u903b\u8f91\u53ef\u4ee5\u88ab\u590d\u7528\n\/\/ \u4efb\u4f55\u6574\u6570\u90fd\u53ef\u4ee5\u6267\u884c\u52a8\u753b\n\/\/ \u7ec4\u4ef6\u5316\u4f7f\u6211\u4eec\u7684\u754c\u9762\u5341\u5206\u6e05\u6670\n\/\/ \u53ef\u4ee5\u652f\u6301\u66f4\u591a\u66f4\u590d\u6742\u7684\u52a8\u6001\u8fc7\u6e21\n\/\/ strategies.\nVue.component('animated-integer', {\n  template: '&lt;span&gt;&lt;\/span&gt;',\n  props: {\n    value: {\n      type: Number,\n      required: true\n    }\n  },\n  data: function () {\n    return {\n      tweeningValue: 0\n    }\n  },\n  watch: {\n    value: function (newValue, oldValue) {\n      this.tween(oldValue, newValue)\n    }\n  },\n  mounted: function () {\n    this.tween(0, this.value)\n  },\n  methods: {\n    tween: function (startValue, endValue) {\n      var vm = this\n      function animate (time) {\n        requestAnimationFrame(animate)\n        TWEEN.update(time)\n      }\n      new TWEEN.Tween({ tweeningValue: startValue })\n        .to({ tweeningValue: endValue }, 500)\n        .onUpdate(function () {\n          vm.tweeningValue = this.tweeningValue.toFixed(0)\n        })\n        .start()\n      animate()\n    }\n  }\n})\n\n\/\/ All complexity has now been removed from the main Vue instance!\nnew Vue({\n  el: '#example-8',\n  data: {\n    firstNumber: 20,\n    secondNumber: 40\n  },\n  computed: {\n    result: function () {\n      return this.firstNumber + this.secondNumber\n    }\n  }\n})\n<\/code><\/pre>\n<div id=\"example-8\" class=\"demo\"><input step=\"20\" type=\"number\" \/>\u00a0+\u00a0<input step=\"20\" type=\"number\" \/>\u00a0= {{ result }}+\u00a0=<\/p>\n<\/div>\n<p>\u6211\u4eec\u80fd\u5728\u7ec4\u4ef6\u4e2d\u7ed3\u5408\u4f7f\u7528\u8fd9\u4e00\u8282\u8bb2\u5230\u5404\u79cd\u8fc7\u6e21\u7b56\u7565\u548c Vue\u00a0<a href=\"http:\/\/caibaojian.com\/vue\/guide\/transitions.html\">\u5185\u5efa\u7684\u8fc7\u6e21\u7cfb\u7edf<\/a>\u3002\u603b\u4e4b\uff0c\u5bf9\u4e8e\u5b8c\u6210\u5404\u79cd\u8fc7\u6e21\u52a8\u6548\u51e0\u4e4e\u6ca1\u6709\u963b\u788d\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue \u7684\u8fc7\u6e21\u7cfb\u7edf\u63d0\u4f9b\u4e86\u975e\u5e38\u591a\u7b80\u5355\u7684\u65b9\u6cd5\u8bbe\u7f6e\u8fdb\u5165\u3001\u79bb\u5f00\u548c\u5217\u8868\u7684\u52a8\u6548\u3002\u90a3\u4e48\u5bf9\u4e8e\u6570\u636e\u5143\u7d20\u672c\u8eab\u7684\u52a8\u6548\u5462\uff0c\u6bd4\u5982\uff1a \u6570\u5b57&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts\/63"}],"collection":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":1,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts\/63\/revisions"}],"predecessor-version":[{"id":64,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts\/63\/revisions\/64"}],"wp:attachment":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/categories?post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/tags?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}