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

uni app 零基礎到項目實戰(zhàn)課程

新增以下章節(jié)

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

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

3、自定義組件封裝及調用

一、uni app介紹、部署、目錄結構

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

了解下什么是 uni-app

快速上手

二、uni的樣式和布局

可以在根目錄app.vue定義全局樣式,子頁面可以單獨定義單頁樣式

基準寬度為750px,建議設計寬度為750px ,

導入外聯樣式和使用內聯樣式

選擇器 .class #id element

三、 uni配置相關

pages.json 可以進行頁面配置

pages 進行每個頁面的聲明

globalStyle 全局頁面樣式設置。也可以在每個頁面進行單獨頁面樣式設置

tabBar 頁面菜單項設置

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

其它配置可以在編輯器內查看

四、生命周期

生命周期介紹

五、模版語法和數據綁定

模版和變量關系

   

     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="事件函數名"

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

八、基礎組件使用

郵箱
huangbenjincv@163.com

沁水县| 胶南市| 建平县| 绥德县| 广德县| 湟源县| 平阴县| 延长县| 石首市| 武穴市| 舟曲县| 石门县| 巴东县| 乌拉特前旗| 历史| 全椒县| 白山市| 惠东县| 沅江市| 炎陵县| 耒阳市| 望谟县| 博客| 香格里拉县| 凌海市| 冷水江市| 且末县| 泗洪县| 和平区| 湘阴县| 清丰县| 怀远县| 鄂温| 怀仁县| 芮城县| 常熟市| 桐城市| 清水县| 新野县| 新乡县| 上高县|