Vue3使用

1、列表实现

<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{'text-align':'center'}"><el-table-column type="selection" width="55" align="center" /><el-table-column prop="date" label="日期" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="left"></el-table-column><el-table-column prop="age" label="年龄" align="right"></el-table-column><el-table-column prop="sex" label="性别" align="left" :formatter="sexFormat"></el-table-column><el-table-column prop="phone" label="电话" align="left"></el-table-column><el-table-column prop="address" label="地址" :show-overflow-tooltip="true" align="left"></el-table-column><el-table-column prop="enableFlag" label="启用状态" :formatter="enableFlagFormat" align="left"></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"><template #default="scope"><el-button size="mini" type="text" @click="handleSelect(scope.$index,scope.row)">详情</el-button><el-button size="mini" type="text" @click="handleUpdate(scope.$index,scope.row)">修改</el-button></template></el-table-column></el-table>

vue3 中无法使用slot-scope的问题

vue2:上下对应,title是自己随便起的名字

1、定义一个普通的插槽,可以用div,任何标签

<div slot="title"></div>

2、定义一个element列表里面插槽的标签

<div slot="title" slot-scope="scope"></div>

vue3:上下对应,title是自己随便起的名字

1、注意,vue3中只能用template, # 等同于 slot=

<template #title></template>

2、注意,vue3中只能用template, # 等同于 slot=

<template #title="scope"></template>

 2、el-dialog实现

<el-dialog v-model="addOpen" class="diaStyle" style="height: 80vh; overflow-y: auto" :title="title"><el-form ref="ruleForm" :model="form" :inline="true" :rules="rules" label-width="80px" style="margin-bottom: 20px"><el-row><el-col :span="12"><el-form-item label="日期" prop="date" style="width: 100%;"><el-input v-model="form.date" type="text" placeholder="请输入日期" :disabled="disabled" /></el-form-item></el-col><el-col :span="12"><el-form-item label="姓名" prop="name" style="width: 100%;"><el-input v-model="form.name" type="text" placeholder="请输入姓名" :disabled="disabled" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="性别" prop="sex" style="width: 100%;"><el-select v-model="form.sex" placeholder="请选择性别" :disabled="disabled"><el-option v-for="item in sexOption" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="年龄" prop="age" style="width: 100%;"><el-input v-model="form.age" type="text" placeholder="请输入年龄" :disabled="disabled" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="联系方式" prop="phone" style="width: 100%;"><el-input v-model="form.phone" type="text" placeholder="请输入联系方式" :disabled="disabled" /></el-form-item></el-col><el-col :span="12"><el-form-item label="启用状态" prop="enableFlag" style="width: 100%;"><el-radio-group v-model="form.enableFlag" :disabled="disabled"><el-radio v-for="dict in enableOption" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio></el-radio-group></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="地址" prop="address" style="width: 100%;"><el-input v-model="form.address" type="text" placeholder="请输入地址" :disabled="disabled" /></el-form-item></el-col></el-row></el-form><div class="dialog-footer"><el-button type="primary" @click="submitForm" v-preventReClick="2000" v-if="confDisabled">保 存</el-button><el-button @click="closeDialog">{{buttonName}}</el-button></div></el-dialog>

2.1、vue3 中无法使用:visible.sync的问题

:visible指的是属性绑定,表示弹框的显示隐藏。当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏。:visible.sync指的就是同步动态双向的来表示visible的值。

在vue3中取而代之的是v-model,将:visible.sync  改为  v-model

2.2、submitForm提交校验form表单

