vue入门教程

vue视频教程(对vue有个概览,要掌握vue-cli的用法,对vue-router,vuex有基本的概念)

https://www.imooc.com/learn/1091

1. vue-cli

vue-cli有多个版本,这里使用的是vue2.x的版本,不要使用最新版本的,容易踩坑。
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--,这个是老版本的,上面有安装,模板介绍。

用vue-cli创建一个简单的项目,就可以来练习vue的基础知识了,不要自己从头开始配一个,不适合。

2. vue-router

对vue-router安装文章中的示例进行操作,熟悉其用法和常用API,参数,一定要操作一遍。

文章如下:

https://www.cnblogs.com/yuyujuan/p/9839705.html
https://segmentfault.com/a/1190000011123089
https://blog.csdn.net/haochangdi123/article/details/80338550
https://segmentfault.com/a/1190000016662929
https://www.cnblogs.com/wisewrong/p/6277262.html
https://www.cnblogs.com/fozero/p/6185492.html

文章创建项目的方式各异,以vue-cli创建的项目为准,不要被文章中乱引入js的方式误导,一般vue-cli创建的项目,只需要import,不使用script标签引入,特殊情况下再考虑。

3. vuex

https://www.cnblogs.com/wisewrong/p/6344390.html
https://www.cnblogs.com/dreamsboy/p/6820299.html
https://www.jianshu.com/p/a804606ad8e9
http://www.imooc.com/article/257378?block_id=tuijian_wz
https://www.cnblogs.com/libin-1/p/6518902.html

理解基本概念

store 集中存储state的地方,一个页面只有一个store
mutations 同步修改state的方法
getters 从state中计算出的全局变量,可以在不同模块中使用,且在入参不变时候,计算不会重新执行
actions 异步修改state的方法,通常是调用一个或多个mutations来修改state,例如,一个异步请求,开始设置loading为true,返回修改真正的state,设置loading为false,会调用2或3个mutations
modules 用来划分state的模块,一个模块通常包括若干相关度高的页面,这些页面的状态可以放在一个modules中,只是用来划分,让状态管理更清晰,方便。写法上,调用时候需要添加module名称。

掌握基本方法

$store.dispatch 调用 Action
$store.commit 调用 mutation

其他形式的dispatch和commit都是调用$store对象的,自己定义的不是。

状态映射方法

mapActions 从store中映射Actions,类似于$store.module.actions
mapMutations 从store中映射mutations,类似$store.module.mutations
mapGetters 从store中映射getters,类似于$store.getters.xxxx
mapState 从store中映射state,类似于$store.module.state.xxx

这些方法本质上都是将store中的属性映射到当前组件中,缩短调用路径,方便使用而已,都是语法糖。

vuex就是不直接修改状态,而是通过Actions和mutations来修改状态,绕了一圈而已。

原文地址:https://www.cnblogs.com/mengff/p/10637316.html