心理测评 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路径 */

  /* 用来挂载路由，在App.vue下 */

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

路由定义

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

链接跳转

• 使用跳转跳转内部链接，默认会被渲染成a标签
• 外部链接直接使用a标签跳转即可

组件

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

官网示例

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

测评页面三个子组件

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

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

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

{{now}}/{{total}}

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

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

vuex

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

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