- 1、介绍、部署、目录结构
- 2、样式与布局
- 3、配置相关
- 4、生命周期
- 5、模板语法及数据绑定
- 6、class 及 style
- 7、事件及事件绑定
- 8、基础组件
- 9、表单及表单组件
- 10、导航及页面传参
- 11、多媒体组件
- 12、网络请求
- 13、照片选择及预览
- 14、文件上传及下载
- 15、数据缓存
- 16、设备相关
- 17、导航设置
- 18、下拉刷新
- 19、上拉加载
- 20、跨端兼容
- 21、交互反馈
- 22、第三方登录详解
- 23、分享接口
- 24、使用 iconfont 字体库
- 25、打包及课程推荐
- 26、补充课程 - 新闻列表、详情小实战
- 27、在 uni-app 中使用 vue (一)
- 28、在 uni-app 中使用 vue (二)
- 29、在 uni-app 中使用 vue (三)
- 30、自定义组件封装及使用,组件间的消息传递
uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个平台。
新增以下章节
1、新闻列表、详情实战
2、在uni-app中使用 vue.js
3、自定义组件封装及调用
一、uni app介绍、部署、目录结构
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
了解下什么是 uni-app
快速上手
二、uni的样式和布局
可以在根目录app.vue定义全局样式,子页面可以单独定义单页样式
基准宽度为750px,建议设计宽度为750px ,
导入外联样式和使用内联样式
选择器 .class #id element
三、 uni配置相关
pages.json 可以进行页面配置
pages 进行每个页面的声明
globalStyle 全局页面样式设置。也可以在每个页面进行单独页面样式设置
tabBar 页面菜单项设置
condition 开发期间生效,编译模式,测试模拟页面使用
其它配置可以在编辑器内查看
四、生命周期
生命周期介绍
五、模版语法和数据绑定
模版和变量关系
data(){
return {
title: 'you age:',
age:'19',
}}
列表渲染 v-for
判断渲染 v-if
六、class 和 style 的使用
class 支持的语法:
style 支持的语法:
七、uni事件处理
几乎全支持 Vue官方文档:事件处理器
// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
click: 'tap', 点击时
touchstart: 'touchstart', 触摸时
touchmove: 'touchmove', 触摸移动时
touchcancel: 'touchcancel', 停止跟踪触摸时
touchend: 'touchend', 触摸移出时
tap: 'tap', 按下时
longtap: 'longtap', 长按时
input: 'input', 输入时
change: 'change', 选择时
submit: 'submit', 表单提交时
blur: 'blur', 失去焦点时
focus: 'focus', 获得焦点时
reset: 'reset', 表单重置时
confirm: 'confirm', 显示消息提示时
columnchange: 'columnchange', 字段变化时
linechange: 'linechange', 行变化时
error: 'error', 错误时
scrolltoupper: 'scrolltoupper', 滚动到顶部时
scrolltolower: 'scrolltolower', 滚动到底部时
scroll: 'scroll' 滚动时
}
事件修饰符 stop
事件绑定 @click="事件函数名"
事件监听、传参
八、基础组件使用