uni-app是一個(gè)使用Vue.js開發(fā)跨平臺(tái)個(gè)人文庫(kù)應(yīng)用的前端框架,開發(fā)者編寫一套代碼,可編譯到的iOS,安卓,H5,小程序等多個(gè)平臺(tái)。

uni app 零基礎(chǔ)到項(xiàng)目實(shí)戰(zhàn)課程

新增以下章節(jié)

1、新聞列表、詳情實(shí)戰(zhàn)

2、在uni-app中使用 vue.js

3、自定義組件封裝及調(diào)用

一、uni app介紹、部署、目錄結(jié)構(gòu)

uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架,開發(fā)者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個(gè)平臺(tái)。

了解下什么是 uni-app

快速上手

二、uni的樣式和布局

可以在根目錄app.vue定義全局樣式,子頁(yè)面可以單獨(dú)定義單頁(yè)樣式

基準(zhǔn)寬度為750px,建議設(shè)計(jì)寬度為750px ,

導(dǎo)入外聯(lián)樣式和使用內(nèi)聯(lián)樣式

選擇器 .class #id element

三、 uni配置相關(guān)

pages.json 可以進(jìn)行頁(yè)面配置

pages 進(jìn)行每個(gè)頁(yè)面的聲明

globalStyle 全局頁(yè)面樣式設(shè)置。也可以在每個(gè)頁(yè)面進(jìn)行單獨(dú)頁(yè)面樣式設(shè)置

tabBar 頁(yè)面菜單項(xiàng)設(shè)置

condition 開發(fā)期間生效,編譯模式,測(cè)試模擬頁(yè)面使用

其它配置可以在編輯器內(nèi)查看

四、生命周期

生命周期介紹

五、模版語(yǔ)法和數(shù)據(jù)綁定

模版和變量關(guān)系

   

     data(){

        return {

                title: 'you age:',

                age:'19',

        }}

列表渲染 v-for

判斷渲染 v-if

六、class 和 style 的使用

class 支持的語(yǔ)法:

111

222

333

444

555

style 支持的語(yǔ)法:

666

777

七、uni事件處理

幾乎全支持 Vue官方文檔:事件處理器

// 事件映射表,左側(cè)為 WEB 事件,右側(cè)為 ``uni-app`` 對(duì)應(yīng)事件

{

    click: 'tap',  點(diǎn)擊時(shí)

    touchstart: 'touchstart',  觸摸時(shí)

    touchmove: 'touchmove',  觸摸移動(dòng)時(shí)

    touchcancel: 'touchcancel',   停止跟蹤觸摸時(shí)

    touchend: 'touchend',  觸摸移出時(shí)

    tap: 'tap',  按下時(shí)

    longtap: 'longtap',  長(zhǎng)按時(shí)

    input: 'input',  輸入時(shí)

    change: 'change',  選擇時(shí)

    submit: 'submit',  表單提交時(shí)

    blur: 'blur',  失去焦點(diǎn)時(shí)

    focus: 'focus',  獲得焦點(diǎn)時(shí)

    reset: 'reset',   表單重置時(shí)

    confirm: 'confirm',  顯示消息提示時(shí)

    columnchange: 'columnchange',   字段變化時(shí)

    linechange: 'linechange',  行變化時(shí)

    error: 'error',  錯(cuò)誤時(shí)

    scrolltoupper: 'scrolltoupper',  滾動(dòng)到頂部時(shí)

    scrolltolower: 'scrolltolower',  滾動(dòng)到底部時(shí)

    scroll: 'scroll'  滾動(dòng)時(shí)

}

事件修飾符 stop

事件綁定 @click="事件函數(shù)名"

事件監(jiān)聽、傳參

八、基礎(chǔ)組件使用

郵箱
huangbenjincv@163.com

德惠市| 台湾省| 盘山县| 黄陵县| 长岭县| 方城县| 黄山市| 南阳市| 余干县| 万宁市| 隆化县| 句容市| 长乐市| 衡山县| 大悟县| 宁津县| 枝江市| 惠水县| 蓬溪县| 日土县| 桑日县| 沙田区| 柏乡县| 睢宁县| 新巴尔虎左旗| 南溪县| 云安县| 会泽县| 丘北县| 临邑县| 寿阳县| 沙雅县| 子洲县| 乐业县| 太和县| 巨野县| 塔城市| 天峨县| 灵璧县| 独山县| 左云县|