{"id":2223,"date":"2023-10-10T09:54:54","date_gmt":"2023-10-10T01:54:54","guid":{"rendered":"https:\/\/white-night.club\/?p=2223"},"modified":"2023-11-09T11:07:51","modified_gmt":"2023-11-09T03:07:51","slug":"appdev13","status":"publish","type":"post","link":"https:\/\/white-night.club\/index.php\/2023\/10\/10\/appdev13\/","title":{"rendered":"\u5728WordPress\u4e2d\u4f7f\u7528Vue"},"content":{"rendered":"\n<p>\u901a\u8fc7CDN\u5728Wordpress\u4e2d\u5bfc\u5165Vue\u3002<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote has-luminous-vivid-amber-color has-text-color\">\n<p>\u524d\u60c5\u63d0\u8981<\/p>\n<cite><em>\u5927\u81f4\u8bb2\u4e00\u4e0b\u4e3a\u4ec0\u4e48\u8fd9\u4e48\u505a<\/em><\/cite><\/blockquote>\n\n\n\n<p>\u672c\u6587\u7684\u5173\u952e\u4e3a\u81ea\u5b9a\u4e49HTML\u3002\u6211\u4e5f\u662f\u6700\u8fd1\u5728\u7f16\u8f91\u9875\u9762\u6a21\u677f\u7684\u65f6\u5019\uff0c\u624d\u53d1\u73b0\u8fd9\u4e2a\u533a\u5757\uff0c\u800c\u4e14\u53d1\u73b0\u5b83\u5c45\u7136\u8fd9\u4e48\u6709\u7528\u3002\u6709\u4e86\u8fd9\u4e2a\u533a\u5757\u4e4b\u540e\u81ea\u5b9a\u4e49\u4e00\u4e9b\u5c0f\u7ec4\u4ef6\u5565\u7684\u8fd8\u662f\u633a\u4e0d\u9519\u7684\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/white-night.club\/wp-content\/uploads\/2023\/10\/c6c971e1fe0fdcd920c22cc688d6292-1024x477.png\" alt=\"\" class=\"wp-image-2226\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/white-night.club\/wp-content\/uploads\/2023\/10\/c6c971e1fe0fdcd920c22cc688d6292-1024x477.png 1024w, https:\/\/white-night.club\/wp-content\/uploads\/2023\/10\/c6c971e1fe0fdcd920c22cc688d6292-300x140.png 300w, https:\/\/white-night.club\/wp-content\/uploads\/2023\/10\/c6c971e1fe0fdcd920c22cc688d6292-768x358.png 768w, https:\/\/white-night.club\/wp-content\/uploads\/2023\/10\/c6c971e1fe0fdcd920c22cc688d6292-1536x716.png 1536w, https:\/\/white-night.club\/wp-content\/uploads\/2023\/10\/c6c971e1fe0fdcd920c22cc688d6292.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote has-luminous-vivid-amber-color has-text-color\">\n<p>\u5f15\u5165Vue<\/p>\n<cite><em>\u901a\u8fc7CDN\u7684\u65b9\u5f0f\u5f15\u5165Vue<\/em><\/cite><\/blockquote>\n\n\n\n<p>\u901a\u8fc7CDN\u5f15\u5165Vue\u7684\u8bdd\uff0c\u6bd4\u8f83\u7b80\u5355\u4e5f\u6bd4\u8f83\u76f4\u89c2\u3002\u7f3a\u70b9\u5c31\u662f\u6ca1\u6cd5\u7528SFC\uff08<em>Single-File Components<\/em>\uff09\u3002SFC\u7684\u683c\u5f0f\u5982\u4e0b\uff0c\u76f8\u5bf9\u4e8e\u628ahtml+js+css\u96c6\u5408\u5728\u4e00\u4e2a\u6587\u4ef6\uff08.vue)\u4e2d\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#00ff2f\" class=\"has-inline-color\">\/\/test.vue<\/mark>\n&lt;script>\n<mark style=\"background-color:rgba(0, 0, 0, 0);color:#00ff2f\" class=\"has-inline-color\">\/\/Javascript\u903b\u8f91<\/mark>\n&lt;\/script>\n\n&lt;template>\n<mark style=\"background-color:rgba(0, 0, 0, 0);color:#00ff2f\" class=\"has-inline-color\">\/\/Html\u6a21\u677f<\/mark>\n&lt;\/template>\n\n&lt;style>\n<mark style=\"background-color:rgba(0, 0, 0, 0);color:#00ff2f\" class=\"has-inline-color\">\/\/CSS\u6837\u5f0f<\/mark>\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>\u901a\u8fc7CDN\u5f15\u5165Vue\u7684\u683c\u5f0f\u4e3a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote has-luminous-vivid-amber-color has-text-color\">\n<p>Vue\u4f7f\u7528\u4f8b<\/p>\n<cite><em>\u4e0e\u81ea\u5b9a\u4e49HTML\u7ec4\u5408<\/em><\/cite><\/blockquote>\n\n\n\n<p>\u5148\u653e\u5f15\u5165Vue\u7684\u81ea\u5b9a\u4e49HTML\u7ec4\u4ef6\u4ee3\u7801\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/3.3.4\/vue.global.js\"&gt;&lt;\/script&gt;\n\n&lt;div id=\"app\"&gt;\n  &lt;button @click=\"addone\"&gt;\n    Click This\n  &lt;\/button&gt;\n  &lt;span v-if=\"flag\"&gt;{{msg}}&lt;\/span&gt;\n  &lt;span v-else=\"\"&gt;{{msg}}&lt;\/span&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n  const { createApp, ref } = Vue\n\n  createApp({\n    setup() {\n      var msg = ref(\"Empty\")\n      var flag=true;\n      function addone()\n      {\n        if(flag==true)\n        {\n            flag=false\n            msg.value=\"OK\"\n        }else\n        {\n            flag=true\n            msg.value=\"Not OK\"\n        }\n      }\n      return {\n        msg,\n        flag,\n        addone\n      }\n    }\n  }).mount('#app')\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u4ee5\u53ca\u8be5\u81ea\u5b9a\u4e49HTML\u533a\u5757\u5c55\u793a\u7684\u6548\u679c\uff0c\u52a0\u8f7d\u53ef\u80fd\u6709\u70b9\u6162<\/p>\n\n\n\n<script src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/3.3.4\/vue.global.js\"><\/script>\n\n<div id=\"app\">\n  <button @click=\"addone\">\n    Click This\n  <\/button>\n  <span v-if=\"flag\">{{msg}}<\/span>\n  <span v-else=\"\">{{msg}}<\/span>\n<\/div>\n\n<script>\n  const { createApp, ref } = Vue\n\n  createApp({\n    setup() {\n      var msg = ref(\"Empty\")\n      var flag=true;\n      function addone()\n      {\n        if(flag==true)\n        {\n            flag=false\n            msg.value=\"OK\"\n        }else\n        {\n            flag=true\n            msg.value=\"Not OK\"\n        }\n      }\n      return {\n        msg,\n        flag,\n        addone\n      }\n    }\n  }).mount('#app')\n<\/script>\n\n\n\n<p>\u5f53\u7136\uff0c\u901a\u8fc7CDN\u52a0\u8f7dVue\u6709\u4e2a\u95ee\u9898\uff0c\u7f51\u901f\u4e0d\u597d\u7684\u8bdd\u5c31\u4f1a\u5728\u52a0\u8f7dVue\u4e4b\u524d\u52a0\u8f7d\u51fa\u6765\u9875\u9762\uff0c\u5bfc\u81f4\u9875\u9762\u5176\u4ed6\u7684\u5185\u5bb9\u52a0\u8f7d\u51fa\u6765\u4e86\uff0c\u4f46\u662f\u81ea\u5b9a\u4e49HTML\u533a\u5757\u7684\u5185\u5bb9\u6ca1\u6709\u52a0\u8f7d\u51fa\u6765\u3002\u5f53\u7136\u4e5f\u53ef\u4ee5\u6362\u56fd\u5185\u7684CDN\u6e90\uff0c\u8fd9\u91cc\u662f\u7528\u4e86boootcdn\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u81ea\u5b9a\u4e49HTML\uff1aVue\u57fa\u7840<\/p>\n","protected":false},"author":1,"featured_media":2226,"comment_status":"open","ping_status":"","sticky":false,"template":"base","format":"standard","meta":{"footnotes":""},"categories":[72,51],"tags":[73,86],"_links":{"self":[{"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/posts\/2223"}],"collection":[{"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/comments?post=2223"}],"version-history":[{"count":0,"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/posts\/2223\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/media\/2226"}],"wp:attachment":[{"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/media?parent=2223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/categories?post=2223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/white-night.club\/index.php\/wp-json\/wp\/v2\/tags?post=2223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}