{"id":17454,"date":"2025-05-30T09:21:00","date_gmt":"2025-05-30T01:21:00","guid":{"rendered":"https:\/\/92it.top\/?p=17454"},"modified":"2025-05-30T09:21:00","modified_gmt":"2025-05-30T01:21:00","slug":"vue-react%e7%9a%84%e6%a1%86%e6%9e%b6-%e9%bc%a0%e6%a0%87%e5%8f%b3%e9%94%ae%e7%9c%8b%e5%88%b0%e7%9a%84%e9%9d%99%e6%80%81html%e6%98%af%e6%b8%b2%e6%9f%93%e5%90%8e%e7%9a%84%e5%90%97%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=17454","title":{"rendered":"Vue React\u7684\u6846\u67b6 \u9f20\u6807\u53f3\u952e\u770b\u5230\u7684\u9759\u6001html\u662f\u6e32\u67d3\u540e\u7684\u5417\uff1f"},"content":{"rendered":"\n

\u5728 Vue \u9875\u9762\u4e2d\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u9f20\u6807\u53f3\u952e\u9009\u62e9 \u201c\u67e5\u770b\u7f51\u9875\u6e90\u4ee3\u7801\u201d \u770b\u5230\u7684\u662f\u521d\u59cb\u5316\u7684\u9759\u6001 HTML<\/strong>\uff0c\u800c\u4e0d\u662f\u6e32\u67d3\u540e\u7684 HTML \uff0c\u4e3b\u8981\u539f\u56e0\u5982\u4e0b\uff1a<\/p>\n\n\n\n

\u9759\u6001 HTML \u7684\u52a0\u8f7d\u4e0e\u663e\u793a\u539f\u7406<\/strong><\/p>\n\n\n\n

\n\n\n\n

\u5f53\u6d4f\u89c8\u5668\u8bf7\u6c42\u4e00\u4e2a Vue \u5e94\u7528\u65f6\uff0c\u670d\u52a1\u5668\u4f1a\u5148\u8fd4\u56de\u4e00\u4e2a\u57fa\u7840\u7684 HTML \u6587\u4ef6\uff0c\u8fd9\u4e2a\u6587\u4ef6\u5305\u542b\u4e86\u7f51\u9875\u7684\u57fa\u672c\u7ed3\u6784\uff0c\u6bd4\u5982<html><\/code>\u3001<head><\/code>\u3001<body><\/code>\u6807\u7b7e\uff0c\u4ee5\u53ca\u7528\u4e8e\u6302\u8f7d Vue \u5e94\u7528\u7684 DOM \u5143\u7d20\uff08\u901a\u5e38\u662f\u4e00\u4e2a\u5e26\u6709\u7279\u5b9a ID \u7684<div><\/code>\uff0c\u4f8b\u5982<div id=\"app\"><\/div><\/code>\u00a0\uff09\uff0c\u8fd8\u4f1a\u5305\u542b\u5bf9 JavaScript \u548c CSS \u6587\u4ef6\u7684\u5f15\u7528\u7b49\u3002\u6d4f\u89c8\u5668\u63a5\u6536\u5230\u8fd9\u4e2a HTML \u6587\u4ef6\u540e\uff0c\u4f1a\u5148\u89e3\u6790\u5e76\u5c55\u793a\u8fd9\u4e2a\u9759\u6001\u7ed3\u6784\uff0c\u7136\u540e\u5f00\u59cb\u52a0\u8f7d\u5e76\u6267\u884c\u76f8\u5173\u7684 JavaScript \u4ee3\u7801\u3002<\/p>\n\n\n\n

\u6e32\u67d3\u540e\u7684 HTML \u7684\u751f\u6210\u8fc7\u7a0b<\/strong><\/p>\n\n\n\n

\n\n\n\n

Vue \u5e94\u7528\u5728\u52a0\u8f7d\u5e76\u6267\u884c\u76f8\u5173 JavaScript \u4ee3\u7801\u540e\uff0c\u4f1a\u6839\u636e\u7ec4\u4ef6\u7684\u5b9a\u4e49\u3001\u6570\u636e\u7ed1\u5b9a\u548c\u6307\u4ee4\u7b49\uff0c\u901a\u8fc7\u6a21\u677f\u7f16\u8bd1\u3001\u865a\u62df DOM \u7b49\u6280\u672f\uff0c\u5728\u5185\u5b58\u4e2d\u6784\u5efa\u865a\u62df DOM \u6811\uff0c\u7136\u540e\u5c06\u5176\u6e32\u67d3\u6210\u771f\u5b9e\u7684 DOM\uff0c\u5e76\u6302\u8f7d\u5230\u4e4b\u524d\u63d0\u5230\u7684\u6302\u8f7d\u70b9\u4e0a\u3002\u8fd9\u4e00\u7cfb\u5217\u64cd\u4f5c\u662f\u5728\u6d4f\u89c8\u5668\u7684 JavaScript \u8fd0\u884c\u73af\u5883\u4e2d\u5b8c\u6210\u7684\uff0c\u5c5e\u4e8e\u52a8\u6001\u884c\u4e3a\u3002<\/p>\n\n\n\n

\u4f8b\u5982\uff0c\u6709\u4e00\u4e2a\u7b80\u5355\u7684 Vue \u5e94\u7528\u4ee3\u7801\uff1a<\/p>\n\n\n\n

1. \u521d\u59cb HTML \u6587\u4ef6\uff08index.html\uff09<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n  <title>Vue App<\/title>\n<\/head>\n<body>\n  <!-- Vue \u5e94\u7528\u7684\u6302\u8f7d\u70b9 -->\n  <div id=\"app\"><\/div>\n  \n  <!-- \u5f15\u5165 Vue 3 -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.2.47\/dist\/vue.global.prod.js\"><\/script>\n  \n  <!-- \u5e94\u7528\u4ee3\u7801 -->\n  <script>\n    const { createApp } = Vue;\n    \n    const App = {\n      data() {\n        return {\n          message: 'Hello Vue!',\n          users: ['Alice', 'Bob', 'Charlie']\n        }\n      },\n      template: `\n        <div class=\"container\">\n          <h1>{{ message }}<\/h1>\n          <ul>\n            <li v-for=\"user in users\" :key=\"user\">{{ user }}<\/li>\n          <\/ul>\n          <button @click=\"addUser\">Add User<\/button>\n        <\/div>\n      `,\n      methods: {\n        addUser() {\n          this.users.push('New User');\n        }\n      }\n    };\n    \n    createApp(App).mount('#app');\n  <\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
    \n
  • \u5173\u952e\u70b9<\/strong>\uff1a\n
      \n
    • <div id=\"app\"><\/code>\u00a0\u662f Vue \u5e94\u7528\u7684\u6302\u8f7d\u70b9<\/strong>\uff0c\u521d\u59cb\u4e3a\u7a7a\u3002<\/li>\n\n\n\n
    • \u9875\u9762\u52a0\u8f7d\u65f6\uff0c\u6d4f\u89c8\u5668\u9996\u5148\u89e3\u6790\u8fd9\u4e2a HTML \u6587\u4ef6\uff0c\u6267\u884c JavaScript \u4ee3\u7801\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
      2. Vue \u5982\u4f55\u52a8\u6001\u751f\u6210 HTML<\/strong><\/p>\n\n\n\n
      const App = {\n  template: `\n    <div class=\"container\">\n      <h1>{{ message }}<\/h1>\n      <ul>\n        <li v-for=\"user in users\" :key=\"user\">{{ user }}<\/li>\n      <\/ul>\n      <button @click=\"addUser\">Add User<\/button>\n    <\/div>\n  `,\n  \/\/ ...\n};\n\ncreateApp(App).mount('#app'); \/\/ \u6302\u8f7d\u5e94\u7528<\/pre>\n\n\n\n
        \n
      • \u8fd0\u884c\u6d41\u7a0b<\/strong>\uff1a\n
          \n
        1. Vue \u89e3\u6790\u00a0template<\/code>\u00a0\u5b57\u7b26\u4e32\uff0c\u5c06\u5176\u7f16\u8bd1\u4e3a\u6e32\u67d3\u51fd\u6570<\/strong>\uff08\u865a\u62df DOM \u63cf\u8ff0\uff09\u3002<\/li>\n\n\n\n
        2. \u6267\u884c\u6e32\u67d3\u51fd\u6570\uff0c\u751f\u6210\u865a\u62df DOM \u6811<\/strong>\uff08JavaScript \u5bf9\u8c61\uff09\u3002<\/li>\n\n\n\n
        3. \u901a\u8fc7\u00a0mount('#app')<\/code>\u00a0\u5c06\u865a\u62df DOM \u8f6c\u6362\u4e3a\u771f\u5b9e DOM<\/strong>\uff0c\u5e76\u63d2\u5165\u5230\u00a0#app<\/code>\u00a0\u5143\u7d20\u4e2d\u3002<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n
          3.\u9f20\u6807\u53f3\u952e \u2192 \u67e5\u770b\u7f51\u9875\u6e90\u4ee3\u7801<\/strong><\/p>\n\n\n\n
          \u770b\u5230\u7684\u5185\u5bb9\uff1a<\/p>\n\n\n\n
          <!DOCTYPE html>\n<html>\n<head>\n  <title>Vue App<\/title>\n<\/head>\n<body>\n  <div id=\"app\"><\/div>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.2.47\/dist\/vue.global.prod.js\"><\/script>\n  <script>\n    \/\/ \u5e94\u7528\u4ee3\u7801\uff08\u5b8c\u6574\u663e\u793a\uff09\n  <\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
          \u539f\u56e0\uff1a\u53f3\u952e\u67e5\u770b\u6e90\u4ee3\u7801\u83b7\u53d6\u7684\u662f\u670d\u52a1\u5668\u6700\u521d\u8fd4\u56de\u7684\u9759\u6001 HTML \u6587\u4ef6<\/strong>\uff0c\u6b64\u65f6 Vue \u5c1a\u672a\u6267\u884c\uff0c#app<\/code>\u00a0\u8fd8\u662f\u7a7a\u7684\u3002<\/p>\n\n\n\n
          4.\u5f00\u53d1\u8005\u5de5\u5177 \u2192 Elements \u9762\u677f<\/strong><\/p>\n\n\n\n
          \u770b\u5230\u7684\u5185\u5bb9<\/strong>\uff1a
          <\/div><\/div><\/div><\/div><\/p>\n\n\n\n
          <body>\n  <div id=\"app\">\n    <div class=\"container\">\n      <h1>Hello Vue!<\/h1>\n      <ul>\n        <li>Alice<\/li>\n        <li>Bob<\/li>\n        <li>Charlie<\/li>\n      <\/ul>\n      <button>Add User<\/button>\n    <\/div>\n  <\/div>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.2.47\/dist\/vue.global.prod.js\"><\/script>\n  <script>\n    \/\/ \u5e94\u7528\u4ee3\u7801\uff08\u5b8c\u6574\u663e\u793a\uff09\n  <\/script>\n<\/body><\/pre>\n\n\n\n
          \u539f\u56e0\uff1aElements \u9762\u677f\u663e\u793a\u7684\u662f\u5f53\u524d\u6d4f\u89c8\u5668\u6e32\u67d3\u7684\u5b9e\u65f6 DOM<\/strong>\uff0cVue \u5df2\u7ecf\u5c06\u7ec4\u4ef6\u6e32\u67d3\u5b8c\u6210\u5e76\u63d2\u5165\u5230#app<\/code>\u4e2d\u3002<\/p>\n\n\n\n
          \u4e3a\u4ec0\u4e48\u4f1a\u8fd9\u6837\uff1f<\/strong><\/p>\n\n\n\n
          \n\n\n\n
            \n
          1. \u9759\u6001 HTML \u4e0e\u52a8\u6001\u6e32\u67d3\u7684\u5206\u79bb<\/strong>\n
              \n
            • Vue \u7684\u6a21\u677f\uff08\u5982\u00a0template: '<div>{{ message }}<\/div>'<\/code>\uff09\u5728\u6d4f\u89c8\u5668\u4e2d\u88ab\u7f16\u8bd1\u4e3a JavaScript \u4ee3\u7801\uff0c\u6267\u884c\u540e\u624d\u751f\u6210\u771f\u5b9e DOM\u3002<\/li>\n\n\n\n
            • \u53f3\u952e\u67e5\u770b\u7684\u662f\u78c1\u76d8\u4e0a\u7684\u539f\u59cb HTML \u6587\u4ef6\uff0c\u4e0d\u5305\u542b\u8fd0\u884c\u65f6\u4fee\u6539\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • \u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\u7684\u5de5\u4f5c\u539f\u7406<\/strong>\n
                \n
              • Elements \u9762\u677f\u5b9e\u65f6\u53cd\u6620 DOM \u72b6\u6001\uff0c\u5305\u62ec JavaScript \u52a8\u6001\u4fee\u6539\u7684\u5185\u5bb9\u3002<\/li>\n\n\n\n
              • \u800c\u53f3\u952e\u67e5\u770b\u6e90\u4ee3\u7801\u662f\u76f4\u63a5\u8bfb\u53d6 HTML \u6587\u4ef6\uff0c\u4e0e DOM \u72b6\u6001\u65e0\u5173\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
                \u52a8\u6001\u6e32\u67d3\uff1aVue \u548c React \u90fd\u662f\u6784\u5efa\u5355\u9875\u5e94\u7528\uff08SPA\uff09\u7684\u5e38\u7528\u6846\u67b6\uff0c\u5b83\u4eec\u7684\u9875\u9762\u5185\u5bb9\u662f\u901a\u8fc7 JavaScript \u5728\u6d4f\u89c8\u5668\u8fd0\u884c\u65f6\u52a8\u6001\u751f\u6210\u5e76\u6e32\u67d3\u5230 DOM \u4e0a\u7684\u3002\u521d\u59cb\u52a0\u8f7d\u7684 HTML \u6587\u4ef6\u53ef\u80fd\u53ea\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u9aa8\u67b6\uff0c\u5305\u542b\u57fa\u672c\u7684<html>\u3001<head>\u3001<body>\u7ed3\u6784\uff0c\u4ee5\u53ca\u7528\u4e8e\u6302\u8f7d Vue \u6216 React \u5e94\u7528\u7684\u4e00\u4e2a\u7a7a\u7684 DOM \u5143\u7d20\uff08\u6bd4\u5982<div id=\"app\"><\/div>\u00a0\uff09 \uff0c\u5b9e\u9645\u7684\u9875\u9762\u5185\u5bb9\u4f1a\u5728\u540e\u7eed\u7531\u6846\u67b6\u4ee3\u7801\u52a8\u6001\u586b\u5145\u3002

                \u865a\u62df DOM\uff1aVue \u548c React \u90fd\u4f7f\u7528\u4e86\u865a\u62df DOM\uff08Virtual DOM\uff09\u6280\u672f\u3002\u865a\u62df DOM \u662f\u5185\u5b58\u4e2d\u7684\u4e00\u79cd\u6570\u636e\u7ed3\u6784\uff0c\u7528\u4e8e\u9ad8\u6548\u5730\u66f4\u65b0\u771f\u5b9e DOM\u3002\u6846\u67b6\u4f1a\u6839\u636e\u6570\u636e\u53d8\u5316\u8ba1\u7b97\u51fa\u865a\u62df DOM \u7684\u5dee\u5f02\uff0c\u7136\u540e\u4e00\u6b21\u6027\u66f4\u65b0\u5230\u771f\u5b9e DOM \u4e0a\uff0c\u8fd9\u4f7f\u5f97\u6700\u7ec8\u5448\u73b0\u7684 DOM \u7ed3\u6784\u662f\u7ecf\u8fc7\u4e00\u7cfb\u5217\u52a8\u6001\u64cd\u4f5c\u540e\u7684\u7ed3\u679c\u3002<\/pre>\n\n\n\n
                \u67e5\u770b\u6700\u7ec8\u6e32\u67d3\u7684 HTML<\/strong><\/p>\n\n\n\n
                \n\n\n\n
                  \n
                • Elements \u9762\u677f\uff08Chrome\u3001Edge \u7b49\uff09<\/strong>\uff1a\u6253\u5f00\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u8005\u5de5\u5177\uff08\u5feb\u6377\u952e\u901a\u5e38\u662f F12\uff09\uff0c\u5207\u6362\u5230 \u201cElements\u201d \u9762\u677f\u3002\u5728\u8fd9\u4e2a\u9762\u677f\u4e2d\uff0c\u4f60\u53ef\u4ee5\u770b\u5230\u9875\u9762\u6700\u7ec8\u6e32\u67d3\u540e\u7684 HTML \u7ed3\u6784\u3002\u4f8b\u5982\uff0c\u5728\u4e00\u4e2a Vue \u5e94\u7528\u4e2d\uff0c\u5f53\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u539f\u672c\u7a7a\u7684#app<\/code>\u5143\u7d20\u4e0b\u4f1a\u51fa\u73b0\u7531 Vue \u7ec4\u4ef6\u6e32\u67d3\u51fa\u6765\u7684\u5404\u79cd HTML \u6807\u7b7e\uff0c\u50cf<div><\/code>\u3001<p><\/code>\u3001<button><\/code>\u7b49\uff0c\u4ee5\u53ca\u5bf9\u5e94\u7684\u5c5e\u6027\u548c\u6837\u5f0f\u3002<\/li>\n\n\n\n
                • Inspector \u9762\u677f\uff08Firefox\uff09<\/strong>\uff1a\u5728 Firefox \u6d4f\u89c8\u5668\u4e2d\uff0c\u5f00\u53d1\u8005\u5de5\u5177\u7684 \u201cInspector\u201d \u9762\u677f\u548c Chrome \u7b49\u6d4f\u89c8\u5668\u7684 \u201cElements\u201d \u9762\u677f\u7c7b\u4f3c\uff0c\u540c\u6837\u53ef\u4ee5\u67e5\u770b\u9875\u9762\u6700\u7ec8\u6e32\u67d3\u7684 HTML \u7ed3\u6784\u3002<\/li>\n\n\n\n
                • <\/li>\n<\/ul>\n\n\n\n
                  \u603b\u7ed3\u5bf9\u6bd4\u8868<\/strong><\/p>\n\n\n\n
                  \n\n\n\n
                  \u64cd\u4f5c<\/strong><\/th>\u770b\u5230\u7684\u5185\u5bb9<\/strong><\/th>\u5305\u542b\u52a8\u6001\u5185\u5bb9\uff1f<\/strong><\/th>\u80fd\u5426\u67e5\u770b Vue \u7ec4\u4ef6\uff1f<\/strong><\/th><\/tr><\/thead>
                  \u53f3\u952e \u2192 \u67e5\u770b\u6e90\u4ee3\u7801<\/td>\u9759\u6001 HTML \u6587\u4ef6\uff08\u542b\u6302\u8f7d\u70b9\u548c\u811a\u672c\uff09<\/td>\u274c<\/td>\u274c<\/td><\/tr>
                  \u5f00\u53d1\u8005\u5de5\u5177 \u2192 Elements<\/td>\u5b9e\u65f6\u6e32\u67d3\u7684 DOM \u6811<\/td>\u2705<\/td>\u274c\uff08\u9700\u901a\u8fc7 Vue Devtools\uff09<\/td><\/tr>
                  Vue Devtools<\/td>\u7ec4\u4ef6\u6811\u3001\u72b6\u6001\u548c\u4e8b\u4ef6<\/td>\u2705<\/td>\u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
                  \u5728 Vue \u9875\u9762\u4e2d\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u9f20\u6807\u53f3\u952e\u9009\u62e9 \u201c\u67e5\u770b\u7f51\u9875\u6e90\u4ee3\u7801\u201d \u770b\u5230\u7684\u662f\u521d\u59cb\u5316\u7684\u9759\u6001 HTML\uff0c\u800c\u4e0d\u662f\u6e32\u67d3\u540e\u7684 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,19],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/17454"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17454"}],"version-history":[{"count":1,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/17454\/revisions"}],"predecessor-version":[{"id":17455,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/17454\/revisions\/17455"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}