源碼： https://github.com/ZH4L/vue-psy
vue文檔：https://cn.vuejs.org/v2/guide/
vue-router文檔：https://router.vuejs.org/zh-cn/essentials/getting-started.html
vuex文檔：https://vuex.vuejs.org/zh-cn/getting-started.html
axios文檔：https://www.npmjs.com/package/axios
技術(shù)棧
vue + vue-cli + vue-router + axios + vuex + webpack
vue-cli
vue-cli用于搭建項目框架
-
npm install -g vue-cli全局安裝vue-cli腳手架 -
vue init webpack project-name初始化vue項目 cd project-name-
npm install安裝依賴 -
npm run dev啟動開發(fā)服務(wù)器
初始化后的目錄結(jié)構(gòu)
-
index.html是入口頁面骤肛，訪問/根目錄就是訪問了這個文件 -
src/main.js是主js碱妆，在這里可以進(jìn)行一些全局的配置 -
src/App.vue是根組件，后面的組件都掛載這里
vue-router
用于實(shí)現(xiàn)前端路由，分為hash模式和history模式，這里用默認(rèn)的hash模式
http://localhost:8080/#/psy /* #/后面的就是hash路徑 */
<router-view></router-view> /* 用來掛載路由，在App.vue下 */
在src/router/index.js下定義路由
路由定義
路由最主要的是
path和component，分別是路徑和對應(yīng)的組件$route.params.psyId可以用來獲取類似/psy-info/:psyId的路徑參數(shù)$route.query.psyId可以用來獲取類似/psy-info?psyId=2的路徑參數(shù)
鏈接跳轉(zhuǎn)
- 使用
<router-link v-bind:to="/psy">跳轉(zhuǎn)</router-link>跳轉(zhuǎn)內(nèi)部鏈接，默認(rèn)會被渲染成a標(biāo)簽 - 外部鏈接直接使用a標(biāo)簽跳轉(zhuǎn)即可
組件
就是一個個小的模塊厉萝，一個組件就是一個.vue文件，成為單文件組件，其中包括template script style三部分
官網(wǎng)示例
比如冀泻，在測評頁面常侣，分為了三個子組件
測評頁面三個子組件
<template>
<div class="mui-content">
<!-- 進(jìn)度組件 -->
<process :now="now" :total="total"></process>
<!-- 主答題區(qū)組件 -->
<psy-main :questionObj="questionNow" @changeRaidoByChild="changeRaido"></psy-main>
<!-- 切換題目組件 -->
<div id="eva_toggle_btn_group">
<switch-question type="prev" :isDisabled="prev_disabled" :show="switch_show_prev" @switchByChild="switchQuestion('prev')"></switch-question>
<switch-question type="next" :isDisabled="next_disabled" :show="switch_show_next" @switchByChild="switchQuestion('next')"></switch-question>
</div>
</div>
</template>
父組件給子組件傳遞數(shù)據(jù)需要通過prop，比如
<process v-bind:now="now" v-bind:total="total"></process>
這里的v-bind:now和v-bind:total就是將父組件里的now和total兩個數(shù)據(jù)傳給了進(jìn)度條子組件
在子組件中弹渔，需要聲明props才可以使用父組件的數(shù)據(jù)
props: {
now: {
type: Number,
default: 0
},
total: Number
}
<!-- 使用 -->
<span id="eva_progress_current">{{now}}</span>/<span id="eva_progress_total">{{total}}</span>
如果子組件需要改變父組件的狀態(tài)胳施，需要通過$emit觸發(fā)父組件的事件
this.$emit('changeRaidoByChild', item, index) // 子組件通過$emit觸發(fā)父組件的changeRaidoByChild事件
<!-- 父組件監(jiān)聽changeRaidoByChild事件，然后調(diào)用changeRaido方法更新數(shù)據(jù) -->
<psy-main :questionObj="questionNow" @changeRaidoByChild="changeRaido"></psy-main>
vuex
一旦項目復(fù)雜起來肢专，通過父子組件通信的方式很難管理狀態(tài)舞肆，此時可以使用vuex
vuex有四個主要的概念：
-
state是一個全局的狀態(tài)存儲，數(shù)據(jù)會存儲在其中博杖，vue組件可以直接訪問其中的值椿胯，但是只可以讀，不可以進(jìn)行寫操作 -
getter,有些時候我們需要對獲取的數(shù)據(jù)進(jìn)行加工剃根，而不是直接獲取state中的數(shù)據(jù)哩盲，這時候可以通過getter定義函數(shù)，返回對應(yīng)的數(shù)據(jù) -
mutations是vuex中唯一一個可以修改數(shù)據(jù)的地方狈醉，mutations可以定義事件函數(shù)廉油，在vue組件中可以通過commit發(fā)射事件，調(diào)用函數(shù)苗傅。需要注意的是抒线，mutations中的操作必須是同步的，不可以存在異步操作的情況渣慕。 -
actions和mutation比較相似嘶炭，不同的是actions中不直接修改state，而是通過commit調(diào)用mutations修改數(shù)據(jù)逊桦，而且actions中可以存在異步處理邏輯
