袁小白_VUE知识点初学笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

/**
* @Description: 本文只为本人初学vue、Element、echarts学习记录使用
* @Param: 
* @return: 
* @Author: 袁小白
* @Date: 2023/7/24
*/

---

一、VUE框架、Element框架、Echarts可视化

Vue地址：https://cn.vuejs.org/guide/introduction.html
Element地址：https://element.eleme.cn/#/zh-CN
Echarts地址：https://echarts.apache.org/zh/index.html

二、vue+Element框架

1.vue替换原先数组的数据

代码如下（示例）：

this.$set(this.labInfos, index, infoData);

提示：labInfos是存放原先的数据的数组，infoData是新的数据，index是数组的索引值

2.vue为字符串变量内容添加空格

代码如下（示例）：

 methods: {
 	//处理报警对话框
            dealWithWarning(warningInfo){
              if (warningInfo.currentValue != null) {
              //只看这里就可以，我们需要判断是否有值，有值将他们连接，中间添加空格，一个\xa0代表一个空格
                this.dealWithInfo.warning = warningInfo.alarmName + '/'
                                            + warningInfo.alarmInfo
                                            + "\xa0\xa0\xa0\xa0" +warningInfo.currentValue
                                            + warningInfo.unit;
              } else {
                this.dealWithInfo.warning = warningInfo.alarmName + '/' + warningInfo.alarmInfo;
              }
            },
 }

提示：方法中不能直接打空格进行字符串连接（会无效），而是使用\xa0代替空格

3.vue权限控制文本框必须输入内容，输入框不能为空和全部空格

代码如下（示例）：

//vue表单界面
<el-dialog title="报警信息处理" :visible.sync="showDealWith" width="800px">
	//关键代码:rules="fromRule"添加表单校验
      <el-form :model="dealWithInfo" style="padding-left: 8%;" :rules="fromRule" ref="form">
        <el-form-item label="处理内容：" :label-width="formLabelWidth" prop="alarmDealWith">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            //这里是el-from的：model和el-form-item的prop组合而成的，也是data里面的保存这个输入框内容的变量
            v-model="dealWithInfo.alarmDealWith" 
            //限制最大的字数限制  
            maxlength="300"
            show-word-limit
            style="width: 380px;"
            //输入框没有height方法，使用:rows属性调整高度
            :rows="8"
          ></el-input>
        </el-form-item>
      </el-form>
      //两个按钮使用@click绑定事件
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDealWith = false">取 消</el-button>
        <el-button type="primary" @click="dealWithSubmit()">提 交</el-button>
      </div>
</el-dialog>

//script脚本
<script>
    export default {
		data() {
			return() {
				dealWithInfo: {
                  id: '',
                  alarmDealWith: '',
                },
                //表单校验，处理内容不可为空
                fromRule:{
                  alarmDealWith:
                  //required是否显示必填星标，message提示的信息
                  [{required: true, message: "处理内容不能为空", trigger: "blur"},
                   {required: true, message: "处理内容不能全部为空", trigger: "blur",transform:(value) => value && value.trim()}]
                },
			}
		}
	}

实现的效果：

4.vue前端网页打印信息

代码如下（示例）：

//res即为所要打印的结果
console.log("结果",res);

5.vue前端实现列表轮播

代码如下（示例）：

//vue前端页面
		//用了element组件
		<el-card style="">
		  //slot="header"自定义表头，这里可以添加图片和文字
          <div slot="header">
            <img style=""
                 :src="" />
            <span style=""> 轮播列表 </span>
          </div>
          //这里v-if判断是为了确保获取到数据在进行轮播，否则轮播一遍会出现大片空白
          <scroll-seamless :class-option="classOption" v-if="warningInfos.length>0">
            <el-row>
              <el-card style="" :body-style="{ padding: '0px' }">
                <warn-info :warning-info="warningInfos" style="height: 380px;"/>
              </el-card>
            </el-row>
          </scroll-seamless>
        </el-card>

//script脚本
		export default {
			//从js里面导入后台获取报警信息的方法
			import {getWarningInfo} from '@/api/business/alarm/alarmData';
			data() {
		      return {
		        //用于保存报警列表
		        warningInfos: [],
		        //列表轮播的各种配置
		        classOption: {
		          step: 0.5, // 数值越大速度滚动越快
		          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
		          hoverStop: true, // 是否开启鼠标悬停stop
		          direction: 1, // 0向下 1向上 2向左 3向右
		          openWatch: true, // 开启数据实时监控刷新dom
		          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
		          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
		          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
		        },
		      }
		    }，
		    created() {
		      //页面加载时，获取报警信息
		      this.getWarningInfos();
		    },
		    methods: {
		      //定义一个方法去调用后台引入的方法
		      getWarningInfos(){
		        getWarningInfo().then(res => {
		          console.log("实验室报警信息列表",res)
		          //使用foreach循环取值
		          res.data.forEach(item => {
		            console.log("实验室报警item",item)
		            //对数据进行处理
		            if (item.alarmInfo == "高报"){
		              item.alarmInfo = item.alarmName+"上限"+"报警"
		            } else if (item.alarmInfo == "低报"){
		              item.alarmInfo = item.alarmName+"下限"+"报警"
		            } else {
		              item.alarmInfo = item.alarmName
		            }
		            //保存到在data里面定义的warningInfos[]数组里面
		            this.warningInfos.push(item);
		          })
		        })
		      }
		    }
		}

---

三、Echarts可视化

总结