1.框架基礎目錄

1.MVC與MVVM思想

2.專案結構與檔案型別

3.全域性標題與頁面標題

4.全域性樣式與頁面樣式

5.App的生命週期

6.頁面的生命週期

7.資料繫結與事件

8.元件中的動態與靜態變數

9.條件判斷與for迴圈

10.多端相容條件編譯

1.MVC與MVVM思想

MVC模式

1.M:Model-模型層：實現資料的增刪改查

2.V:view-檢視層：前端頁面（Html+CSS+Javascript）

3.C:controller-控制層：處理業務

MVVM模式

通過程式碼闡述MVVM和雙向資料繫結

開啟上一節新建的HelloWorld專案

開啟頁面檔案index.vue(pages/index/index.vue，所有的頁面檔案都是以.vue結尾的，而不是html）

<template>標籤放html程式碼

<script>裡面寫JavaScript程式碼

<style>裡面寫樣式程式碼

以上三個標籤，在一個.vue頁面檔案中只能去寫一個。

<view>相當於html中的<div>起到一個程式碼盒子的作用，無執行意義

其中<template>裡的就是頁面，相當於View，export default{}相當於VM，data(){return{}}相當於Model

:繫結資料，@繫結方法

將index.vue中的程式碼修改為：

<template>
    <view 
 
class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
            
        </view>
        <view class="">
            <input type="text" :value="title"
 
 @input="change" />
        </view>
        <view class="">
            {{student.age}}
        </view>
        <view class="">
            {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}},{{skill[5]}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello World',
                student:{age:18},
                skill:['python','java','go','html','css','javacript']
            }
        },
        onLoad() {

        },
        methods: {
            change(e){
                var txtTitle=e.detail.value;
            
                this.title=txtTitle
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

執行後，在瀏覽器內：

2.頁面路由和標題

在pages.json檔案中進行配置

“pages”:[]陣列中 ，配置每一個頁面的資訊，第一個是預設的首頁。

"globalStyle": {}物件中，配置全域性的資訊。

私有頁面標題會覆蓋全域性頁面標題"navigationBarTitleText"

上拉重新整理和下拉重新整理，都在這裡配置。

3.專案配置檔案

App.vue內，可以配置公共樣式，會被私有頁面的樣式覆蓋

main.js內，可以配置全域性變數

manifest.json內，可以配置專案版本號等相關配置

4.生命週期

1.應用的生命週期

onLaunch，初始化完成全域性只觸發一次

onShow/onHide 從後臺到前臺，從前臺到後臺，最小化等，都會觸發的

還有nvue接收到資料觸發，在通訊類app內才用得到。

2.頁面的生命週期

onLoad/onUnload載入/關閉頁面觸發

onShow/onHide從後臺到前臺，從前臺到後臺，跟整個應用的一樣，不同頁面也可以定義自己的。

onPullDownRefresh下拉重新整理

onReachBottom頁面上拉觸底事件

跳轉演示

在pages目錄下新建頁面hello

在pages.json會自動生成配置程式碼

在hello.vue內：

<template>
    <view>
        <navigator url="../index/index">
            <view class="" style="width: 100rpx;height: 100rpx;background-color: #007AFF;">
                
            </view>
        </navigator>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

在index.vue中：

<template>
    <view class="content">
        <navigator url="../hello/hello">
            <image class="logo" src="/static/logo.png"></image>
        </navigator>
        
        <view class="text-area">
            <text class="title">{{title}}</text>
            
        </view>
        <view class="">
            <input type="text" :value="title" @input="change" />
        </view>
        <view class="">
            {{student.age}}
        </view>
        <view class="">
            {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}},{{skill[5]}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello World',
                student:{age:18},
                skill:['python','java','go','html','css','javacript']
            }
        },
        onLoad() {

        },
        methods: {
            change(e){
                var txtTitle=e.detail.value;
            
                this.title=txtTitle
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

執行後可以演示頁面跳轉。

5.固定畫素px和響應式畫素upx

移動端樣式中，用upx會自動適應不同螢幕的大小，每個螢幕的寬度都是750upx，對view樣式的設定用upx。

但是在使用字型大小和邊框寬度時，應該使用固定畫素px。

6.在頁面裡使用{{}}表示式

在index.vue中：

<view class="">{{student.age+1}}</view>
<view class="">{{student.age+"1"}}</view>
<view class="">{{student.age>=18?'成年':'未成年'}}</view>