心理测评 vue.js初体验

源码： 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

技术栈

vue + vue-cli + vue-router + axios + vuex + webpack

vue-cli

vue-cli用于搭建项目框架

1. npm install -g vue-cli全局安装vue-cli脚手架
2. vue init webpack project-name初始化vue项目
3. cd project-name
4. npm install安装依赖
5. npm run dev启动开发服务器

初始化后的目录结构

• index.html是入口页面，访问/根目录就是访问了这个文件
• src/main.js是主js，在这里可以进行一些全局的配置
• src/App.vue是根组件，后面的组件都挂载这里

vue-router

用于实现前端路由，分为hash模式和history模式，这里用默认的hash模式

http://localhost:8080/#/psy   /* #/后面的就是hash路径 */

<router-view></router-view>  /* 用来挂载路由，在App.vue下 */

在src/router/index.js下定义路由

路由定义
路由最主要的是path和component，分别是路径和对应的组件
$route.params.psyId可以用来获取类似/psy-info/:psyId的路径参数
$route.query.psyId可以用来获取类似/psy-info?psyId=2的路径参数

链接跳转

• 使用<router-link v-bind:to="/psy">跳转</router-link>跳转内部链接，默认会被渲染成a标签
• 外部链接直接使用a标签跳转即可

组件

就是一个个小的模块，一个组件就是一个.vue文件，成为单文件组件，其中包括template script style三部分

官网示例

比如，在测评页面，分为了三个子组件

测评页面三个子组件

<template>
    <div class="mui-content">
        <!-- 进度组件 -->
        <process :now="now" :total="total"></process>

        <!-- 主答题区组件 -->
        <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>

父组件给子组件传递数据需要通过prop，比如

<process v-bind:now="now" v-bind:total="total"></process>

这里的v-bind:now和v-bind:total就是将父组件里的now和total两个数据传给了进度条子组件
在子组件中，需要声明props才可以使用父组件的数据

props: {
    now: {
        type: Number,
        default: 0
    },
    total: Number
}

<!-- 使用 -->
<span id="eva_progress_current">{{now}}</span>/<span id="eva_progress_total">{{total}}</span>

如果子组件需要改变父组件的状态，需要通过$emit触发父组件的事件

this.$emit('changeRaidoByChild', item, index)  // 子组件通过$emit触发父组件的changeRaidoByChild事件

<!-- 父组件监听changeRaidoByChild事件，然后调用changeRaido方法更新数据 -->
<psy-main :questionObj="questionNow" @changeRaidoByChild="changeRaido"></psy-main>

vuex

一旦项目复杂起来，通过父子组件通信的方式很难管理状态，此时可以使用vuex
vuex有四个主要的概念：

• state是一个全局的状态存储，数据会存储在其中，vue组件可以直接访问其中的值，但是只可以读，不可以进行写操作
• getter,有些时候我们需要对获取的数据进行加工，而不是直接获取state中的数据，这时候可以通过getter定义函数，返回对应的数据
• mutations是vuex中唯一一个可以修改数据的地方，mutations可以定义事件函数，在vue组件中可以通过commit发射事件，调用函数。需要注意的是，mutations中的操作必须是同步的，不可以存在异步操作的情况。
• actions和 mutation比较相似，不同的是actions中不直接修改state，而是通过commit调用mutations修改数据，而且actions中可以存在异步处理逻辑