vue2.0实战案例之高级教程

008:vue.js前端框架安装和使用范围。
vue版本升级和使用方式,vue和jquery.js,和zepto.js的优劣势分析。
vue为什么无法在开发小程序里无法使用,Windows对象分析。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。


009:vue各种基础指令使用技巧
vue.js是什么,vue.js的声明式语法,条件与循环,from表单渲染语法。


010: v-model实际使用案例,开发登录页面
登录界面的v-model绑定或渲染数据,实际流程分析。


011:v-if,v-bind实战使用案例,典型登录页面的逻辑实现。
v-bind:class,v-if else,执行流程分析。
vue实现典型的登录页面效果,模仿当当,京东登录效果,根据用户的输入监听登录按钮和可操作行为。
在实际项目开发中可以直接参考,拿来用。


012:v-for的高级使用,实战使用案例,典型的列表页面的逻辑实现
结合传统list页面,来对v-for进行实际项目中的渲染,模拟今日头条的数据列表来实行,加深对v-for的灵活使用。
v-for实现下拉刷新,上拉加载实现。
在开发当当网商城项目中,商品列表,订单列表等等v-for的使用无处不在。


013:v-on:click()的高级使用,典型购物车列表页面删除,添加操作
v-on:click结合v-for使用,绑定list中每一条数据,删除list中的某一条,n条数据操作,
使用场景为订单list中,删除一条订单。购物车删除一条数据等等在操作list的使用。
vm.list删除一条数据后指针的变化,vm对象会对指针进行重置。
特别强调,vm对象中关于this关键词的使用。


014:vue之$watch()的高级使用场景之下拉菜单
$watch()的使用原则和场景,能用但不能滥用,主要使用场景为。
当click事件监听不到的时候而又不得不观察某个变量的变化,重点是配合下拉菜单操作来使用。


015: vue之form表单绑定实际案例
普通文本插值,单选绑定,多选绑定,修饰符之 .number, .trim的使用技巧。
特别强调;文本区域插值( <textarea></textarea> ) 并不会生效,应用 v-model 来代替。
vue组件模式不适合于APIcloud开发app,APIcloud在打包的过程中会影响vue的组件化,建议用原始引入的方式来使用vue。


016:vue的ajax类库vue-resource的引入使用上,vue-ajax的使用案例
vue-resource的下载和引入,怎么看文档,和测试代码。
目前git上的vue-resource其实是兼容vue1.0和vue2.0的,都是可用得。
结合数据列表页面和api接口数据,实战引入vue-resource的操作。
vue-resource提供ajax组件默认是没有解决跨域问题的,需要自行处理或则后台开发人员做服务端的跨域处理。


017:vue的ajax类库vue-resource的引入使用下,vue-ajax的使用案例
vue-resource ajax 跨域跳过的坑,php版本的问题,导致我们写的php接口代码没有生效。
特别强调:php版本也是需要测试,选一个稳定的版本。
回调接受参数的固定写法
var ret = JSON.parse(response.data);得到api返回的完整json数据


018:vue之ajax加载数据loading框组件引入
自动给vue-resource的ajax请求添加loadingbar。
每一个ajax请求,都应该有一个加载框或者等待图标,更友好的引导用户,更好的用户体验。
默认请求时间超过300毫秒才显示,可以手动配置延迟的时间


019:vue之Filters过滤器使用,格式化Linux时间戳
针对api接口返回的linux时间戳,利用filters过滤器,格式化成我们想要的样式。


020:vue之mounted取代apiready(),原生js与jquery文档加载完毕的写法
vue之mounted()取代apiready(),原生JS与jQuery文档加载完毕的写法
能用vm变量的时候,我们不用this关键字,容易和其他类库污染,引起this指针的迁移。


021:vue之get方法,set方法,典型的全选单选代码实现
vue之get方法,set方法,实现典型的全选单选代码实现,set(),get()方法相当于自动触发行为,比较实用,做很多业务层面的逻辑。


022:vue1.0版本项目升级2.0版本跳过的坑
1:作用域的更改和性能提升
2:v-for循环变量和索引的坑
3:$index的废弃


023:Gulp配置和node.Js的安装,构建本地小型http服务器+自动刷新技术
何为前端自动化、和前端自动化的意义
Gulp环境配置-和node.Js的安装
构建本地小型http服务器+自动刷新
Gulp 多屏自动刷新技术


024:vue之页面tab选项卡效果实现
v-for和v-bind:class配合使用来实现


025:vue引入Layer-Mobile框架
场景包括:信息框,提示层,询问框,页面层,底部对话框,底部提示,loading带文字,自定义标题风格等等。






前端开发人员


快速使用vue框架开发简单的项目


老孟学堂教育总监:资深架构师,高级php开发工程师。
精通php+mysql后台系统开发,thinkphp社区有开源的系统发布。apicloud,decloud开发app方面有独到的见解,主要开源项目有蚂蚁订货系统。




孟老师带你100分钟搞定vue入门。
vue.js是一套构建用户界面的 渐进式框架,与其他重量级框架不同的是,vue 采用自底向上增量开发的设计。
vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,vue 完全有能力驱动采用单文件组件和 vue 生态系统支持的库开发的复杂单页应用。
尤其vue在webapp开发的过程中发挥着巨大的优势。
技术交流群:495654168
Logo

前往低代码交流专区

更多推荐