<script setup>
import { toRefs, ref, reactive, unref} from 'vue'
/** 提交按钮 */let submitForm = () => {const ff = unref(ruleForm);if (!ff) return;ruleForm.value.validate((valid) => {if (valid) {if (form.value.id != undefined) {instance.proxy.$message({message: 'id为:' + form.value.id + '的数据修改成功',type: 'success',})addOpen.value = false;reset();} else {instance.proxy.$message({message: '新增成功',type: 'success',})addOpen.value = false;reset();}}});
</script>

3、分页实现

<el-pagination class="v3-page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4":page-sizes="[5,10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
<script setup>
import { toRefs, ref, reactive} from 'vue'
const handleSizeChange = (val) => {console.log(`每页 ${val} 条`);pageSize.value = valgetListData();}const handleCurrentChange = () => {console.log(`当前页: ${val}`);page.value = valgetListData();}
</script>

vue3 Element-UI 插件 Pagination 显示为英文问题

在mains.js 里添加

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// en是英文 zh-cn 是中文
app.use(ElementPlus, {locale: zhCn,
})

4、$message提示消息

<script setup>import { getCurrentInstance } from 'vue'import { getTenantDatas } from '@/api/v3'//使用messageconst instance = getCurrentInstance()const { proxy } = getCurrentInstance();instance.proxy.$message({message: `操作成功`,type: 'success',})
</script>

5、监听

5.1普通监听

<script setup>
import { toRefs, ref, reactive, watch} from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {if (newValue) {instance.proxy.$message({message: `我侦听到了count状态的变化,当前值为${newValue},从而处理相关逻辑`,type: 'success',})}})
</script>

5.2深度监听

<script setup>
import { toRefs, ref, reactive, watch} from 'vue'const user = reactive({name: 'zs',age: 18,})//深度监听watch(user,(value) => {console.log(value)instance.proxy.$message({message: `我侦听到了user年龄的变化,当前值为${value.age},从而处理相关逻辑`,type: 'success',})},{// 深度监听,,,当ref的值是一个复杂数据类型,需要深度监听deep: true,immediate: true})
</script>

6、onMounted钩子函数

<script setup>
import { toRefs, ref, reactive, onMounted} from 'vue'//注册周期钩子:钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码onMounted(() => {instance.proxy.$message({message: "生命周期函数:onMounted",type: 'success',})})
</script>

7、reactive 和 ref区别

1、reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式,ref 适用于简单的响应式数据,而 reactive 则适用于复杂对象或数组的响应式数据。

2、ref:使用 .value 属性来访问和修改值。

3、reactive:可以直接访问和修改对象或数组的属性或元素,而无需使用 .value。

8、父子组件相互调用

1、父组件

<template><div id="example1" class="demo">
<child ref="childRef" :parentData="state" :parentFunction="myFunction" style="margin-top: 20px;" /></div>
</template>
<script setup>import { toRefs, ref, reactive, watch, unref, computed, onMounted } from 'vue'import child from './views/child.vue'import { getCurrentInstance } from 'vue'const state = reactive({patientInfo: null,ActiveIndex: 0,myData: '我是父组件里的属性',name: '孩子',age: '15',sex: '男',})
const myFunction = (item) => {instance.proxy.$message({message: '我是父组件里的方法',type: 'success',})}//调用子组件中的方法const childRef = ref(null);let handleChild = () => {childRef.value.changeData();}

2、子组件

<template><div id="example1" class="demo" style="border: 1px solid blue"><el-form :model="dataForm" label-width="80px" style="margin-bottom: 20px"><el-row><el-col :span="12"><el-form-item label="解释" prop="myData" style="width: 100%;"><el-input v-model="dataForm.myData" type="text" placeholder="请输入解释" /></el-form-item></el-col><el-col :span="12"><el-form-item label="姓名" prop="name" style="width: 100%;"><el-input v-model="dataForm.name" type="text" placeholder="请输入姓名" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="性别" prop="sex" style="width: 100%;"><el-input v-model="dataForm.sex" type="text" placeholder="请输入性别" /></el-form-item></el-col><el-col :span="12"><el-form-item label="年龄" prop="age" style="width: 100%;"><el-input v-model="dataForm.age" type="text" placeholder="请输入年龄" /></el-form-item></el-col></el-row></el-form><el-button size="mini" type="primary" @click="handleClick()">触发</el-button></div>
</template><script setup>import { toRefs, ref, reactive, watch, unref, defineExpose, computed } from 'vue'import { getCurrentInstance } from 'vue'//使用messageconst instance = getCurrentInstance()const { proxy } = getCurrentInstance();const props = defineProps({parentData: {type: Object,default: () => {return {}}},parentFunction: {type: Function,default: () => null,},})//计算属性computed函数const dataForm = computed(() => props.parentData);let handleClick = () => {//父组件中的方法props.parentFunction(dataForm);}//子组件定义方法供父组件调用const changeData = () => {instance.proxy.$message({message: '我是子组件里的方法',type: 'success',})}defineExpose({changeData,});</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}
</style>

