v-model 简单介绍
在使用vue的过程中会经常用到input和textarea这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
2024年08月11日
在使用vue的过程中会经常用到input和textarea这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
2024年08月11日
在前面随笔《循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理》简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔集续深化这一主题，着重介绍基于ABP后端接口信息，实现对前端界面的开发工作。
ABP（ASP.NET Boilerplate）框架主要是基于.net core 进行的后端Web API的开发，结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息，这样前端技术人员可以很容易整合前端的API应用。Vue + Element的前端应用，是目前较为流行的前端技术整合，Vue提供了前端框架很好的支持，Element提供了非常不错的界面组件封装和处理，通过ABP后端API接口和前端Vue+Element的整合，可以很好实现前后端的分离处理，同时又极大提高各自开发过程，并利用最新、应用广泛的技术来实现最好的技术应用。
2024年08月11日
<el-table v-loading="loading" :data="listPublish" border :cell-style="addClass" height="780" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="45" align="center" />
<el-table-column label="序号" width="45" align="center" prop="id" />
<el-table-column label="迭代或bug名称" width="150" align="center" prop="iteration" />
<el-table-column label="服务名称" align="center" prop="appname" > </el-table-column>
.........2024年08月11日
1.1需求分析
原始视频通常需要经过编码处理，生成m3u8和ts文件方可基于HLS协议播放视频。通常用户上传原始视频，系统 自动处理成标准格式，系统对用户上传的视频自动编码、转换，最终生成m3u8文件和ts文件，处理流程如下：
2024年08月11日
在项目中需要用到将景点文字合成语音，通过语音方式向用户介绍景点信息，需要用到文字转语音的在线合成解决方案。通过对各种文字转语音合成方案与效果比较，觉得讯飞的效果最好，语音拟人效果、文章断词都非常不错，并且有一年10万次的免费使用量，因此对比后决定使用讯的在线语音合成解决方案。由于这信主题网上教程非常少，只找到了一个没提供完整源代码的参考案例，结合官网资料，搞定的完整解决方案和效果图如下:
2024年08月11日
在Web应用开发中，前端常常要展示数据列表，数据较多时就要对查询结果进行分页，只显示当前页的数据，一方面不会造成数据列表过长，另一方面减少每次查询和返回的数据量。Laravel 中实现数据分页非常简单，使用 Element-UI 完成分页数据的前端展示同样非常简单。
2024年08月11日
关于设计，关于loading动效
申明:这篇经验为我在看了各个等平台上很多大神的文章总结而出。很多词汇并非原创，再次向原作者表示感谢。
文章主要分为以下几个部分：
What？ 什么是loading动画？
Why？ 设计loading动画的意义有什么?
2024年08月11日
注意：一定要按照合并列排序。
<body>
<div class="dashboard-container" id="order-app" v-loading="loading">
<div class="container" >
<!-- 搜索项 -->
<div class="tableBar">
<template>
<div>
<el-table :data='table' border fit :span-method="objectSpanMethod">
<el-table-column prop="checkRoom" label="检查房间"> </el-table-column>
<el-table-column prop="checkProject" label="检查项目"> </el-table-column>
<el-table-column prop="checkMoney" label="检查费用"> </el-table-column>
<el-table-column prop="attention" label="注意事项"> </el-table-column>
<el-table-column prop="appointmentTime" label="预约时间"> </el-table-column>
</el-table>
</div>
</template>
</div>
</div>
let vue1 = new Vue({
el: '#order-app',
data() {
return {
//表格数据
table: [{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT',
checkMoney: '300.22',
attention: '检查前空腹',
appointmentTime: ''
}, {
id: '1',
checkRoom: 'DR',
checkProject: '颈椎MRICT22',
checkMoney: '340.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 10：30'
}, {
id: '2',
checkRoom: 'DR',
checkProject: '鼻骨',
checkMoney: '500.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 9：30'
}
,
{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
checkMoney: '303.22',
attention: '检查前空腹',
appointmentTime: ''
},
],
}
},
created() {
// 给table赋值，重新遍历新增rowSpan属性，checkRoom，appointmentTime为table里面需要合并的属性名称，根据自己需要给表赋值
this.table = this.mergeTableRow(this.table, ['checkRoom'])
},
mounted() {
},
methods: {
objectSpanMethod({ row, column }) {
const span = column['property'] + '-span'
if (row[span]) {
return row[span]
}
},
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
const rowVal = v[m]
if (mList[rowVal]) {
mList[rowVal]++
data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
} else {
mList[rowVal] = 1
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
})
return data
}
}
}
);
</script>
</body>