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

  • 相关阅读:
    常用docker命令
    docker环境安装rabbitmq
    docker环境安装mongdb
    docker 安装redis
    docker 安装mysql
    spring关于resource文件加载原理解析(转的一篇文章)
    ✡ leetcode 165. Compare Version Numbers 比较两个字符串数字的大小 --------- java
    ✡ leetcode 164. Maximum Gap 寻找最大相邻数字差 --------- java
    ✡ leetcode 163. Missing Ranges 找出缺失范围 --------- java
    ✡ leetcode 161. One Edit Distance 判断两个字符串是否是一步变换 --------- java
  • 原文地址:https://www.cnblogs.com/mengff/p/10637316.html
Copyright © 2020-2023  润新知