vue3学习DAY4️⃣

原创 于 2025-01-20 23:51:32 发布 · 774 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习

写在前面：昨天学习了部分elementPlus元素，今天的首要目标是将剩下的九个常用组件全部学完并掌握，剩下的时间初步学习一些后端消息👾

  • 输入框

<script setup>
import { ref } from 'vue'
const name = ref('')
const password = ref('')
const text = ref('')
const selected = ref('')

</script>

<template>
<div>
    <!-- clearable 可一键清空 -->
    <h3>输入框</h3>
    <el-input v-model='name' clearable placeholder='Enter your name'/>
    <h3>密码框</h3>
    <el-input v-model='password' show-password placeholder='Enter your password'/>
    <h3>文本域</h3>
    <el-input type='textarea' v-model='text' placeholder='Enter your text'/>
    <h3>输入内容长度限制 输入框</h3>
    <el-input v-model='name' clearable placeholder='Enter your name' maxlength='10' show-word-limit/>
    <h3>前置内容 输入框</h3>
    <el-input v-model='name' clearable placeholder='Enter your name'>
        <template #prepend>http://</template>
    </el-input> 
    <h3>后置内容 输入框</h3>
    <el-input v-model='name' clearable placeholder='Enter your name'>
        <template #append>.com</template>
    </el-input>
    <h3>前置后置搜索框</h3>
    <el-input clearable placeholder='Enter your name'>
        <template #prepend>
            <el-select v-model='selected' placeholder='请选择' style="width: 100px">
                <el-option label='Option1' value='1'/>
                <el-option label='Option2' value='2'/>
            </el-select>
        </template>
        <template #append>
            <el-button>
                <el-icon><Search/></el-icon>
            </el-button>
        </template>
    </el-input>
</div>
</template>
  • 单选框、复选框

<script setup>
import { ref } from 'vue'
const radio = ref('3')
const radio2 = ref('b')
const checked = ref([])
const change = (val) => {
    console.log(val)
}
</script>

<template>
<div>
    <h3>单选框</h3> 
    <el-radio v-model="radio" value="1">备选项1</el-radio>
    <el-radio v-model="radio" value="2">备选项2</el-radio>
    <el-radio v-model="radio" value="3">备选项3</el-radio>

    <h3>单选框 事件绑定</h3>
    <el-radio v-model="radio2" value='a' @change="change">备选项1</el-radio>
    <el-radio v-model="radio2" value='b' @change="change">备选项2</el-radio>
    <el-radio v-model="radio2" value='c' @change="change">备选项3</el-radio>

    <h3>复选框</h3>
    <el-checkbox-group v-model="checked">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">运维</el-checkbox>
    </el-checkbox-group>
</div>
</template>
  • 下拉框

<script setup>
import { ref } from 'vue'
const radio = ref('2')
const selected = ref('1')
const selected1 = ref('1')
const selected2 = ref(['1', '2'])
const handleChange = (val) => {
    console.log(val)
}
</script>

<template>
<div>
    <h3>下拉框</h3> 
    <el-select v-model="radio">
        <el-option label="选项1" value="1"></el-option>
        <el-option label="选项2" value="2"></el-option>
        <el-option label="选项3" value="3"></el-option>
    </el-select>
    <h3>动态下拉框</h3>
    <el-select v-model="selected">
        <el-option v-for="item in 3" :key="item" :label="'选项'+item" :value="item"></el-option>
    </el-select>
    <h3>下拉框 事件绑定</h3>
    <el-select v-model="selected1" @change="handleChange">
        <el-option v-for="item1 in 3" :key="item1" :label="'选项'+item1" :value="item1"></el-option>
    </el-select>
    <h3>下拉框 多选</h3>
    <el-select v-model="selected2" multiple>
        <el-option v-for="item2 in 3" :key="item2" :label="'选项'+item2" :value="item2"></el-option>
    </el-select>
</div>
</template>
  • 日期选择器

<script setup>
import { ref } from 'vue'
const date1 = ref('')
const date2 = ref('')
const date3 = ref('')
const dateChange = (val) => {
  console.log(val)
}
</script>

<template>
<div>
    <h3>日期</h3> 
    <el-date-picker v-model="date1" placeholder="请选择" />
    <h3>日期时间</h3>
    <el-date-picker v-model="date2" type="datetime" placeholder="选择日期时间"/>
    <h3>事件绑定</h3>
    <el-date-picker v-model="date3" type="datetime" placeholder="选择日期时间" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss"/>
</div>
</template>

 想要设定中文，那就要在main.js中导入中文语言包并设置区域语言

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {locale: zhCn})

