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来修改状态,绕了一圈而已。

vue入门教程的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. webpack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. webpack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. webpack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  8. VUE 入门教程

    http://www.runoob.com/w3cnote/vue-js-quickstart.html VUE安装教程 https://segmentfault.com/a/119000001218 ...

  9. Vue入门教程(2)

    小白入门学习vue和vue实例,vue总结 这就是我脑海中的 Vue 知识体系: 一句话概况了 Vue 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 Vue 的创建 我们的学习目的肯定 ...

  10. Vue入门教程 第一篇 (概念及初始化)

    注:为了本教程的准确性,部分描述引用了官网及网络内容. 安装Vue 1.使用npm安装vue: npm install vue 2.下载使用js文件: https://vuejs.org/js/vue ...

随机推荐

  1. 关于如何准备CKA考试

    最近(2019年4月)通过了CKA考试,在此分享一下考试心得. CKA全称Certified Kubernetes Administrator,是一门在线考试,全程需要向考官分享摄像头和屏幕,考试费用 ...

  2. Streamr助你掌控自己的数据

    博客说明 所有刊发内容均可转载但是需要注明出处. 项目简介 Streamr 致力于为世界实时数据的自由公平交换打造开源平台,并促进全球数据经济的发展.Streamr项目基于区块链技术,并向用户提供数据 ...

  3. GlusterFS分布式存储集群-2. 使用

    参考文档: Quick Start Guide:http://gluster.readthedocs.io/en/latest/Quick-Start-Guide/Quickstart/ Instal ...

  4. Linux 文件搜索命令:find、which、whereis 和 locate

    Linux 提供了许多用于文件搜索的命令,这些命令都很强大,但是也有一些不同之处,这里分别介绍一下. 一.find 命令 find 是最常见和最强大的一个文件搜索命令.使用 find 命令可以在指定目 ...

  5. 某简单易懂的人脸识别 API 的开发环境搭建和简易教程

    最近接了个人脸识别相关的项目,是基于某个非常简单易懂的人脸识别 API:face_recognition 做的.这个库接口非常傻瓜,很适合新手上手,而且可以研究其源码来学习 dlib 这个拥有更加灵活 ...

  6. dp算法之有代价的最短路径

    题目:有代价的最短路径 题目介绍:如下图所示,现在平面上有N个点,此时N=7,每个点可能和其他点相连,相连的线有一定权值,求出从0点到N-1点的消耗权值的最小值. 分析:用动态规划的思路来解决,每一点 ...

  7. lambda----jdk8重头戏

    简介(译者注:虽然看着很先进,其实Lambda表达式的本质只是一个"语法糖",由编译器推断并帮你转换包装为常规的代码,因此你可以使用更少的代码来实现同样的功能.本人建议不要乱用,因 ...

  8. Apache 工作模式的正确配置

       prefork work event

  9. C++:new&delete

    一.new的浅析 在C++中,new主要由三种形式:new operator.operator new和placement new • new operator new operator即一些C++书 ...

  10. 人and绩效and职业道德

    人行走在这个世界上 避免不了的是各种悲哀 人就像是一个茶几 上面放满了各种杯具 而要做的是要么把杯具打碎了咽下去,要么被杯具打晕 本布衣 躬耕于南阳 不求闻达于诸侯 每个人都可以选择自己的生活方式 或 ...