正在播放：uni app 零基础到项目实战课程视频

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 支持的语法:

111

222

333

444

555

style 支持的语法:

666

777

七、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="事件函数名"

事件监听、传参

八、基础组件使用