{"id":329,"date":"2024-11-10T20:00:22","date_gmt":"2024-11-10T12:00:22","guid":{"rendered":"\/?p=329"},"modified":"2024-11-10T23:01:45","modified_gmt":"2024-11-10T15:01:45","slug":"vue-js","status":"publish","type":"post","link":"\/?p=329","title":{"rendered":"Vue.js"},"content":{"rendered":"\n

\u521b\u5efa\u5b89\u88c5vue<\/h3>\n\n\n\n

\u5b89\u88c5node.js\u73af\u5883<\/p>\n\n\n\n

https:\/\/nodejs.org\/zh-cn\/download\/package-manager<\/a><\/p>\n\n\n\n

npm config set registry https:\/\/registry.npmmirror.com \/\/\u4e0b\u592a\u6162\u6362\u6e90\nnpm install -g pnpm \/\/\u88c5pnpm\u4e0b\u8f7d\u66f4\u5feb<\/code><\/pre>\n\n\n\n
\u5b89\u88c5vue<\/p>\n\n\n\n
pnpm create vue@latest<\/code><\/pre>\n\n\n\n
\u8fd0\u884c\u524d\u7aef\u9879\u76ee<\/h3>\n\n\n\n
pnpm i   \/\/\u5b89\u88c5\u5176\u4f59\u4f9d\u8d56\nnpm run dev  \/\/\u542f\u52a8\u9879\u76ee<\/code><\/pre>\n\n\n\n
src\u6587\u4ef6<\/h2>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u770bts\u90e8\u5206\u4e2d\u7684export default (\u6307\u5b9a\u6a21\u5757\u9ed8\u8ba4\u5bfc\u51fa) \u3001name \u65e0\u6240\u8c13\u53ef\u968f\u4fbf\u53d6\u3001components\u4e3a\u7ec4\u4ef6\u6ce8\u518c<\/p>\n\n\n\n
\/\/import \u968f\u673a\u540d\u5b57 from \u8def\u5f84 \u548cPython\u4e2d\u7684 \uff08improt \u51fd\u6570 as \u522b\u540d \uff09\u7c7b\u4f3c<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
import {createApp} from 'vue'<\/code>\uff1a\u8fd9\u884c\u4ee3\u7801\u4eceVue\u5e93\u4e2d\u5bfc\u5165\u4e86createApp<\/code>\u51fd\u6570\u3002createApp<\/code>\u662fVue 3\u4e2d\u5f15\u5165\u7684\u4e00\u4e2a\u65b0\u7684\u5168\u5c40API\uff0c\u7528\u4e8e\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Vue\u5e94\u7528\u5b9e\u4f8b\u3002<\/p>\n\n\n\n
\u5bfc\u5165App.vue <\/p>\n\n\n\n
\u8c03\u7528createApp()\u51fd\u6570\u521d\u59cb\u5316APP\u5e76\u901a\u8fc7mount()\u51fd\u6570\u6302\u8f7d\u5230DOM id=app\u4e2d<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
data()\u3001methodes:{}\u7b49\u4e3aoptionsAPI<\/p>\n\n\n\n
Vue3\u4e3asetup()<\/p>\n\n\n\n
setup()<\/h2>\n\n\n\n
<script lang=\"ts\">\n    export default{\n        name:'Preson',\n        \/\/vue3 \u4e2d\u7684setup \u628adata \u548c methodes \u5408\u5e76 \u4f46\u662f \u6570\u636e\u4e0d\u662f\u54cd\u5e94\u5f0f(\u4fee\u6539\u540e\u5728\u5916\u90e8\u4e0d\u4f1a\u8ddf\u968f\u6539\u53d8)\n        \/\/vue3 setup  \u4e2d\u65e0\u6cd5\u4f7f\u7528this this\u5728vue3\u4e2d\u88ab\u6de1\u5316\n        \/\/vue3 setup   \u52a0\u8f7d\u4f18\u5148\u7ea7\u975e\u5e38\u9ad8\n        \/\/data(){}\u4e2d\u53ef\u4ee5\u7528this\u65b9\u6cd5\u8c03\u7528\u5230setup\u4e2d\u7684\u6570\u636e\u4f46\u662f\u53cd\u8fc7\u6765\u4e0d\u884c\n        setup(){\n            \/\/data\n            let name = '\u5f20\u4e09'\n            let age = 39\n            let tel = '233333333'\n            \/\/\u51fd\u6570\n            function changename(){\n                name = '\u5c0f\u7c73'\n            }\n            function changeAge(){\n                age += 1\n            }\n            function showtel(){\n                alert(tel)\n            }\n            return{name,age,tel,changename,changeAge,showtel}\n        }\n    }\n<\/script><\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u521b\u5efa\u5b89\u88c5vue \u5b89\u88c5node.js\u73af\u5883 https:\/\/nodejs.org\/zh-cn\/download\/p […]<\/p>\n","protected":false},"author":1,"featured_media":296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts\/329"}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=329"}],"version-history":[{"count":7,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/329\/revisions"}],"predecessor-version":[{"id":341,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/329\/revisions\/341"}],"wp:featuredmedia":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/media\/296"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=329"},{"taxonomy":"post_tag","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}