组件相关

## 一：定义数据
#### 初始化数据的方法：通过reactive去定义一个数据
```java
<template>
    <div style="font-size: 40px;margin-top: 30px">
        {{ data.name }} 
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    name: "汪苏泷"
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/29e8f5e7-1549-1a41-ba92-07013686d6f3.png)
## 二：绑定数据v-model
#### input输入框中绑定数据
```java
<template>
    <div>
        <input v-model="data.name" />
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    name: "汪苏泷"
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/0906b5e4-856e-50f6-dafa-eefb51065904.png)
## 三：判断数据
#### v-if  v-else-if   v-else
#### 根据变量的值动态的去判断样式，满足哪个就渲染哪个
```java
<template>
    <div>
        <span style="color: pink" v-if="data.sex === '男生'">男生</span>
        <span style="color: aqua" v-else-if="data.sex === '女生'">女生</span>
        <span style="color: red" v-else>其他</span>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    sex: '男生'
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/9bff5f00-f6b3-08b3-f7b8-551c170d703e.png)
## 四：遍历数据：v-for
#### 1.item表示遍历出来的数据
```java
<template>
    <div style="display: flex">
         <div style="width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 30px;margin-right: 10px;background-color: aqua" v-for="item in data.arr" :key="item">{{ item }}</div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    arr: [1, 3, 5]
})

</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/ee62ef23-9b09-972d-67b1-72944bf4e956.png)
#### 2.下拉列表多选
⭐select:创建下拉列表  
⭐multiple：多选  
⭐option:定义下拉列表中的每一个选项  
⭐selected：设置该选项为默认选中状态 
⭐disabled：禁用该选项
```java
<template>
    <div>
        <select style="width: 200px">
          <option v-for="item in data.animal" :key="item">{{item}}</option>
        </select>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    animal:['老虎','大象','长颈鹿']
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/9caf1b42-8bf2-c252-d3a8-54b46338f8d8.png)
## 五：绑定事件
#### 1.@click＋方法
#### 方法的写法：const 函数名 = (参数) => { 函数体 }
```java
<template> 
    <div>
         <button @click="ddd">点我加好运</button>
    </div>
</template>

<script setup>
import { reactive} from 'vue';
const ddd = () => {
    alert("好运已加满")
}
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/9b7eb74b-d237-d76a-10c8-ec6506c856a5.png)
## 六：绑定属性v-bind(:)
#### 绑定了一张照片的路径
```java
<template>
    <div>
         <img :src="data.img">
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    img:'https://p9.itc.cn/images01/20210608/82c47f60aa374873adbfd30e3e465727.png'
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/82e7a26a-9208-06c2-aadd-39e2a36f00bc.png)
## 七：生命周期函数:onMounted
#### 1.在页面元素完全加载完成之后触发 页面元素加载需要时间
```java
<template>

</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() =>{
    alert("页面已经加载完成")
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c0496bf2-73f9-7db0-23e5-fa871351899e.png)
## 八：按钮组件button
⭐绑定属性：设置字体颜色为蓝色  :style="{ color: 'blue' }"
⭐loading:设置为加载效果 转圈圈
⭐plain:设置为朴素按钮 虚框
⭐在按钮中使用图标需要先导入:icon="Delete" circle
```java
<template>
    <div style="margin: 30px">
        <el-button :style="{ color: 'blue' }" type="primary" round>新增</el-button>
        <el-button loading type="success" round>编辑</el-button>
        <el-button plain type="info" round>删除</el-button>
        <el-button @click="sel" type="warning" round>查询</el-button>
        <el-button type="warning" :icon="Delete" circle></el-button>
    </div> 
</template>

<script setup>
import {  Delete, Search } from '@element-plus/icons-vue';

const sel = () => {
    alert("确定查询吗")
}
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c58f8564-71c9-dd21-681f-6d8e57761409.png)
## 九：图标
#### 1.前缀图标
⭐:prefix-icon:绑定前缀图标，需要单独导入图标
⭐data中设置变量，用表单绑定值
#### 2.后缀图标
⭐:prefix-icon:绑定后缀图标，需要单独导入图标
⭐readonly：只读
```java
<template>
    <div style="margin: 30px">
        <el-input disabled v-model="data.name" style="width: 240px" placeholder="请输入姓名" :prefix-icon="Search" />
    </div>

    <div style="margin: 30px">
        <el-input readonly style="width: 240px" :suffix-icon="Calendar" />
    </div>