如果在“检查”中没有返回结果，查看报错：

App.vue:16 [Vue warn]: Property "handleChange" was accessed during render but is not defined on instance. at <App>

一定要认真检查绑定是否正确，确保使用了正确的语法绑定事件，例如 @change="handleChange"

  • 表单 

<script setup>
import { ref } from 'vue'
const form = ref({
    name: '',
    date: '',
    location: '',
    number: '',
    cost: '',
    content: ''
})
const submitForm = () => {
    console.log(form.value)
}
const resetForm = () => {
    form.value= {
        name: '',
        date: '',
        location: '',
        number: '',
        cost: '',
        content: ''
    }
}
</script>

<template>
<div>
<el-form>
    <el-form-item label="活動名稱">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活動日期">
        <el-date-picker
        v-model="form.date"
        type="date"
        placeholder="選擇日期">
        </el-date-picker>
    </el-form-item>
    <el-form-item label="活動地點">
        <el-input v-model="form.location"></el-input>
    </el-form-item>
    <el-form-item label="活動人數">
        <el-input v-model="form.number"></el-input>
    </el-form-item>
    <el-form-item label="活動費用">
        <el-input v-model="form.cost"></el-input>
    </el-form-item>
    <el-form-item label="活動內容">
        <el-input v-model="form.content"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>
</div>
</template>
  • 对话框

<script setup>
import { ref } from 'vue'
const form = ref({
    name: '',
    date: '',
    location: '',
    number: '',
    cost: '',
    content: ''
})
const submitForm = () => {
    console.log(form.value)
}
const resetForm = () => {
    form.value= {
        name: '',
        date: '',
        location: '',
        number: '',
        cost: '',
        content: ''
    }
}
const add=()=>{
    console.log("新增")
}
const dialog = ref(false)
const dialogFormVisible = ref(false)
const dialogClose = () => {
    console.log("关闭")
}
</script>

<template>
<div>
    <el-button @click="dialog= true">新增活動</el-button>
    <el-dialog v-model="dialog" title="新增活動" draggable @close="dialogClose">
        <el-form>
    <el-form-item label="活動名稱">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活動日期">
        <el-date-picker
        v-model="form.date"
        type="date"
        placeholder="選擇日期">
        </el-date-picker>
    </el-form-item>
    <el-form-item label="活動地點">
        <el-input v-model="form.location"></el-input>
    </el-form-item>
    <el-form-item label="活動人數">
        <el-input v-model="form.number"></el-input>
    </el-form-item>
    <el-form-item label="活動費用">
        <el-input v-model="form.cost"></el-input>
    </el-form-item>
    <el-form-item label="活動內容">
        <el-input v-model="form.content"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
    </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>
  • 表格、分页

<script setup>
import { ref } from 'vue'

const data=ref({
    tableData:[
        {id:1,name:'张三',web:'www.baidu.com',date:'2021-10-10'},
        {id:2,name:'李四',web:'www.baidu.com',date:'2021-10-10'},
        {id:3,name:'王五',web:'www.baidu.com',date:'2021-10-10'},
    ]
})

let idArr=[]
const selected=(data)=>{
    idArr=[]
    data.forEach((item)=>{
        idArr.push(item.id)
    })
    console.log(idArr)
}
const del=(index,row)=>{
    console.log(index,row)
}
const edit=(index,row)=>{
    console.log(index,row)
}
const currentPage=(val)=>{
    console.log(val)
}
</script>

<template>
<div>
    <el-button type="primary" @click="del">删除</el-button>
    <el-table :data="data.tableData" border height:120px style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="web" label="网站" width="180"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
            <el-button type="primary" @click="edit(scope.$index,scope.row)">编辑</el-button>
            <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
<el-pagination layout="prev, pager, next,jumper,total" :page-size='2' :total="50" @current-change='currentPage'></el-pagination>

</div>
</template>
  • 按需导入（大大提高效率，不用再main.js中手动导入啦！）

 在终端运行 npm install -D unplugin-vue-components unplugin-auto-import

npm install -D unplugin-icons

 

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver(),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: false,
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

这是最后修改好的配置文件（尊嘟改了很久，在配置过程中可能会出现各种奇奇怪怪的错误，建议先看清楚是什么原因方便对症下药！）

今天的学习依然看到是邓瑞老师的视频，讲的真的十分细致！

【2024新版】40分钟学会ElementPlus UI框架，Vue3前端视频教程，web快速入门实战课程 

写在最后：今天的学习就到这里啦～明天开学习端的学习😇（在外面玩了一整天哈哈哈）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值