uni-app

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-app
cd my-app
npm run dev:mp-weixin
小程序工具导入项目，注意：是mp-weixin的文件夹

width：750rpx   //小程序的单位，相当于屏幕的宽度
width：100vw   //H5的单位，相当于屏幕的宽度
width：100vh   //H5的单位，相当于屏幕的高度
npm  install  sass-loader  node-sass
<style lang="scss">
uni.scss文件中定义好的样式可以直接cv大法使用

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }，
                {
            "path": "pages/index2/index2",
            "style": {
                "navigationBarTitleText": "数据展示" //标题改变
            }
        }
    ]
放在第一就是首页显示了，之后创建页面需要在pages.json引入

v-if显示或隐藏，不适合做频繁的切换显示
v-show显示或隐藏，适合频繁的·切换显示
true的时候就是显示，fasle就是隐藏
v-if隐藏时是直接删除这个标签的
v-show隐藏式通过样式隐藏这个标签的

加工用法
<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满足条件的
        }
    }
}

<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>

import  组件  from @/components/组件

@绝对路径

跟Vue用法是一样的，props父传子参数和$emit子传父参数，

$emit用法：子组件触发事件发出，父组件监听事件接收

流程：子组件内部@click="funciton"    funciton（）{ this.$emit(‘自定义事件‘，要传递的参数) }

　　  父组件内部@自定义事件="funciton2"     funciton2（e）{ this.data = e} //e就是传递过来的参数

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>

先在组件内使用slot占位符，之后在组件标签内就可以加入想要的标签了
<my>
    <slot></slot>
</my>

常用的几个生命周期
全局App中，onLaunch表示应用启动时
页面中，使用onLoad页面加载完毕；onShow页面显示时
组件中，mounted组件挂载完毕时