</template>

<script setup>
import { Calendar,  Search } from '@element-plus/icons-vue';
import { reactive } from 'vue';

const data = reactive({
    name: "汪苏泷"
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/a6e93cf6-fd05-8a81-a444-0d9b72638655.png)
#### 3.图标：el-icon
```java
<template>
    <div style="margin: 30px">
        <el-icon :size="20">
            <Search />
        </el-icon>
        <span style="margin-left: 30px;color: blueviolet;">
            <el-icon :size="20" color="red" style="top: 1px">
                <User />
            </el-icon>100
        </span>
    </div>
</template>

<script setup>
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/d81871c8-a280-056b-b56f-18a066a1f4f5.png)
## 十：多行文本type="textarea"
```java
<template>
    <div style="margin: 30px">
        <el-input type="textarea" v-model="data.descr" style="width: 240px" placeholder="请输入一段描述" />
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    descr: '1989年9月17日，汪苏泷出生于辽宁沈阳一个艺术世家。自幼对音乐产生了浓厚的兴趣，初中时开始接触学习古典音乐。大学毕业于沈阳音乐学院作曲系。在大学期间将自己的作品发表于各大音乐网站，并获得多个音乐排行榜首位，从而被唱片公司发掘，签约成为职业歌手'
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/a8c46b06-11ee-7ca8-de25-35dfcdbde2cf.png)
## 十一：轮播图carousel
#### el-carousel-item：这是轮播图的每一项，用于展示图片或其他内容
⭐①导入图片②定义图片数组③轮播图遍历并绑定属性
```java
<template>
    <div style="margin: 30px">
        <el-carousel height="600px" style="width: 550px">
            <el-carousel-item v-for="item in data.imgs" :key="item">
                <img style="width: 100%" :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import b1 from '@/assets/b1.jpg'
import b2 from '@/assets/b2.jpg'
import b3 from '@/assets/b3.jpg'
import b4 from '@/assets/b4.jpg'
import b5 from '@/assets/b5.jpg'


const data = reactive({
    imgs: [b1, b2, b3, b4, b5]
})

</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/d2a33cc7-5d21-b4b3-10b7-d738a33fbb8d.png)
## 十二：单选el-radio-group
```java
<template>
    <div style="margin: 20px 0">
        <el-radio-group v-model="data.sex">
            <el-radio value="男">男</el-radio>
            <el-radio value="女">女</el-radio>
        </el-radio-group>
    </div>

    <div style="margin: 20px 0">
        <el-radio-group v-model="data.tag" size="large">
            <el-radio-button label="收藏" value="收藏" />
            <el-radio-button label="点赞" value="点赞" />
            <el-radio-button label="发布" value="发布" />
        </el-radio-group>
    </div>
</template>

<script setup>

import { reactive } from 'vue';

