组件相关

一：定义数据

初始化数据的方法：通过reactive去定义一个数据

<template>
    <div style="font-size: 40px;margin-top: 30px">
        {{ data.name }} 
    </div>
</template>

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

const data = reactive({
    name: "汪苏泷"
})
</script>

二：绑定数据v-model

input输入框中绑定数据

<template>
    <div>
        <input v-model="data.name" />
    </div>
</template>

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

const data = reactive({
    name: "汪苏泷"
})
</script>

三：判断数据

v-if v-else-if v-else

根据变量的值动态的去判断样式，满足哪个就渲染哪个

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

四：遍历数据：v-for

1.item表示遍历出来的数据

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

2.下拉列表多选

⭐select:创建下拉列表
⭐multiple：多选
⭐option:定义下拉列表中的每一个选项
⭐selected：设置该选项为默认选中状态
⭐disabled：禁用该选项

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

五：绑定事件

1.@click＋方法

方法的写法：const 函数名 = (参数) => { 函数体 }

<template> 
    <div>
         <button @click="ddd">点我加好运</button>
    </div>
</template>

<script setup>
import { reactive} from 'vue';
const ddd = () => {
    alert("好运已加满")
}
</script>

六：绑定属性v-bind(:)

绑定了一张照片的路径

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

七：生命周期函数:onMounted

1.在页面元素完全加载完成之后触发 页面元素加载需要时间

<template>

</template>

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

onMounted(() =>{
    alert("页面已经加载完成")
})
</script>

八：按钮组件button

⭐绑定属性：设置字体颜色为蓝色 :style="{ color: 'blue' }"
⭐loading:设置为加载效果 转圈圈
⭐plain:设置为朴素按钮 虚框
⭐在按钮中使用图标需要先导入:icon="Delete" circle

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

九：图标

1.前缀图标

⭐:prefix-icon:绑定前缀图标，需要单独导入图标
⭐data中设置变量，用表单绑定值

2.后缀图标

⭐:prefix-icon:绑定后缀图标，需要单独导入图标
⭐readonly：只读

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

3.图标：el-icon

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

十：多行文本type="textarea"

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

十一：轮播图carousel

el-carousel-item：这是轮播图的每一项，用于展示图片或其他内容

⭐①导入图片②定义图片数组③轮播图遍历并绑定属性

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

十二：单选el-radio-group

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

十三：多选

1.下拉列表多选

⭐select:选择 el-option：下拉列表 clearable：清空 multiple：多选
⭐遍历选项：v-for="item in data.options

2.多选按钮checkbox

⭐多选框绑定的是数组 遍历数组

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

十四：图片预览:preview-src-list

⭐img 要用import导入

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

十五：日期时间el-date-picker

1.日期type="date"

2.时间type="datetime"

3.日期时间type="datetime"

4.日期范围type="daterange"

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

十六：数据表格 el-table

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

1.删除表格中其中某条数据

⭐定义点击事件 删除方法

2.弹窗 Dialog 对话框

⭐dialogVisible:控制弹窗显示的一个变量

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

十七：分页组件pagination

⭐currentPage:当前页码 pageSize:每页几条

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