3、效果

9、Vue3使用vuex存取数据

1、vuex引入

npm install vuex@next

2、创建对应目录

根目录下创建store目录,在里面创建对应的getter,index文件以及modules文件夹

3、modules/user.js


//导出store模块
export default {namespaced: true,state: () => ({token: localStorage.getItem('token') || '测试token',userinfo: '测试userinfo'// userinfo: localStorage.getItem('userinfo')||'测试userinfo'}),mutations: {setToken(state, token) {state.token = token;localStorage.setItem('token', token)},setUserInfo(state, userinfo) {state.userinfo = userinfolocalStorage.setItem('userinfo', userinfo)}},actions: {}}

 4、getters.js

export default {token: (state) => state.user.token,userinfo: (state) => state.user.userinfo
}

 5、index.js

import { createStore } from 'vuex'
import user from './modules/user'
import getters from './getters'
export  const store = createStore({modules: {user},getters
})

 6、main.js中引用

 7、vuex调用

10、完整demo代码

 9.1、app.vue

<template><div id="example1" class="demo"><el-row :gutter="10" style="margin-bottom: 10px"><el-col :span="1.5"><el-button type="primary" size="mini" @click="handleInsert">新增</el-button></el-col><el-col :span="1.5"><el-button type="primary" size="mini" @click="handleChild">子组件调用</el-button></el-col></el-row><el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{'text-align':'center'}"><el-table-column type="selection" width="55" align="center" /><el-table-column prop="date" label="日期" align="center"></el-table-column><el-table-column prop="name" label="姓名" align="left"></el-table-column><el-table-column prop="age" label="年龄" align="right"></el-table-column><el-table-column prop="sex" label="性别" align="left" :formatter="sexFormat"></el-table-column><el-table-column prop="phone" label="电话" align="left"></el-table-column><el-table-column prop="address" label="地址" :show-overflow-tooltip="true" align="left"></el-table-column><el-table-column prop="enableFlag" label="启用状态" :formatter="enableFlagFormat" align="left"></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"><template #default="scope"><el-button size="mini" type="text" @click="handleSelect(scope.$index,scope.row)">详情</el-button><el-button size="mini" type="text" @click="handleUpdate(scope.$index,scope.row)">修改</el-button></template></el-table-column></el-table><el-pagination class="v3-page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4":page-sizes="[5,10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination><!-- 添加修改对话框 --><!--给el-dialog添加一个mpc-model-middle的class--><el-dialog v-model="addOpen" class="diaStyle" style="" :title="title"><el-form ref="ruleForm" :model="form" :inline="true" :rules="rules" label-width="80px" style="margin-bottom: 20px"><el-row><el-col :span="12"><el-form-item label="日期" prop="date" style="width: 100%;"><el-input v-model="form.date" type="text" placeholder="请输入日期" :disabled="disabled" /></el-form-item></el-col><el-col :span="12"><el-form-item label="姓名" prop="name" style="width: 100%;"><el-input v-model="form.name" type="text" placeholder="请输入姓名" :disabled="disabled" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="性别" prop="sex" style="width: 100%;"><el-select v-model="form.sex" placeholder="请选择性别" :disabled="disabled"><el-option v-for="item in sexOption" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="年龄" prop="age" style="width: 100%;"><el-input v-model="form.age" type="text" placeholder="请输入年龄" :disabled="disabled" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="联系方式" prop="phone" style="width: 100%;"><el-input v-model="form.phone" type="text" placeholder="请输入联系方式" :disabled="disabled" /></el-form-item></el-col><el-col :span="12"><el-form-item label="启用状态" prop="enableFlag" style="width: 100%;"><el-radio-group v-model="form.enableFlag" :disabled="disabled"><el-radio v-for="dict in enableOption" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio></el-radio-group></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="地址" prop="address" style="width: 100%;"><el-input v-model="form.address" type="text" placeholder="请输入地址" :disabled="disabled" /></el-form-item></el-col></el-row></el-form><div class="dialog-footer"><el-button type="primary" @click="submitForm" v-preventReClick="2000" v-if="confDisabled">保 存</el-button><el-button @click="closeDialog">{{buttonName}}</el-button></div></el-dialog><child ref="childRef" :parentData="state" :parentFunction="myFunction" style="margin-top: 20px;" /><div style="border: 2px solid #f708bb;height: 80px;text-align: center;margin-top: 10px"><el-button size="mini" type="primary" @click="changCount" style="margin-top: 5px;display: flex;justify-content: flex-start;margin-left: 5px;">更改count的值</el-button><div>{{ count }}</div><div>姓名:{{ user.name }},年龄:{{user.age}}岁</div></div><div style="border: 2px solid #008000;height: 160px;text-align: center;margin-top: 10px">暂时没想出来写点啥</div></div>
</template><script setup>import { toRefs, ref, reactive, watch, unref, computed, onMounted } from 'vue'import child from './views/child.vue'import { getCurrentInstance } from 'vue'import { getTenantDatas } from '@/api/v3'//使用messageconst instance = getCurrentInstance()const { proxy } = getCurrentInstance();const data = reactive({})const count = ref(0)const user = reactive({name: 'zs',age: 18,})function changCount() {count.value++user.age++}watch(count, (newValue, oldValue) => {if (newValue) {instance.proxy.$message({message: `我侦听到了count状态的变化,当前值为${newValue},从而处理相关逻辑`,type: 'success',})}})//深度监听watch(user,(value) => {console.log(value)instance.proxy.$message({message: `我侦听到了user年龄的变化,当前值为${value.age},从而处理相关逻辑`,type: 'success',})},{// 深度监听,,,当ref的值是一个复杂数据类型,需要深度监听deep: true,immediate: true})//注册周期钩子:钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码onMounted(() => {instance.proxy.$message({message: "生命周期函数:onMounted",type: 'success',})})const state = reactive({patientInfo: null,ActiveIndex: 0,myData: '我是父组件里的属性',name: '孩子',age: '15',sex: '男',})//reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式,ref 适用于简单的响应式数据,而 reactive 则适用于复杂对象或数组的响应式数据。//ref:使用 .value 属性来访问和修改值。//reactive:可以直接访问和修改对象或数组的属性或元素,而无需使用 .value。let tableData = reactive([])// 数据相关 ?sortProperty=createdTime&sortOrder=DESC&pageSize=10&page=0const total = ref(0)const sortProperty = ref('createdTime')const sortOrder = ref('DESC')const pageSize = ref(2)const page = ref(1)// 获取数据的方法const getListData = async () => {instance.proxy.$message({message: "获取数据的方法",type: 'success',})const result = await getTenantDatas({sortProperty: sortProperty.value,sortOrder: sortOrder.value,pageSize: pageSize.value,page: page.value - 1})tableData = resulttotal.value = result.length}const handleSizeChange = (val) => {console.log(`每页 ${val} 条`);pageSize.value = valgetListData();}const handleCurrentChange = () => {console.log(`当前页: ${val}`);page.value = valgetListData();}// 执行方法getListData()//表单校验let rules = ref({date: [{ required: true, message: "日期不能为空", trigger: "blur" },],name: [{ required: true, message: "名称不能为空", trigger: "blur" },],address: [{ required: true, message: "地址不能为空", trigger: "blur" },],enableFlag: [{ required: true, message: "启用状态不能为空", trigger: "blur" },],age: [{ required: true, message: "启用状态不能为空", trigger: "blur" },],sex: [{ required: true, message: "启用状态不能为空", trigger: "blur" },],});// 详情let form = ref({});const ruleForm = ref(null); //表单let addOpen = ref(false);let disabled = ref(false);let buttonName = ref("取 消");let confDisabled = ref(false);let title = ref("");let handleSelect = (index, row) => {form.value = row;disabled.value = true;addOpen.value = true;confDisabled.value = false;buttonName.value = "关 闭";title.value = "查看详情"}//修改let handleUpdate = (index, row) => {form.value = row;disabled.value = false;addOpen.value = true;confDisabled.value = true;buttonName.value = "取 消";title.value = "修改信息"}//新增let handleInsert = () => {disabled.value = false;addOpen.value = true;confDisabled.value = true;buttonName.value = "取 消";title.value = "新增信息"}/** 提交按钮 */let submitForm = () => {const ff = unref(ruleForm);if (!ff) return;ruleForm.value.validate((valid) => {if (valid) {if (form.value.id != undefined) {instance.proxy.$message({message: 'id为:' + form.value.id + '的数据修改成功',type: 'success',})addOpen.value = false;reset();} else {instance.proxy.$message({message: '新增成功',type: 'success',})addOpen.value = false;reset();}}});};//关闭弹窗let closeDialog = () => {addOpen.value = false;reset();}let reset = () => {form.value = {}}let ids = ref(undefined);let banchParams = ref([]);//多选框选中数据let handleSelectionChange = (selection) => {ids.value = selection.map(item => item.id)banchParams.value = selectionconsole.log(ids.value)}let enableOption = [{"label": "启用","value": "0"}, {"label": "停用","value": "1"}];let enableFlagFormat = (item) => {return format(enableOption, item.enableFlag);};// 回显let format = (datas, value) => {var actions = [];Object.keys(datas).some((key) => {if (datas[key].value == ('' + value)) {actions.push(datas[key].label);return true;}})return actions.join('');}let sexOption = [{"label": "男","value": "0"}, {"label": "女","value": "1"}, {"label": "未知","value": "2"}];let sexFormat = (item) => {return format(sexOption, item.sex);};const myFunction = (item) => {instance.proxy.$message({message: '我是父组件里的方法',type: 'success',})}//调用子组件中的方法const childRef = ref(null);let handleChild = () => {childRef.value.changeData();}
</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}.demo {border: 2px solid #ff0000;padding: 20px;}.v3-page {margin-top: 5px;display: flex;justify-content: flex-end;}.dialog-footer{display: flex;justify-content: flex-end;}
</style>

9.2、child.vue

<template><div id="example1" class="demo" style="border: 1px solid blue"><el-button size="mini" type="primary" @click="handleClick()" style="margin-bottom: 10px;display: flex;justify-content: flex-start;margin-left: -15px;">触发父组件方法</el-button><el-form :model="dataForm" label-width="80px"><el-row><el-col :span="12"><el-form-item label="解释" prop="myData" style="width: 100%;"><el-input v-model="dataForm.myData" type="text" placeholder="请输入解释" /></el-form-item></el-col><el-col :span="12"><el-form-item label="姓名" prop="name" style="width: 100%;"><el-input v-model="dataForm.name" type="text" placeholder="请输入姓名" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="性别" prop="sex" style="width: 100%;"><el-input v-model="dataForm.sex" type="text" placeholder="请输入性别" /></el-form-item></el-col><el-col :span="12"><el-form-item label="年龄" prop="age" style="width: 100%;"><el-input v-model="dataForm.age" type="text" placeholder="请输入年龄" /></el-form-item></el-col></el-row></el-form></div>
</template><script setup>import { toRefs, ref, reactive, watch, unref, defineExpose, computed } from 'vue'import { getCurrentInstance } from 'vue'//使用messageconst instance = getCurrentInstance()const { proxy } = getCurrentInstance();const props = defineProps({parentData: {type: Object,default: () => {return {}}},parentFunction: {type: Function,default: () => null,},})//计算属性computed函数const dataForm = computed(() => props.parentData);let handleClick = () => {//父组件中的方法props.parentFunction(dataForm);}//子组件定义方法供父组件调用const changeData = () => {instance.proxy.$message({message: '我是子组件里的方法',type: 'success',})}defineExpose({changeData,});</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}
</style>

package.json中设置rules

"rules": {"no-undef": "off","no-unused-vars": "off","vue/multi-word-component-names": "off"}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/639819.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【注解】@RequiredArgsConstructor 按需自动生成构造函数,举例说明

RequiredArgsConstructor 是Lombok库中的一种注解&#xff0c;它用于自动生成构造函数&#xff0c;针对于final字段的构造函数。它的作用包括以下几点&#xff1a; 自动生成构造函数&#xff1a;RequiredArgsConstructor 注解自动生成一个构造函数&#xff0c;该构造函数接受标…

以太坊账户地址与比特B地址生成方法对比

作者 张群&#xff08;赛联区块链教育首席讲师&#xff0c;工信部赛迪特聘资深专家&#xff0c;CSDN认证业界专家&#xff0c;微软认证专家&#xff0c;多家企业区块链产品顾问&#xff09;关注张群&#xff0c;为您提供一站式区块链技术和方案咨询。 以太坊和比特B地址在生成方…

17.JVM-[一篇通]

文章目录 JVM1.JVM 简介 (一个进程有一个JVM)1.1JVM 发展史1.2 JVM 和《Java虚拟机规范》 2.JVM 运行流程2.1JVM 执行流程 3.JVM 运行时数据区3.1 堆&#xff08;线程共享 一个进程只有一份堆&#xff09;3.2Java虚拟机栈&#xff08;线程私有 每个线程都有一份属于自己的栈&am…

Linux网络编程(二-套接字)

目录 一、背景知识 1.1 端口号 1.2 网络字节序 1.3 地址转换函数 二、Socket简介 三、套接字相关的函数 3.1 socket() 3.2 bind() 3.3 connect() 3.4 listen() 3.5 accept() 3.6 read()/recv()/recvfrom() 3.7 send()/sendto() 3.8 close() 四、UPD客服/服务端实…

规范文字引言与材料

撰写引言 什么是引言&#xff1f; 引言又叫前言、绪论、引子、绪言等。 引言写在书或文章的正文前面&#xff0c;是类似序言或导言的部分。 在科研论文中&#xff0c;引言是引导读者了解研究背景、目的、 意义和研究问题的关键部分。对于人工智能方向的论 文&#xff0c;引言…

x-cmd pkg | curl - 极其强大的网络请求处理工具

目录 简介用户首次快速实验指南轻量级网络请求工具安全竞品和相关作品进一步探索 简介 curl&#xff08;Client for URLs&#xff09;是一款网络请求工具。 curl 于 1996 年首次发布。它最初被命名为 httpget 后更名为curl。 curl 常用于发送网络请求&#xff0c;它支持多种网…

一条sql是如何运行的

在我们平时使用sql的时候&#xff0c;基本是基于黑盒的使用方式&#xff0c;在客户端输入一条sql语句&#xff0c;然后回显想要的数据&#xff0c;对于mysql server端内部如何运行的以及与存储引擎如何交互的不得而知。 通过下面一幅图&#xff0c;大致描述客户端和服务端交互…

什么是VUE 创建第一个VUE实例

一、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 构建用户界面 的 渐进式 框架 Vue2官网&#xff1a;Vue.js 1.什么是构建用户界面 基于数据渲染出用户可以看到的界面 2.什么是渐进式 所谓渐进式就是循序渐进&#xff0c;不一定非得把Vu…

Android 基础技术——addView 流程

笔者希望做一个系列&#xff0c;整理 Android 基础技术&#xff0c;本章是关于 addView 在了解 addView 流程之前&#xff0c;先回答下以下几个问题&#xff1a; PhoneWindow是什么时候创建的&#xff1f; DectorView 是什么&#xff1f; DectorView 是什么时候创建的&#xf…

ABS10-ASEMI智能LED灯具专用ABS10

编辑&#xff1a;ll ABS10-ASEMI智能LED灯具专用ABS10 型号&#xff1a;ABS10 品牌&#xff1a;ASEMI 封装&#xff1a;ABS-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;1A 功率(Pd)&#xff1a;50W 芯片个数&#xff1a;4 引脚数…

曲线生成 | 图解三次样条曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 什么是样条&#xff1f;2 三次样条曲线原理2.1 曲线插值2.2 边界条件2.3 系数反解 3 算法仿真3.1 ROS C仿真3.2 Python仿真3.3 Matlab仿真 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细…

研学活动报名系统源码开发方案

一、项目背景与目标 &#xff08;一&#xff09;项目背景&#xff1a; 随着教育水平的提高和人们对综合素质培养的需求增加&#xff0c;研学活动作为一种教育方式受到了广大家长和学生的青睐。为了更好地组织和管理研学活动&#xff0c;需要建立一个研学活动报名系统&#xf…

C#,入门教程(22)——函数的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(21)——命名空间&#xff08;namespace&#xff09;与程序结构的基础知识https://blog.csdn.net/beijinghorn/article/details/124140653 一、函数的基本概念 一个软件的结构大体如下&#xff1a; 大厦application: a plaza { --…

【C++】stack与queue的模拟实现

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 stack与queue的实现比较简…

轮胎侧偏刚度线性插值方法

一、trucksim取数据 步骤一 步骤二 二、数据导入到matlab中 利用simulink的look up table模块 1是侧偏角&#xff1b;2是垂直载荷&#xff1b;输出是侧向力。 侧向力除以侧偏角就是实时的侧偏刚度。

【LeetCode】每日一题 2024_1_21 分割数组的最大值(二分)

文章目录 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01;题目&#xff1a;分割数组的最大值题目描述代码与解题思路 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 今天是 hard&#xff0c;难受&#xff0c;还好有题解大哥的清晰讲解 题目&a…

C#实现基于Word保护性模板文件的修改

目录 制作一个保护性模板文件 给文件设置保护密码 设计模板内容 限制编辑 进一步的需求 范例运行环境 Office DCOM 配置 设计实现 进一步修改模板文件 设置和取消保护 遍历WORD内容控件 总结 制作一个保护性模板文件 在类似一些OA的自动化处理或审批类系统里&a…

【 文本到上下文 #4】NLP 与 ML

一、说明 欢迎回到我们的 NLP 博客系列&#xff01;当我们进入第四部分时&#xff0c;焦点转移到机器学习 &#xff08;ML&#xff09; 和自然语言处理 &#xff08;NLP&#xff09; 之间的动态相互作用上。在本章中&#xff0c;我们将深入探讨 ML 和 NLP 的迷人协同作用&#…

【Linux】Shell 命令以及运行原理

Shell 命令以及运行原理 当用户登录 Linux 系统的时候&#xff0c;系统会给用户创建一个新的进程&#xff0c;一般叫做 bash&#xff08;命令行解释器&#xff09;。 Linux 严格意义上说的是一个操作系统&#xff0c;我们称之为 “核心&#xff08; kernel &#xff09;” &…

Kafka 问题排查

订单宽表数据不同步 事情的起因是专员在 ze app 上查不到订单了&#xff0c;而订单数据是从 mysql 的 order_search_info 查询的&#xff0c;order_search_info 表的数据是从 oracel 的 BZ_ORDER_INFO 表同步过来的&#xff0c;查不到说明同步有问题 首先重启&#xff0c;同步…