{"id":3180,"date":"2021-04-07T11:36:27","date_gmt":"2021-04-07T03:36:27","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3180"},"modified":"2026-08-18T12:35:33","modified_gmt":"2026-08-18T04:35:33","slug":"%e8%af%b4%e8%af%b4%e4%bd%a0%e5%af%b9vue%e7%9a%84%e7%90%86%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3180","title":{"rendered":"\u8bf4\u8bf4\u4f60\u5bf9vue\u7684\u7406\u89e3?"},"content":{"rendered":"<section id=\"wenyan\" style=\"font-family: system-ui, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Noto Sans', Roboto, sans-serif; line-height: 1.75; font-size: 16px; color: #000000; caret-color: #000000;\" data-provider=\"WenYan\">\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">Vue.js<\/strong>\uff08\/vju\u02d0\/\uff09\u662f\u7528\u6765\u521b\u5efa\u7528\u6237\u754c\u9762\u7684\u5f00\u6e90 JavaScript \u6846\u67b6\uff0c\u4e5f\u5e38\u88ab\u62ff\u6765\u505a\u5355\u9875\u5e94\u7528\u3002\u5b83\u5173\u6ce8 MVC \u91cc\u7684\u89c6\u56fe\u5c42\uff0c\u53c8\u80fd\u65b9\u4fbf\u5730\u62ff\u5230\u6570\u636e\u66f4\u65b0\uff0c\u901a\u8fc7\u7ec4\u4ef6\u65b9\u6cd5\u5b8c\u6210\u89c6\u56fe\u4e0e\u6a21\u578b\u4ea4\u4e92\u3002\u9762\u8bd5\u91cc\u300c\u8bf4\u8bf4\u4f60\u5bf9 Vue \u7684\u7406\u89e3\u300d\uff0c\u901a\u5e38\u8981\u4ece Web \u5386\u53f2\u3001\u6838\u5fc3\u7279\u6027\u548c\u548c React \/ jQuery \u7684\u5dee\u522b\u8bb2\u8d77\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u6bcf\u4e00\u79cd\u524d\u7aef\u6280\u672f\u90fd\u662f\u7279\u5b9a\u573a\u666f\u7684\u89e3\u6cd5\u3002\u9759\u6001\u9875\u3001CGI\u3001JSP\u3001Ajax\u3001jQuery\u3001SPA \u6846\u67b6\u4e00\u8def\u8d70\u6765\uff0cVue \u8981\u89e3\u51b3\u7684\u662f\uff1a\u7528\u6570\u636e\u9a71\u52a8\u548c\u7ec4\u4ef6\u5316\uff0c\u628a DOM \u64cd\u4f5c\u4ece\u4e1a\u52a1\u91cc\u62bd\u8d70\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407112948.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3182\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407112948.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407112948\" width=\"518\" height=\"375\" \/><\/a><\/p>\n<table style=\"display: table; text-align: left; overflow: auto; border-collapse: collapse; margin: 1.4em auto; max-width: 100%; table-layout: fixed; overflow-wrap: break-word; word-break: break-all;\" width=\"800\">\n<thead>\n<tr>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u5bf9\u6bd4<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u4f20\u7edf \/ jQuery<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">Vue<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6539\u754c\u9762<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u9009 DOM\u3001\u6539\u8282\u70b9<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u53ea\u6539\u6570\u636e\uff0c\u89c6\u56fe\u81ea\u52a8\u7ed1<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u4e8b\u4ef6<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u7ed1\u5728\u5177\u4f53\u8282\u70b9\u4e0a<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u4e8b\u4ef6\u53ea\u64cd\u4f5c\u6570\u636e<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u590d\u7528<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u590d\u5236 HTML\/\u9009\u62e9\u5668<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">.vue \u7ec4\u4ef6\u3001\u4f4e\u8026\u5408<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u548c React<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u2014<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u90fd\u6709\u865a\u62df DOM\uff1bVue \u53ef\u53d8\u6570\u636e+\u53cc\u5411\uff0cReact \u4e0d\u53ef\u53d8+\u5355\u5411<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e00\u3001\u4ece\u5386\u53f2\u8bf4\u8d77<\/h2>\n<p style=\"margin: 1em 0px;\">Web \u662f World Wide Web \u7684\u7b80\u79f0\uff0c\u4e2d\u6587\u8bd1\u4e3a\u4e07\u7ef4\u7f51\u3002\u53ef\u4ee5\u6309\u56db\u4e2a\u65f6\u4ee3\u6765\u7406\u89e3\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u77f3\u5668\u65f6\u4ee3<\/section>\n<\/li>\n<li>\n<section>\u6587\u660e\u65f6\u4ee3<\/section>\n<\/li>\n<li>\n<section>\u5de5\u4e1a\u9769\u547d\u65f6\u4ee3<\/section>\n<\/li>\n<li>\n<section>\u767e\u82b1\u9f50\u653e\u65f6\u4ee3<\/section>\n<\/li>\n<\/ul>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u77f3\u5668\u65f6\u4ee3<\/h3>\n<p style=\"margin: 1em 0px;\">\u9759\u6001\u7f51\u9875\uff0c\u53ef\u4ee5\u6b23\u8d4f\u4e00\u4e0b 1997 \u7684 Apple \u5b98\u7f51\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113038.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3183\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113038.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113038\" width=\"371\" height=\"258\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u6700\u65e9\u7684\u7f51\u9875\u6ca1\u6709\u6570\u636e\u5e93\uff0c\u50cf\u4e00\u5f20\u80fd\u5728\u7f51\u4e0a\u770b\u7684\u62a5\u7eb8\uff0c\u76f4\u5230 CGI\u3002\u901a\u8fc7 CGI Perl \u8dd1\u4e00\u5c0f\u6bb5\u4ee3\u7801\u548c\u6570\u636e\u5e93\u6216\u6587\u4ef6\u7cfb\u7edf\u4ea4\u4e92\uff0c\u4f8b\u5982\u5f53\u65f6\u7684 Google\uff081998 \u5e74\uff09\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113057.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3184\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113057.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113057\" width=\"412\" height=\"241\" \/><\/a><\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u6587\u660e\u65f6\u4ee3<\/h3>\n<p style=\"margin: 1em 0px;\">ASP\u3001JSP \u5927\u5bb6\u4e0d\u964c\u751f\uff0c\u5927\u7ea6 2005 \u5e74\u524d\u540e\u51fa\u73b0\uff0c\u5148\u540e\u6709\u5fae\u8f6f ASP \u548c Java Server Pages\uff0c\u53d6\u4ee3 CGI\uff0c\u589e\u5f3a Web \u4e0e\u670d\u52a1\u7aef\u4ea4\u4e92\u7684\u5b89\u5168\u6027\u3002\u672c\u8d28\u662f Java + HTML\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;%@ page language=\"java\" contentType=\"text\/html; charset=utf-8\"\n    pageEncoding=\"utf-8\"%>\n&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;meta charset=\"utf-8\">\n  &lt;title>JSP demo&lt;\/title>\n&lt;\/head>\n&lt;body>\n  &lt;img src=\"http:\/\/localhost:8080\/web05_session\/1.jpg\" width=200 height=100 \/>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n<p style=\"margin: 1em 0px;\">JSP \u4e0d\u591f\u7075\u6d3b\uff1a\u5728\u670d\u52a1\u5668\u6267\u884c\uff0c\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef\u7684\u901a\u5e38\u662f\u6574\u9875 HTML\u3002\u6bcf\u6b21\u8bf7\u6c42\u7684\u6570\u636e\u548c\u5185\u5bb9\u90fd\u662f\u670d\u52a1\u7aef\u6e32\u67d3\u597d\u7684 DOM\uff0c\u5f00\u53d1\u7075\u6d3b\u5ea6\u5dee\u3002\u540c\u5e74 Ajax \u706b\u4e86\uff08\u6280\u672f\u96cf\u5f62\u5728 1999\uff0c2005 \u624d\u666e\u53ca\uff09\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u5de5\u4e1a\u9769\u547d\u65f6\u4ee3<\/h3>\n<p style=\"margin: 1em 0px;\">\u79fb\u52a8\u8bbe\u5907\u666e\u53ca\uff0cjQuery \u51fa\u73b0\uff0cSPA \u96cf\u5f62\u548c Backbone\u3001EmberJS\u3001AngularJS \u4e00\u6279\u6846\u67b6\u8ddf\u4e0a\u3002\u5f53\u65f6 SEO\u3001\u8fc7\u591a\u9875\u9762\u3001\u590d\u6742 View \u7ed1\u5b9a\u90fd\u4e0d\u597d\u5904\u7406\u3002\u8fd9\u51e0\u5e74\u7684\u6846\u67b6\u8282\u7ea6\u4e86\u5927\u91cf\u7cbe\u529b\u3001\u964d\u4f4e\u95e8\u69db\u3001\u52a0\u5feb\u8fed\u4ee3\uff0c\u53ef\u4ee5\u79f0\u4e3a\u5de5\u4e1a\u65f6\u4ee3\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u767e\u82b1\u9f50\u653e\u65f6\u4ee3<\/h3>\n<p style=\"margin: 1em 0px;\">\u8fd9\u91cc\u6ca1\u6709\u6587\u5b57\uff0c\u653e\u4e00\u5f20\u56fe\u611f\u53d7\u4e00\u4e0b\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113155.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3186\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113155.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113155\" width=\"490\" height=\"359\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">Web \u53d8\u5316\u53c8\u5927\u53c8\u5feb\u3002\u90a3\u4eca\u5929\u7684\u4e3b\u89d2 Vue \u53c8\u662f\u4e3a\u4e86\u89e3\u51b3\u4ec0\u4e48\uff1f\u63a5\u7740\u770b\u3002<\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e8c\u3001Vue \u662f\u4ec0\u4e48<\/h2>\n<p style=\"margin: 1em 0px;\">Vue.js \u7528\u4e8e\u521b\u5efa\u7528\u6237\u754c\u9762\uff0c\u4e5f\u662f\u521b\u5efa\u5355\u9875\u5e94\u7528\u7684 Web \u6846\u67b6\u30022016 \u5e74\u4e00\u9879 JS \u8c03\u67e5\u91cc\u5f00\u53d1\u8005\u6ee1\u610f\u5ea6 89%\u3002\u5728 GitHub \u4e0a\u5e73\u5747\u6bcf\u5929\u7ea6 95 \u661f\uff0c\u4e00\u5ea6\u662f\u661f\u6807\u6570\u7b2c 3 \u7684\u9879\u76ee\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u5b83\u5173\u6ce8 MVC \u7684\u89c6\u56fe\u5c42\uff0c\u4e5f\u80fd\u65b9\u4fbf\u83b7\u53d6\u6570\u636e\u66f4\u65b0\uff0c\u901a\u8fc7\u7ec4\u4ef6\u5185\u90e8\u65b9\u6cd5\u5b9e\u73b0\u89c6\u56fe\u4e0e\u6a21\u578b\u4ea4\u4e92\u3002\u4f5c\u8005\u5c24\u96e8\u6eaa\u5728\u4e3a AngularJS \u5de5\u4f5c\u540e\u62bd\u51fa\u81ea\u5df1\u559c\u6b22\u7684\u90e8\u5206\uff0c\u505a\u6210\u76f8\u5f53\u8f7b\u91cf\u7684\u6846\u67b6\u3002\u6700\u65e9\u53d1\u5e03\u4e8e 2014 \u5e74 2 \u6708\u3002<\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e09\u3001Vue \u6838\u5fc3\u7279\u6027<\/h2>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u6570\u636e\u9a71\u52a8\uff08MVVM\uff09<\/h3>\n<p style=\"margin: 1em 0px;\"><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">MVVM<\/code> \u8868\u793a <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">Model-View-ViewModel<\/code>\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>Model\uff1a\u6a21\u578b\u5c42\uff0c\u4e1a\u52a1\u903b\u8f91\u4ee5\u53ca\u548c\u670d\u52a1\u5668\u4ea4\u4e92<\/section>\n<\/li>\n<li>\n<section>View\uff1a\u89c6\u56fe\u5c42\uff0c\u628a\u6570\u636e\u53d8\u6210 UI\uff0c\u53ef\u7b80\u5355\u7406\u89e3\u6210 HTML \u9875\u9762<\/section>\n<\/li>\n<li>\n<section>ViewModel\uff1a\u8fde\u63a5 Model \u548c View \u7684\u6865\u6881<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\">\u5173\u7cfb\u56fe\u5982\u4e0b\uff1a<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113224.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3187\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113224.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113224\" width=\"461\" height=\"356\" \/><\/a><\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u7ec4\u4ef6\u5316<\/h3>\n<p style=\"margin: 1em 0px;\">\u4e00\u53e5\u8bdd\uff1a\u628a\u56fe\u5f62\u3001\u975e\u56fe\u5f62\u7684\u5404\u79cd\u903b\u8f91\u62bd\u8c61\u6210\u7edf\u4e00\u7684\u300c\u7ec4\u4ef6\u300d\u3002\u5728 Vue \u91cc\u6bcf\u4e2a <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">.vue<\/code> \u6587\u4ef6\u90fd\u53ef\u4ee5\u89c6\u4e3a\u4e00\u4e2a\u7ec4\u4ef6\u3002\u4f18\u52bf\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u964d\u4f4e\u8026\u5408\uff1a\u63a5\u53e3\u4e0d\u53d8\u5c31\u53ef\u4ee5\u6362\u5b9e\u73b0\uff0c\u4f8b\u5982\u8f93\u5165\u6846\u6362\u6210\u65e5\u5386\u3001\u65f6\u95f4\u3001\u8303\u56f4<\/section>\n<\/li>\n<li>\n<section>\u8c03\u8bd5\u65b9\u4fbf\uff1a\u51fa\u95ee\u9898\u53ef\u6309\u7ec4\u4ef6\u6392\u9664\uff1b\u804c\u8d23\u5355\u4e00\uff0c\u6bd4\u5206\u6790\u6574\u7ad9\u7b80\u5355<\/section>\n<\/li>\n<li>\n<section>\u53ef\u7ef4\u62a4\uff1a\u7ec4\u4ef6\u88ab\u590d\u7528\uff0c\u4f18\u5316\u4e00\u5904\u7b49\u4e8e\u6574\u4f53\u5347\u7ea7<\/section>\n<\/li>\n<\/ul>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u6307\u4ee4\u7cfb\u7edf<\/h3>\n<p style=\"margin: 1em 0px;\">\u6307\u4ee4\uff08Directives\uff09\u662f\u5e26 v- \u524d\u7f00\u7684\u7279\u6b8a\u5c5e\u6027\u3002\u8868\u8fbe\u5f0f\u53d8\u4e86\uff0c\u8fde\u5e26\u5f71\u54cd\u4f1a\u54cd\u5e94\u5f0f\u4f5c\u7528\u5230 DOM\u3002\u5e38\u7528\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u6761\u4ef6\u6e32\u67d3 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">v-if<\/code><\/section>\n<\/li>\n<li>\n<section>\u5217\u8868\u6e32\u67d3 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">v-for<\/code><\/section>\n<\/li>\n<li>\n<section>\u5c5e\u6027\u7ed1\u5b9a <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">v-bind<\/code><\/section>\n<\/li>\n<li>\n<section>\u4e8b\u4ef6\u7ed1\u5b9a <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">v-on<\/code><\/section>\n<\/li>\n<li>\n<section>\u53cc\u5411\u6570\u636e\u7ed1\u5b9a <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">v-model<\/code><\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\">\u6ca1\u6709\u6307\u4ee4\u4e4b\u524d\uff0c\u5f80\u5f80\u662f\u5148\u62ff\u5230 DOM \u518d\u5e72\u70b9\u4ec0\u4e48\u3002<\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u56db\u3001Vue \u8ddf\u4f20\u7edf\u5f00\u53d1\u7684\u533a\u522b<\/h2>\n<p style=\"margin: 1em 0px;\">\u6ca1\u6709\u843d\u5730\u573a\u666f\u7684\u9769\u547d\u4e0d\u662f\u597d\u9769\u547d\u3002\u4ee5\u6ce8\u518c\u8d26\u53f7\u8fd9\u79cd\u9ad8\u9891\u9700\u6c42\u4e3a\u4f8b\uff1a<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113247.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3188\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113247.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113247\" width=\"484\" height=\"71\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">jquery<\/code> \u7684\u601d\u8def\uff1a\u9009\u4e2d\u6d41\u7a0b DOM\uff0c\u70b9\u6309\u94ae\u9690\u85cf\u5f53\u524d\u3001\u663e\u793a\u4e0b\u4e00\u6b65\u3002<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113304.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3189\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113304.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113304\" width=\"513\" height=\"204\" \/><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">vue<\/code> \u57fa\u672c\u4e0d\u64cd\u4f5c DOM\u3002\u53cc\u5411\u7ed1\u5b9a\u4e4b\u540e\uff0c\u6539\u53d8\u91cf\u5c31\u80fd\u63a7\u5236\u8282\u70b9\u5c5e\u6027\u3002\u89c6\u56fe\u7528\u53d8\u91cf\u63a7\u5236\u663e\u793a\uff0c\u70b9\u6309\u94ae\u53ea\u6539\u8fd9\u4e2a\u53d8\u91cf\uff1a<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113321.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-3190\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/04\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113321.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20210407113321\" width=\"550\" height=\"311\" \/><\/a><\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>Vue \u6240\u6709\u754c\u9762\u4e8b\u4ef6\u90fd\u53ea\u64cd\u4f5c\u6570\u636e\uff1bjQuery \u64cd\u4f5c DOM<\/section>\n<\/li>\n<li>\n<section>Vue \u6240\u6709\u754c\u9762\u53d8\u52a8\u90fd\u6839\u636e\u6570\u636e\u81ea\u52a8\u7ed1\u5b9a\uff1bjQuery \u64cd\u4f5c DOM<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e94\u3001Vue \u548c React \u5bf9\u6bd4<\/h2>\n<p style=\"margin: 1em 0px;\">\u6ca1\u6709\u7edd\u5bf9\u597d\u574f\uff0c\u53ea\u662f\u573a\u666f\u4e0d\u540c\u3002<\/p>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u76f8\u540c\u70b9<\/h3>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u90fd\u6709\u7ec4\u4ef6\u5316\u601d\u60f3<\/section>\n<\/li>\n<li>\n<section>\u90fd\u652f\u6301\u670d\u52a1\u5668\u7aef\u6e32\u67d3<\/section>\n<\/li>\n<li>\n<section>\u90fd\u6709 Virtual DOM<\/section>\n<\/li>\n<li>\n<section>\u6570\u636e\u9a71\u52a8\u89c6\u56fe<\/section>\n<\/li>\n<li>\n<section>\u90fd\u6709 native \u65b9\u6848\uff1a<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">Vue<\/code> \u7684 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">weex<\/code>\u3001<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">React<\/code> \u7684 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">React native<\/code><\/section>\n<\/li>\n<li>\n<section>\u90fd\u6709\u6784\u5efa\u5de5\u5177\uff1a<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">vue-cli<\/code>\u3001<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">Create React App<\/code><\/section>\n<\/li>\n<\/ul>\n<h3 style=\"padding: 0px; color: #4870ac; margin: 1.2em 0px 1em; font-size: 1.3em;\">\u533a\u522b<\/h3>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u6570\u636e\u6d41\u5411\uff1a<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">react<\/code> \u63a8\u5d07\u5355\u5411\u6570\u636e\u6d41\uff0c<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">Vue<\/code> \u662f\u53cc\u5411\u6570\u636e\u6d41<\/section>\n<\/li>\n<li>\n<section>\u6570\u636e\u53d8\u5316\uff1aReact \u4e0d\u53ef\u53d8\u6570\u636e\uff0cVue \u53ef\u53d8\u6570\u636e<\/section>\n<\/li>\n<li>\n<section>\u7ec4\u4ef6\u901a\u4fe1\uff1aReact \u591a\u7528\u56de\u8c03\uff1bVue \u5b50\u5230\u7236\u53ef\u4ee5\u7528\u4e8b\u4ef6\u548c\u56de\u8c03<\/section>\n<\/li>\n<li>\n<section>diff\uff1aReact \u7528 diff \u961f\u5217\u5f97\u5230 patch \u518d\u6279\u91cf\u66f4\u65b0\uff1bVue \u7528\u53cc\u5411\u6307\u9488\uff0c\u8fb9\u5bf9\u6bd4\u8fb9\u66f4\u65b0 DOM<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u516d\u3001\u53c2\u8003\u6587\u732e<\/h2>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>https:\/\/segmentfault.com\/a\/1190000016269636<\/section>\n<\/li>\n<li>\n<section>https:\/\/zh.wikipedia.org\/zh-cn\/Vue.js<\/section>\n<\/li>\n<li>\n<section>https:\/\/zhuanlan.zhihu.com\/p\/20197803<\/section>\n<\/li>\n<li>\n<section>https:\/\/zhuanlan.zhihu.com\/p\/38296857<\/section>\n<\/li>\n<\/ul>\n<blockquote style=\"display: block; font-size: 0.9em; border-left: 3px solid #4870ac; padding: 0.5em 1em; margin: 0px; background: #f6f8fa; color: #40464f;\">\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1aVue \u7528 MVVM \u628a\u300c\u6539\u6570\u636e\u300d\u53d8\u6210\u300c\u6539\u754c\u9762\u300d\uff1a\u7ec4\u4ef6\u5316\u62c6 UI\uff0c\u6307\u4ee4\u58f0\u660e\u5f0f\u64cd\u4f5c DOM\uff0c\u548c jQuery \u76ef\u8282\u70b9\u3001React \u5355\u5411\u4e0d\u53ef\u53d8\u5f62\u6210\u5bf9\u7167\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Vue.js\uff08\/vju\u02d0\/\uff09\u662f\u7528\u6765\u521b\u5efa\u7528\u6237\u754c\u9762\u7684\u5f00\u6e90 JavaScript \u6846\u67b6\uff0c\u4e5f\u5e38\u88ab\u62ff\u6765\u505a\u5355\u9875\u5e94\u7528\u3002\u5b83\u5173\u6ce8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105,128],"tags":[205,140],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3180"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3180"}],"version-history":[{"count":3,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3180\/revisions"}],"predecessor-version":[{"id":3193,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3180\/revisions\/3193"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}