const data = reactive({
    sex: '女',
    tag: '收藏'
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5eda817c-95a5-d6cd-3b41-5843c349a716.png)
## 十三：多选
#### 1.下拉列表多选
⭐select:选择 el-option：下拉列表 clearable：清空 multiple：多选
⭐遍历选项：v-for="item in data.options
#### 2.多选按钮checkbox
⭐多选框绑定的是数组 遍历数组
```java
<template>
    <div style="margin: 20px 0">
        <el-select clearable multiple v-model="data.value" placeholder="请选择水果的种类" size="large" style="width:240px">
            <el-option v-for="item in data.options" :key="item" :label="item" :value="item" />
        </el-select>
    </div>

    <div style="margin: 20px 0">
        <el-checkbox v-for="item in data.options" :key="item" :label="item" :value="item">
            {{ item }}
        </el-checkbox>
    </div>
</template>

<script setup>

import { reactive } from 'vue';

const data = reactive({
    value: '',
    options: ['草莓', '芒果', '西瓜']
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/4cab63cf-f4a9-9757-021f-4c115b1e5ebf.png)
## 十四：图片预览:preview-src-list
⭐img 要用import导入
```java
<template>
    <div style="margin: 20px 0">
        <el-image :src="img" style="width: 100px;margin-left: 100px"
            :preview-src-list="[img, 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg']" />
    </div>
</template>

<script setup>
import img from '@/assets/logo.svg'
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5b0df46c-b68c-9547-6c95-714e6cd631dd.png)
## 十五：日期时间el-date-picker
#### 1.日期type="date"
#### 2.时间type="datetime"
#### 3.日期时间type="datetime"
#### 4.日期范围type="daterange"
```java
<template>
    <div>
        <el-date-picker v-model="data.date" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
            value-format="YYYY/MM/DD" />
       
        <el-date-picker style="margin-left: 50px " v-model="data.time" type="datetime" placeholder="请选择时间"
            format="HH:mm:ss" value-format="HH:mm:ss" />
        
        <el-date-picker style="margin-left: 50px " v-model="data.date1" type="datetime" placeholder="请选择日期时间"
            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY/MM/DD HH:mm:ss" />
       
        <el-date-picker style="margin-left: 50px" v-model="data.daterange" type="daterange" range-separator="到"
            start-placeholder="开始日期" end-placeholder="结束日期" />
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    date: '',
    time: '',
    date1: '',
    daterange: null
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/399aeace-c418-1d45-3b3f-ad93a624724d.png)
## 十六：数据表格 el-table
```java
<template>
    <div style="margin: 20px 0">
        <el-table :data="data.tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="address" label="地址" />
        </el-table>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    tableData: [
        { id: 1, date: '2024-12-11', name: '汪苏泷', address: '北京' },
        { id: 2, date: '2020-12-11', name: '李宇春', address: '成都' },
        { id: 3, date: '1995-12-11', name: '魏大勋', address: '沈阳' },
    ]
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/9538f896-d40f-59f0-6699-49009b6777ac.png)
#### 1.删除表格中其中某条数据
⭐定义点击事件 删除方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/a54decc7-8d93-a731-6578-f8ce43650183.png)
#### 2.弹窗 Dialog 对话框
⭐dialogVisible:控制弹窗显示的一个变量
```java
<template>
    <div style="margin: 20px 0">
        <el-table :data="data.tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="address" label="地址" />
            <el-table-column label="操作栏">
                <!-- 拿到行对象的数据 #default="scope"-->
                <!-- @click="del(scope.row.id)"传入当前行的Id作为参数-->
                <template #default="scope">
                    <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
            <div style="padding: 20px">
                <div style="margin-bottom: 10px">日期：{{ data.row.date }}</div>
                <div style="margin-bottom: 10px">名称：{{ data.row.name }}</div>
                <div>地址：{{ data.row.address }}</div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    dialogVisible: false,
    row: null,
    tableData: [
        { id: 1, date: '2024-12-11', name: '汪苏泷', address: '北京' },
        { id: 2, date: '2020-12-11', name: '李宇春', address: '成都' },
        { id: 3, date: '1995-12-11', name: '魏大勋', address: '沈阳' },
    ]
})

const del = (id) => {
    alert("删除ID=" + id + "的数据")
}

const edit = (row) => {
    data.row = row
    data.dialogVisible = true
} 
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/64497b08-72ad-167a-7bd5-35ae80174edf.png)
## 十七：分页组件pagination
⭐currentPage:当前页码    pageSize:每页几条
```java
<template>
    <div style="padding: 10px 0">
        <el-pagination v-model:current-page="data.currentPage" v-model:page-size="data.pageSize"
            :page-sizes="[2, 3, 6, 8]" background layout="total, sizes, prev, pager, next, jumper"
            :total="data.tableData.length" />
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
    currentPage: 1,
    pageSize: 2
})
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/f45c155a-8170-dd9f-33c2-a9e6d539cd36.png)