uni-app基础

开发工具：HBuilderX

项目目录：项目自己创建或使用gitee开源的demo直接导入

官方文档：https://uniapp.dcloud.io

完整项目：https://gitee.com/danie999/uni-app-demo1.git

数据展示：

• 在 js 的 data 中定义数据

• 在 template 中通过 {{ 数据 }} 来显示

• 在标签的属性上通过 :data-index=‘数据’ 来使用

<template>
    <view class="content">
        <view>{{msg}}</view>
        <view>{{person.name}}</view>
        <view :data-color='color_v' @click="getViewColorClick">获取颜色</view>
    </view>
</template>

<script>
    export default {
        //数据展示 用于获取标签上自定义的动态值
        //在template中通过{{数据}}来显示
        //在标签的属性上通过:data-key='value'来使用
        //怎么获取：e.target.dataset.key
        data() {
            return {
                msg: "消息",
                person: {
                    name: "UNiapp",
                },
                //颜色值 value
                color_v: "aqua",
            };
        },
        methods: {
            getViewColorClick(e) {
                console.log(e)
                console.log(e.target.dataset.color)
            }
        }
    }
</script>

<style>
    .content {
    }
</style>

数据的循环：

• 通过 v-for 来指定要循环的数组

• item 和 index 分别位 循环项 和 循环索引

• :key 指定唯一的属性，用来提高循环效率

<template>
    <view id="main">
        <view v-for="(item, index) in list" :key="item.id">
            {{item.id}}--{{item.text}}--{{index}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {id:1,text:"榴莲"},
                    {id:2,text:"芒果"},
                    {id:3,text:"荔枝"},
                ],
            };
        },
    }
</script>

<style>
</style>

条件编译：

• 通过 v-if 来决定显示和隐藏 不适合做频繁的切换显示

• 通过 v-show 来决定显示和隐藏 合适做频繁的切换显示

<template>
    <view>
        <!-- 会删除dom 适合切换不频繁的场景 -->
        <view v-if="true">显示</view>
        <view v-if="false">隐藏</view>
        <!-- 不会删除dom 适合切换频繁的场景 -->
        <view v-show="true">显示</view>
        <view v-show="false">隐藏</view>
    </view>
</template>

<script>
    
</script>

<style>
</style>

计算属性：

• 可以理解为是对 data 中的数据提供了一种 加工 或者 过滤的能力

• 通过 computed 来定义计算属性

<template>
    <view class="content">
        <view>{{cnmoney}}</view>
        <view v-for="item in filterlist">{{item.text}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                money: 10000,
                list: [
                    {id:0,text:"苹果0"},
                    {id:1,text:"苹果1"},
                    {id:2,text:"苹果2"},
                ]
            };
        },
        //计算属性
        computed:{
            cnmoney() {
                return "$"+this.money;
            },
            //过滤数组
            filterlist() {
                return this.list.filter(v=>v.id<=0);
            }
        }
    }
</script>

<style>
</style>

事件使用：

• 注册事件 @click= “handleClick”

• 定义事件监听函数 需要在 “methods” 中定义

<template>
    <view class="content">
        <view @click="handleClick(1)">点我1</view>
        <view @click="handleClick(2)">点我2</view>
        <view data-index="123" @click="handle123Click(2, $event)">点我3</view>
    </view>
</template>

<script>
    export default {
        methods:{
            handleClick(index, e) {
                console.log(index);
            },
            handle123Click(index, e) {
                console.log(index);
                console.log(e.target.dataset.index);
            }
        }
    }
</script>

<style>
</style>

组件使用：

组件img-border.vue

<template>
    <!-- 定义组件 -->
    <!-- <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F007bl0Llgy1gue7p5o1vkg60o00diqva02.gif&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634625474&t=088856190c0ab54e480b59bae5c73c73"></image> -->
    <image @click="handleClick" class="image-border" :src="src"></image>
</template>

<script>
export default {
    //声明要接收父组件传递过来的属性
    //属性 数据类型
    props: {
        src: String,
    },
    methods: {
        //子向父传递数据 通过触发时间
        // this.$emit("srcChange", this.src)
        handleClick() {
            this.$emit("srcChange", this.src);
        },
    }
}
</script>

<style>
    .image-border{
        border-radius: 50%;
    }
</style>

componentsTest.vue中使用组件

<template>
    <!-- 使用组件，官方推荐不用大写 -->
    <view class="content">
        <img-border @srcChange="handlesrcChange" :src="src"></img-border>
    </view>
</template>

<script>
//引入自定义组件
import imgBorder from "@/pages/components/img-border.vue"
export default {
    data() {
        return {
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F007bl0Llgy1gue7p5o1vkg60o00diqva02.gif&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634625474&t=088856190c0ab54e480b59bae5c73c73",
        };
    },
    //注册组件
    components: {
        imgBorder
    },
    methods: {
        handlesrcChange(value) {
            console.log("子组件给父组件传递的参数：", value)
        }
    }
}
</script>

<style>
    
</style>

插槽使用：

插槽文件：my-form.vue

<template>
    <view class="form">
        <view class="form_title">标题</view>
        <view class="form_content">
            <slot></slot>
        </view>
    </view>
</template>

<script>
</script>

<style>
</style>

使用插槽