{"id":3698,"date":"2023-04-25T17:26:38","date_gmt":"2023-04-25T09:26:38","guid":{"rendered":"https:\/\/app.applebyme.cn\/cloud\/?p=3698"},"modified":"2023-04-25T17:26:38","modified_gmt":"2023-04-25T09:26:38","slug":"vue-%e5%bc%80%e5%8f%91%e7%a7%bb%e5%8a%a8%e7%ab%af%e7%bd%91%e7%ab%99%e5%8e%9f%e7%90%86%e5%92%8c%e4%bc%98%e5%8a%bf%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/app.applebyme.cn\/cloud\/appkaifa\/3698.html","title":{"rendered":"vue \u5f00\u53d1\u79fb\u52a8\u7aef\u7f51\u7ad9\u539f\u7406\u548c\u4f18\u52bf\u4ecb\u7ecd"},"content":{"rendered":"

Vue \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 JavaScript \u6846\u67b6\uff0c\u5b83\u7684\u6838\u5fc3\u601d\u60f3\u662f\u6570\u636e\u9a71\u52a8\u89c6\u56fe\uff0c\u540c\u65f6\u63d0\u4f9b\u4e86\u4e00\u4e9b\u4f18\u79c0\u7684\u5de5\u5177\u548c\u63d2\u4ef6\uff0c\u4f7f\u5f97\u6211\u4eec\u53ef\u4ee5\u5feb\u901f\u9ad8\u6548\u5730\u6784\u5efa\u51fa\u5404\u79cd Web \u5e94\u7528\u3002\u5728\u79fb\u52a8\u7aef\u5f00\u53d1\u4e2d\uff0cVue \u4e5f\u662f\u4e00\u4e2a\u975e\u5e38\u4f18\u79c0\u7684\u9009\u62e9\uff0c\u5b83\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u5feb\u901f\u642d\u5efa\u51fa\u4e00\u4e2a\u9ad8\u6548\u3001\u6d41\u7545\u7684\u79fb\u52a8\u5e94\u7528\u3002<\/p>\n

\u4e00\u3001Vue \u539f\u7406<\/p>\n

Vue \u7684\u6838\u5fc3\u601d\u60f3\u662f\u6570\u636e\u9a71\u52a8\u89c6\u56fe\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\uff0cVue \u4f1a\u81ea\u52a8\u66f4\u65b0\u89c6\u56fe\u3002Vue \u901a\u8fc7\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u6765\u5b9e\u73b0\u8fd9\u4e00\u529f\u80fd\uff0c\u5b83\u53ef\u4ee5\u5c06\u6570\u636e\u548c\u89c6\u56fe\u8fdb\u884c\u7ed1\u5b9a\uff0c\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u89c6\u56fe\u4e5f\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002\u8fd9\u79cd\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\u7684\u673a\u5236\uff0c\u4f7f\u5f97\u6211\u4eec\u53ef\u4ee5\u975e\u5e38\u65b9\u4fbf\u5730\u64cd\u4f5c\u6570\u636e\u548c\u89c6\u56fe\uff0c\u540c\u65f6\u4e5f\u63d0\u9ad8\u4e86\u5e94\u7528\u7684\u6027\u80fd\u548c\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n

Vue \u6709\u4e09\u4e2a\u6838\u5fc3\u6982\u5ff5\uff1a\u54cd\u5e94\u5f0f\u3001\u7ec4\u4ef6\u5316\u548c\u865a\u62df DOM\u3002<\/p>\n

1. \u54cd\u5e94\u5f0f<\/p>\n

Vue \u901a\u8fc7 Object.defineProperty() \u65b9\u6cd5\u6765\u5b9e\u73b0\u54cd\u5e94\u5f0f\uff0c\u5b83\u53ef\u4ee5\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\uff0c\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\uff0cVue \u4f1a\u81ea\u52a8\u66f4\u65b0\u89c6\u56fe\u3002\u4f8b\u5982\uff1a<\/p>\n

“`javascript<\/p>\n

let data = { name: ‘Tom’, age: 18 }<\/p>\n

let vm = new Vue({<\/p>\n

data: data<\/p>\n

})<\/p>\n

vm.name = ‘Jerry’ \/\/ \u89c6\u56fe\u4f1a\u81ea\u52a8\u66f4\u65b0<\/p>\n

“`<\/p>\n

2. \u7ec4\u4ef6\u5316<\/p>\n

Vue \u7684\u7ec4\u4ef6\u5316\u53ef\u4ee5\u5c06\u4e00\u4e2a\u5927\u578b\u7684\u5e94\u7528\u62c6\u5206\u6210\u591a\u4e2a\u5c0f\u7ec4\u4ef6\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u6709\u81ea\u5df1\u7684\u72b6\u6001\u548c\u884c\u4e3a\u3002\u8fd9\u79cd\u7ec4\u4ef6\u5316\u7684\u673a\u5236\uff0c\u4f7f\u5f97\u6211\u4eec\u53ef\u4ee5\u66f4\u52a0\u65b9\u4fbf\u5730\u7ef4\u62a4\u548c\u6269\u5c55\u5e94\u7528\u3002\u4f8b\u5982\uff1a<\/p>\n

“`javascript<\/p>\n

Vue.component(‘my-component’, {<\/p>\n

template: ‘{{ message }}’,<\/p>\n

data: function () {<\/p>\n

return {<\/p>\n

message: ‘Hello, Vue!’<\/p>\n

}<\/p>\n

}<\/p>\n

})<\/p>\n

“`<\/p>\n

3. \u865a\u62df DOM<\/p>\n

Vue \u901a\u8fc7\u865a\u62df DOM \u6765\u63d0\u9ad8\u5e94\u7528\u7684\u6027\u80fd\uff0c\u5b83\u53ef\u4ee5\u5728\u5185\u5b58\u4e2d\u521b\u5efa\u4e00\u4e2a\u865a\u62df\u7684 DOM \u6811\uff0c\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6\uff0cVue \u4f1a\u901a\u8fc7\u6bd4\u8f83\u65b0\u65e7\u4e24\u68f5\u865a\u62df DOM \u6811\u7684\u5dee\u5f02\uff0c\u7136\u540e\u53ea\u66f4\u65b0\u5dee\u5f02\u90e8\u5206\u7684\u89c6\u56fe\u3002\u8fd9\u79cd\u4f18\u5316\u7684\u673a\u5236\uff0c\u4f7f\u5f97\u5e94\u7528\u7684\u6027\u80fd\u5f97\u5230\u4e86\u5f88\u5927\u7684\u63d0\u5347\u3002<\/p>\n

\u4e8c\u3001Vue \u5f00\u53d1\u79fb\u52a8\u7aef\u7f51\u7ad9<\/p>\n

Vue \u53ef\u4ee5\u901a\u8fc7 Vue CLI \u6765\u5feb\u901f\u521b\u5efa\u4e00\u4e2a\u79fb\u52a8\u7aef\u7f51\u7ad9\u7684\u9879\u76ee\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 Vue CLI \u6765\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8e webpack \u7684 Vue \u9879\u76ee\uff0c\u7136\u540e\u4f7f\u7528 Vue Router \u548c Vuex \u6765\u5b9e\u73b0\u8def\u7531\u548c\u72b6\u6001\u7ba1\u7406\u3002<\/p>\n

1. \u521b\u5efa\u9879\u76ee<\/p>\n

\u9996\u5148\u6211\u4eec\u9700\u8981\u5b89\u88c5 Vue CLI\uff0c\u7136\u540e\u4f7f\u7528 Vue CLI \u6765\u521b\u5efa\u4e00\u4e2a\u57fa\u4e8e webpack \u7684 Vue \u9879\u76ee\uff1a<\/p>\n

“`bash<\/p>\n

npm install -g vue-cli<\/p>\n

vue init webpack my-project<\/p>\n

cd my-project<\/p>\n

npm ins<\/p>\n

<\/figure>\n<\/p>\n

tall<\/p>\n

npm run dev<\/p>\n

“`<\/p>\n

2. \u5b89\u88c5\u4f9d\u8d56<\/p>\n

\u63a5\u7740\u6211\u4eec\u9700\u8981\u5b89\u88c5\u4e00\u4e9b\u5fc5\u8981\u7684\u4f9d\u8d56\uff0c\u4f8b\u5982\uff1a<\/p>\n

“`bash<\/p>\n

npm install -S vue-router vuex axios vant<\/p>\n

“`<\/p>\n

\u5176\u4e2d\uff0cvue-router \u662f Vue \u7684\u8def\u7531\u63d2\u4ef6\uff0c\u53ef\u4ee5\u5b9e\u73b0\u8def\u7531\u7684\u8df3\u8f6c\u548c\u7ba1\u7406\uff1bvuex \u662f Vue \u7684\u72b6\u6001\u7ba1\u7406\u63d2\u4ef6\uff0c\u53ef\u4ee5\u5b9e\u73b0\u5168\u5c40\u72b6\u6001\u7684\u7ba1\u7406\uff1baxios \u662f\u4e00\u4e2a\u57fa\u4e8e Promise \u7684 HTTP \u5e93\uff0c\u53ef\u4ee5\u7528\u6765\u53d1\u9001 HTTP \u8bf7\u6c42\uff1bvant \u662f\u4e00\u5957\u57fa\u4e8e Vue \u7684\u79fb\u52a8\u7aef UI \u7ec4\u4ef6\u5e93\uff0c\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u5feb\u901f\u6784\u5efa\u51fa\u4e00\u4e2a\u7f8e\u89c2\u3001\u6d41\u7545\u7684\u79fb\u52a8\u5e94\u7528\u3002<\/p>\n

3. \u914d\u7f6e\u8def\u7531<\/p>\n

\u6211\u4eec\u53ef\u4ee5\u5728 src \u76ee\u5f55\u4e0b\u65b0\u5efa\u4e00\u4e2a router \u76ee\u5f55\uff0c\u7136\u540e\u5728\u91cc\u9762\u65b0\u5efa\u4e00\u4e2a index.js \u6587\u4ef6\uff0c\u7528\u6765\u914d\u7f6e\u8def\u7531\uff1a<\/p>\n

“`javascript<\/p>\n

import Vue from ‘vue’<\/p>\n

import Router from ‘vue-router’<\/p>\n

import Home from ‘@\/views\/Home’<\/p>\n

import About from ‘@\/views\/About’<\/p>\n

Vue.use(Router)<\/p>\n

export default new Router({<\/p>\n

routes: [<\/p>\n

{<\/p>\n

path: ‘\/’,<\/p>\n

name: ‘Home’,<\/p>\n

component: Home<\/p>\n

},<\/p>\n

{<\/p>\n

path: ‘\/about’,<\/p>\n

name: ‘About’,<\/p>\n

component: About<\/p>\n

}<\/p>\n

]<\/p>\n

})<\/p>\n

“`<\/p>\n

\u8fd9\u91cc\u6211\u4eec\u5b9a\u4e49\u4e86\u4e24\u4e2a\u8def\u7531\uff0c\u4e00\u4e2a\u662f Home\uff0c\u4e00\u4e2a\u662f About\uff0c\u5b83\u4eec\u5206\u522b\u5bf9\u5e94\u7740\u4e24\u4e2a\u7ec4\u4ef6\u3002<\/p>\n

4. \u914d\u7f6e\u72b6\u6001\u7ba1\u7406<\/p>\n

\u6211\u4eec\u53ef\u4ee5\u5728 src \u76ee\u5f55\u4e0b\u65b0\u5efa\u4e00\u4e2a store \u76ee\u5f55\uff0c\u7136\u540e\u5728\u91cc\u9762\u65b0\u5efa\u4e00\u4e2a index.js \u6587\u4ef6\uff0c\u7528\u6765\u914d\u7f6e\u72b6\u6001\u7ba1\u7406\uff1a<\/p>\n

“`javascript<\/p>\n

import Vue from ‘vue’<\/p>\n

import Vuex from ‘vuex’<\/p>\n

Vue.use(Vuex)<\/p>\n

const store = new Vuex.Store({<\/p>\n

state: {<\/p>\n

count: 0<\/p>\n

},<\/p>\n

mutations: {<\/p>\n

increment (state) {<\/p>\n

state.count++<\/p>\n

}<\/p>\n

},<\/p>\n

actions: {<\/p>\n

increment ({ commit }) {<\/p>\n

commit(‘increment’)<\/p>\n

}<\/p>\n

}<\/p>\n

})<\/p>\n

export default store<\/p>\n

“`<\/p>\n

\u8fd9\u91cc\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a\u72b6\u6001 count\uff0c\u7136\u540e\u5b9a\u4e49\u4e86\u4e00\u4e2a mutation\uff0c\u7528\u6765\u4fee\u6539\u72b6\u6001 count \u7684\u503c\uff0c\u540c\u65f6\u5b9a\u4e49\u4e86\u4e00\u4e2a action\uff0c\u7528\u6765\u89e6\u53d1 mutation\u3002<\/p>\n

5. \u6784\u5efa\u7ec4\u4ef6<\/p>\n

\u63a5\u7740\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u6784\u5efa\u7ec4\u4ef6\uff0c\u4f8b\u5982\uff1a<\/p>\n

“`javascript<\/p>\n

\n

\n

{{ message }}<\/p>\n