Vue移动端实战项目课程大纲

vuejs

前置知识：

利用html+css写移动端静态页面
了解js原生的字符串数组方法
了解es6基础语法

大纲提要

1. 脚手架 vue-cli的使用

2. vue-router路由

3. vueX状态管理器

4. axios、vue-axios发送请求

5. ‘闲鱼’移动端实战项目

1. 脚手架 vue-cli的使用

vue-cli的安装和使用

目录结构讲解

vue-cli中webpack配置

启动应用

2. vue-router路由

路由的使用

1. router-link组件 
    生成跳转路由标签，默认为a链接
    tag 属性生成别的标签
    to  属性指定目标地址

2. router-view组件
    渲染路由匹配到的视图组件
    嵌套路由嵌套视图

路由的匹配模式

/index
/index/:id   $route.params('id') 获取参数

钩子函数

全局钩子
    router.beforeEach  进入视图之前触发
    router.afterEach   进入视图之后触发
路由独享钩子
    beforeEnter 进入当前路由调用
组件内钩子
    beforeRouteEnter  进入当前路由调用
    beforeRouteUpdate 路由改变，组件被复用时调用
    beforeRouteLeave  离开当前路由调用

过渡动画

预留的transition标签
    进场动画 v-enter v-enter-active v-enter-to
    出场动画 v-leave v-leave-active v-leave-to

特殊的name属性
    name='custom-css-class'

使用watch观察$route决定路由过渡
    to: 即将要进入的目标 路由对象
    from: 当前导航正要离开的路由对象
    next: 进行目标路由的钩子函数

路由懒加载

require.ensure(组件)

3. vueX状态管理器

Vuex 是什么

专为 Vue.js应用程序开发的状态管理模式

使用Vue.use(Vuex)注入到每个子组件中

什么时候用Vuex

1. 多个组件共享状态
2. 不同视图的行为需要变更同一状态

核心概念

store

一个容器，包含着应用中大部分状态（state）
特点：
    1. Vuex 的状态存储是响应式的
    2. 不能直接改变store中的状态（state）
使用：
    Vuex.Store({
        state:      Object,
        mutations:  Object，
        getters:    Object
        actions:    Object
    });

State

定义应用的状态（数据）
获取状态：vm.#store.state[attr] 
辅助函数：mapState 

Getters

抽出对状态的操作逻辑，类似于computed
辅助函数：mapGetters

Mutations

用来改变状态，类似于事件
注意：
    mutation 必须是同步函数
commit触发mutation

Actions

用来改变状态，类似于Mutations
注意：
    1. Action触发的是 mutation，而不是直接变更状态。
    2. Action 可以包含任意异步操作。
dispatch触发action

Modules

用来分割store，每个module都包含State、Getters、Mutations、Actions

4. axios、vue-axios发送请求

Vue本身没有发送请求的功能，需要用到第三方库

在Vue中使用：

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios);

axios功能介绍：

    1. 在浏览器中发送 XMLHttpRequests 请求
    2. 在 node.js 中发送 http请求
    3. 支持 Promise API
    4. 转换请求和响应数据
    5. 自动转换 JSON 数据

axios提供的函数：

    1. get请求
        axios.get(url,[data]).then().catch()
    2. post请求
        axios.post(url,[data]).then().catch()

5. ‘闲鱼’移动端实战项目

项目主要页面

• 首页
• 搜索页
• 列表页
• 详情页
• 鱼塘页
• 发布页

拆分组件

• 下拉和上拉刷新
• 图片懒加载
• 弹框组件
• 拖拽range组件
• 图片轮播
• 切换图片
• 日期选择器

所用插件

*　swiper图片轮播插件
*　vue-lazy懒加载图片