@wy
2017-05-03T17:59:52.000000Z
字数 2049
阅读 646
vuejs
利用html+css写移动端静态页面
了解js原生的字符串数组方法
了解es6基础语法
vue-cli的安装和使用、目录结构讲解、vue-cli中webpack配置说明、启动应用
router-link和router-view组件、嵌套路由、路由的匹配模式、钩子函数、过渡动画、路由懒加载
Vue.js应用程序开发的状态管理模式、注入到每个子组件
一个容器store、应用状态state、抽出对状态的操作逻辑Getters、改变状态触发Mutations、异步改变状态Actions、分割多个容器Modules
axios、vue-axios发送请求
axios支持 Promise API、转换请求和响应数据、自动转换 JSON 数据
get请求：axios.get(url,[data]).then().catch()
post请求：axios.post(url,[data]).then().catch()
项目目录划分、下拉刷新、上滑加载、移动端图片轮播
本项目涉及多个视图组件，要做好目录的划分，哪些组件属于公用组件，哪些组件属于当前业务组件，先建好项目的目录结构，并在目录的命名上做到语义化，在之后的开发中去对应的目录中调用组件会很方便。
为保证首页加载速度够快，在视图以外的部分都暂不加载，当页面向上滑动拉到了底部，才请求相关数据，进行DOM渲染，这就需要用到上滑加载技术。
项目中用到了大量的图片，如果初始都把图片加载的话，会很耗流量，只有当用户把某一块滑到视图中的时候，才真正的加载图片，这需要用到图片懒加载，目的是用来优化加载速度和节省流量。
在移动端要刷新页面,获取最新数据,常用的做法是向下滑动页面加载数据，这里涉及到下拉刷新的使用。
移动端的轮播图是常见的功能，可以一次性的把所有要轮播的图片加载进来切换，也可以在滑动过程中再按需加载下一张图片。这两种手段我们在项目中都会讲解如何运用。
本次课学完之后，你会学到如何划分项目目录，如何进行上滑加载和下拉刷新，得心应手的在移动端运用图片轮播。
切换视图、router-view视图嵌套视图、搜索页搜索数据，列表展示页，filter过滤使用、切换到商品详情页
在首页准备点击搜索框会向左滑出搜索页，在搜索页中可以输入数据，也可以选择历史搜索记录。这里会使用transition动画切换组件。
搜索某一条数据后，会进入到列表页，这里展示的是搜索后的相关数据，在这个页面中依然用到图片懒加载，上滑加载这样的功能。
在列表页面中对搜索后的数据进行筛选，可以使用Vue中提供的额filters自定义过滤规则，并把筛选的结果放在router-view中展示出来。
点击具体的商品，进入到商品详情页，用到图片懒加载，上滑加载的功能。
组件之间使用transition动画切换、filters函数的使用，router-view视图嵌套视图
发布页组件组合、使用Vuex定义数据，选择相册图片、range滑块组件、
发布页涉及多个组件组合，这时候需要共享一些数据，所以预先使用Vuex定义好数据状态。
选择分类页动态切换，并能选择单个分类，在发布页显示分类。这种形式要跨组件传递数据，使用Vuex来管理数据。
使用input的获取原生的相册，并选中相片，能够增加删除预览相册。
range滑块组件滑动到指定位置，并能够动态的切换对应的视图，切换视图后保持填写的数据依旧存在，需要用到keep-alive来保存视图的状态。
如何定义Vuex数据状态，并能很优雅的操作这些数据；选区手机中的相册并展示；
拖拽一个滑块到指定位置，能够动态的切换视图，保持视图的状态。
数字选择组件、日期选择组件、dialog选择框、alert提醒框
分析标准组件的组成，主要有传递数据props，自定义组件模板slot，自定义事件event，并能够使用封装的组件。
弹出数字选择组件，填写对应的价格，并能够对超出的金额弹已警告，不允许再输入。
弹出日期选择组件，并能够滑动日期做无缝滚动，选择日期。
当在离开发布页时候，弹出询问是否离开的dialog选择框。
学会分析和使用组件；不同组件进行交互时如何处理共享的数据；
通过这个课程学下来，会沉淀出一些组件出来，并能够按照自己实际项目的需求分析和使用组件。
最后会总结归纳梳理整个项目开发流程，并解答在实际操作中遇到的问题。
详细课程大纲：https://www.zybuluo.com/wy/note/699934
开班时间：待定
上课时间：每周五晚上8:00 - 10:00
授课讲师：王允
开班形式： YY远程课讲解