1.腳手架安裝專案

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-app
cd my-app
npm run dev:mp-weixin
小程式工具匯入專案，注意：是mp-weixin的資料夾

2.樣式與sass

width：750rpx   //小程式的單位，相當於螢幕的寬度
width：100vw   //H5的單位，相當於螢幕的寬度
width：100vh   //H5的單位，相當於螢幕的高度
npm  install  sass-loader  node-sass
<style lang="scss">
uni.scss檔案中定義好的樣式可以直接cv大法使用
 

3.新增頁

"pages": [ //pages陣列中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }，
                {
            "path": "pages/index2/index2",
            "style": {
                "navigationBarTitleText": "資料展示" //標題改變
            }
        }
    ]
放在第一就是首頁顯示了，之後建立頁面需要在pages.json引入
 

4.條件編譯

v-if顯示或隱藏，不適合做頻繁的切換顯示
v-show顯示或隱藏，適合頻繁的·切換顯示
true的時候就是顯示，fasle就是隱藏
v-if隱藏時是直接刪除這個標籤的
v-show隱藏式通過樣式隱藏這個標籤的

5.計算屬性

加工用法
<template>
   <view class="content">
      <view>{{money}}</view> //10000
      <view>{{nomoney}}</view>  //￥10000
   </view>
</template>

export default {
    data () {
        return {
            money: 10000
        }
    },
    computed: {
        nomoney () {
            return '￥' + this.money
        }
    }
}
 

過濾用法
<template>
    <view class="content">
        <view v-for="(item, index) in list" :key="index">
            <view>ID:{{item.id}};姓名:{{item.name}};年齡:{{item.age}}</view>  //正常陣列遍歷
        </view>
        <view v-for="(item, index) in filterlist" :key="index">
            <view>ID:{{item.id}};姓名:{{item.name}};年齡:{{item.age}}</view>  //過濾後陣列遍歷
        </view>
    </view>
</template>

export default {
    data () {
        return {
            list: [
                {
                    id:0,
                    name: '張三',
                    age: 19
                },
                {
                    id:1,
                    name: '李四',
                    age: 199
                },
                {
                    id:2,
                    name: '牛五',
                    age: 1999
                }
            ]
        }
    },
    computed: {
        filterlist () {
            return this.list.filter(v => v.id <= 0) //只提取id<=0滿足條件的
        }
    }
}

5.方法傳參

<template>
    <view class="content">
        <view data-index='11' @click="hander(1, $event)">點我試試1</view> //￥event固定寫法
        <view data-index='22' @click="hander(2, $event)">點我試試2</view>
    </view>
</template>

<script>
export default {
    methods: {
        hander (index, event) {
            console.log(index) //獲取到直接通過函式傳參的值
            console.log(event) //獲取到不知道是什麼的一個物件，但我們要的值藏在這裡面
            console.log(event.currentTarget.dataset.index) //獲取到標籤自定義屬性data-index的值
        }
    }
}
</script>

6.元件

import  元件  from @/components/元件

@絕對路徑

跟Vue用法是一樣的，props父傳子引數和$emit子傳父引數，

$emit用法：子元件觸發事件發出，父元件監聽事件接收

流程：子元件內部@click="funciton"    funciton（）{ this.$emit('自定義事件'，要傳遞的引數) }

　　  父元件內部@自定義事件="funciton2"     funciton2（e）{ this.data = e} //e就是傳遞過來的引數

7.全域性資料

App.vue檔案中
<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        globalData: { //定義全域性資料
            base: 'www.360.com'
        }
    }
</script>

呼叫資料的頁面
<script>
export default {
    methods: {
        hander () {
            getApp().globalData.base //呼叫全域性資料，getApp（）固定函式
        }
    }
}
</script>

還有一種方法就是main.js檔案內定義原型，this. 呼叫

8.插槽

先在元件內使用slot佔位符，之後在元件標籤內就可以加入想要的標籤了
<my>
    <slot></slot>
</my>

9.生命週期

常用的幾個生命週期
全域性App中，onLaunch表示應用啟動時
頁面中，使用onLoad頁面載入完畢；onShow頁面顯示時
元件中，mounted元件掛載完畢時