ElementUI学习笔记

目录

一、简单介绍

二、安装

1、下载

2、引入

三、布局

1、简介

2、使用

3、好处

四、布局容器

1、常见排布

2、调整样式

五、按钮

1、简单引用

2、改变样式

 3、加载中效果

六、表格

1、简单使用

 2、样式修改

七、对话框

1、简单使用

2、添加自定义内容

3、认识不同写法的区别

一、简单介绍

1、提供各种组件的UI，内容，功能现成代码

2、为了快速开发，适合用于开发管理系统端（学生信息管理系统、社区人口管理系统）UI样式

二、安装

1、下载

进入项目终端，输入：

npm i element-ui -S

2、引入

在main.js文件中，引入element-ui

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';    //引入
import 'element-ui/lib/theme-chalk/index.css';    //引入

Vue.config.productionTip = false

Vue.use(ElementUI);    //使用

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、布局

1、简介：通过基础的 24 分栏，迅速简便地创建布局【1行24列】

2、使用

（1）分两个12份，两个8份，效果如下

<template>
  <div class="home">
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
    <el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  components: {},
};
</script>

<style lang="scss" scoped>
 .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
</style>

 （2）自定义效果

给每行加上margin: 20px;

<template>
  <div class="home">
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
    <el-row  :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  components: {},
};
</script>

<style lang="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.el-row {// 注意观察文档，确定好选择器，这里是.el-row而不是el-row
  margin: 20px;
}
</style>

第二行加上属性gutter: 20，会自动给该行加padding-left和padding-right各10px

3、好处：响应式，根据网页的大小自动调整容器大小

 

四、布局容器

1、常见排布：头部、侧边、中间栏、底部

<template>
  <div class="about">
    <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
  </div>
</template>

<style lang="scss" scoped>
 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

2、调整样式

实现正好头部，中间，底部充满一个窗口

<template>
  <div class="about">
    <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
  </div>
</template>

<style lang="scss" scoped>
 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-container{//选择器包括Main，Aside，Footer
    height: calc(100vh - 60px);//calc()自动计算，100vh正好浏览器窗口大小，减去60px头部高度
  }
</style>

五、按钮

1、简单引用

<template>
  <div class="about">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>
            <!-- 按钮 -->
            <el-row>
              <el-button>默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-row>

            <el-row>
              <el-button icon="el-icon-search" circle></el-button>
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <el-button type="info" icon="el-icon-message" circle></el-button>
              <el-button
                type="warning"
                icon="el-icon-star-off"
                circle
              ></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-row>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.el-container {
  height: calc(100vh - 60px);
}
</style>

2、改变样式

除去圆形，换掉图标

<el-button type="success" icon="el-icon-s-promotion"></el-button>

 3、加载中效果

 <el-button type="primary" :loading="isClick" @click="btnClick">加载中</el-button>
methods:{
    btnClick(){
      this.isClick = true
      setTimeout(()=>{
        this.isClick = false
      },2000)
    }
  },

六、表格

1、简单使用

<template>
  <div class="about">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>
            Main
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>住址: {{ scope.row.address }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  components: {},
  data() {
    return {
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    };
  },
  methods: {
    handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
  },
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.el-container {
  height: calc(100vh - 60px);
}
</style>

 2、样式修改

给表格加上斑马纹、纵向边框、数字列

<template>
  <div class="about">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>
            Main
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%" border stripe> <!-- 纵向边框 斑马纹 -->
              <el-table-column type="index" width="50"> </el-table-column> <!-- 数字列 -->

              <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>住址: {{ scope.row.address }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  components: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.el-container {
  height: calc(100vh - 60px);
}
</style>

七、对话框

1、简单使用

点击表格编辑，弹出对话框

<template>
  <div class="about">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>
            Main
            <!-- 表格 -->

            <el-table :data="tableData" style="width: 100%" border stripe>
              <el-table-column type="index" width="50"> </el-table-column>

              <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>住址: {{ scope.row.address }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-dialog title="修改时间" :visible.sync="dialogFormVisible">
              <el-form
                :model="numberValidateForm"
                ref="numberValidateForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item
                  label="时间"
                  prop="age"
                  :rules="[
                    { required: true, message: '时间不能为空' },
                    { type: 'number', message: '时间必须为数字值' },
                  ]"
                >
                  <el-input
                    v-model.number="numberValidateForm.age"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="submitForm('numberValidateForm')"
                    >提交</el-button
                  >
                  <el-button @click="resetForm('numberValidateForm')"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </el-dialog>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  components: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      // 弹窗
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      numberValidateForm: {
        age: "",
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.el-container {
  height: calc(100vh - 60px);
}
</style>

2、添加自定义内容

添加单选框到对话框中，注意标签需要添加的属性及变量存储要放在对话框中

<el-form-item label="性别" prop="radio" :rules="[{ required: true, message: '性别不能为空' }]">
  <el-radio v-model="numberValidateForm.radio" label="1"
    >男</el-radio
  >
  <el-radio v-model="numberValidateForm.radio" label="2"
    >女</el-radio
  >
</el-form-item>
numberValidateForm: {
  age: "",
  radio: "",//属性值绑定到对话框中
},

3、认识不同写法的区别

<el-table-column prop="name" label="姓名" width="180" />

<el-table-column label="姓名" width="180">
  <template slot-scope="scope">
    <el-popover trigger="hover" placement="top">
      <p>姓名: {{ scope.row.name }}</p>
      <p>住址: {{ scope.row.address }}</p>
      <div slot="reference" class="name-wrapper">
        <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
    </el-popover>
  </template>
</el-table-column>

（1）popover弹出框

（2）template上的属性slot-scope="scope"是作用域插槽，关于作用域插槽详细学习，小伙伴们可以参考小编下面这篇文章Vue基础语法（五）_申小兮IU的博客-CSDN博客插槽的基础使用，具名插槽，作用域插槽，子组件向父组件通信总结https://blog.csdn.net/qq_51478745/article/details/127650324

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

7个最受瞩目的 Python 库，提升你的开发效率

7个最受瞩目的 Python 库，提升你的开发效率

当今时代&#xff0c;数据分析和处理已经成为了各行各业中不可或缺的一环。Python作为一种非常流行的编程语言&#xff0c;为我们提供了许多强大的工具和库来处理不同类型的数据。 在这篇文章中&#xff0c;我将向您介绍七个非常有用的Python库&#xff0c;这些库各自有着独特…
阅读更多...
js调用gpt3.5

js调用gpt3.5

参考链接&#xff1a;直接在前端调用 GPT-3 API 效果图&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>ChatGPT Web Example</title><style>body {font-family: "Helvetica Neue"…
阅读更多...
TimeQuest时序路径详解

TimeQuest时序路径详解

&#x1f4a1; 基于TimeQuest软件来查看时序报告和分析时序路径 分析最坏传输路径 根据[FPGA典型时序路径的分析可知&#xff0c;最坏传输路径对应的建立时间&#xff08;setup time&#xff09;余量最小。所以&#xff0c;查看最坏传输路径也就是查看建立时间余量最小的路径。…
阅读更多...
【Linux】安装DHCP服务器

【Linux】安装DHCP服务器

1、先检测网络是否通 get dhcp.txt rpm -qa //查看软件包 rpm -qa |grep dhcp //确定是否安装 yum install dhcp //进行安装 安装完成后 查询 rpm -ql dhcp 进行配置 cd /etc/dhcp 查看是否有遗留dhcpd.conf.rpmsave 删除该文件 cp /usr/share/doc/dhcp-4.1.1/dhcpd.conf.sampl…
阅读更多...
ChatGPT能代替Oracle DBA吗？用Oracle OCP（1z0-083）的真题测试一下。

ChatGPT能代替Oracle DBA吗？用Oracle OCP（1z0-083）的真题测试一下。

让我们来看看ChatGPT不能通过Oracle OCP的考试&#xff1f; 文章目录引言测试过程总结和分析关于博主&#xff0c;姚远&#xff1a;Oracle ACE&#xff08;Oracle和MySQL数据库方向&#xff09;。Oracle MAA 大师。华为云MVP。《MySQL 8.0运维与优化》的作者。拥有 Oracle 10g和…
阅读更多...
mysql和mysql2模块的区别！！（nodejs中的模块）

mysql和mysql2模块的区别！！（nodejs中的模块）

mysql 和 mysql2 都是 Node.js 中常用的操作 MySQL 数据库的模块&#xff0c;它们的主要区别是在实现方式上略有不同。 mysql&#xff1a;是 Node.js 中比较早期的 MySQL 操作模块&#xff0c;该模块底层使用的是回调函数&#xff08;callback&#xff09;来实现异步操作。在处…
阅读更多...
ESP32设备驱动-DHT12温湿度传感器驱动

ESP32设备驱动-DHT12温湿度传感器驱动

DHT12温湿度传感器驱动 文章目录DHT12温湿度传感器驱动1、DHT12介绍2、硬件准备3、软件准备4、驱动实现1、DHT12介绍 DHt12是经典DHT11温湿度传感器的升级版&#xff0c;完全向下兼容&#xff0c;精度更高&#xff0c;增加了I2C接口。 DHT12 具有单总线和标准 I 2C 两种通讯&…
阅读更多...
一文7个步骤从0到1教你搭建Selenium 自动化测试环境

一文7个步骤从0到1教你搭建Selenium 自动化测试环境

【导语】Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本。本文详细介绍了搭建自动化测试环境所需的工具&#xff0c;让你学习自动化测试不…
阅读更多...
不用科学上网，免费的GPT-4 IDE工具Cursor保姆级使用教程

不用科学上网，免费的GPT-4 IDE工具Cursor保姆级使用教程

大家好&#xff0c;我是可乐。 过去的一周&#xff0c;真是疯狂的一周。 GPT-4 震撼发布&#xff0c;拥有了多模态能力&#xff0c;不仅能和GPT3一样进行文字对话&#xff0c;还能读懂图片&#xff1b; 然后斯坦福大学发布 Alpaca 7 B&#xff0c;性能匹敌 GPT-3.5&#xff…
阅读更多...
[图像识别]关于cv2库无法安装的故障问题解决，全网最全解决方案！本人亲身测试，参考了stackoverflow、51CTO等博客文章总结而成

[图像识别]关于cv2库无法安装的故障问题解决，全网最全解决方案！本人亲身测试，参考了stackoverflow、51CTO等博客文章总结而成

本文范畴&#xff1a;故障排查 cv2 技术 库安装 Linux/Unix 笔记本系统&#xff1a;win10 python版本&#xff1a;3.10 故障问题&#xff1a;无法安装cv2库 适应对象&#xff1a;程序员新手、运维程序员、大学生、青少年对系统感兴趣的爱好者等等 文章目录前言一、cv2库是什么&…
阅读更多...
【C语言】栈区与堆区

【C语言】栈区与堆区

目录分配管理方式申请大小限制不同申请效率不同总结&#xff1a;栈区、堆区 是内存模型 对比起来看 分配管理方式 栈区由编译器自动管理&#xff0c; 函数运行时分配&#xff0c;函数结束时释放。存放为运行函数而分配的局部变量&#xff08;函数结束时&#xff0c;其内临时…
阅读更多...
超级实用,解密云原生监控技术，使用prometheus轻松搞定redis监控

超级实用,解密云原生监控技术，使用prometheus轻松搞定redis监控

前言 大家好&#xff0c;我是沐风晓月&#xff0c;本文收录于《 prometheus监控系列》 &#xff0c;截止目前prometheus专栏已经更新到第8篇文章。 本文中的是prometheus已经安装好&#xff0c;如果你还未安装&#xff0c;可以参考 prometheus安装及使用入门 若你想监控其他…
阅读更多...
现代数据栈MDS应用落地介绍—Vero营销自动化平台

现代数据栈MDS应用落地介绍—Vero营销自动化平台

Dazdata MDS现代数据栈MDS的出现使得中小企业低成本获得大数据处理能力成为可能&#xff0c;技术的进步使得各种基于MDS的大数据应用如雨后春笋般涌现&#xff0c;不同于国内的数据中台更多强调数据处理技术&#xff0c;MDS注重落地和最后一公里的大数据应用。Vero是一款现代数…
阅读更多...
1630.等差子数组

1630.等差子数组

1630. 等差子数组 难度中等 如果一个数列由至少两个元素组成&#xff0c;且每两个连续元素之间的差值都相同&#xff0c;那么这个序列就是 等差数列 。更正式地&#xff0c;数列 s 是等差数列&#xff0c;只需要满足&#xff1a;对于每个有效的 i &#xff0c; s[i1] - s[i] …
阅读更多...
（五）大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置

（五）大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置

前言 本节内容我们实现虚拟机的克隆&#xff0c;主要根据模板虚拟机克隆三台hadoop虚拟机&#xff0c;用于hadoop集群的搭建&#xff0c;同时根据上一小节的内容&#xff0c;配置hadoop虚拟机的主机名、ip网络等&#xff0c;最终完成hadoop虚拟机的实例化。 正文 虚拟机克隆…
阅读更多...
MATLAB | 全网最详细网络图(图论图)绘制教程

MATLAB | 全网最详细网络图(图论图)绘制教程

一篇超超超长&#xff0c;超超超全面网络图绘制教程&#xff0c;本篇基本能讲清楚所有绘制要点&#xff0c;当然图论与网络优化的算法一篇不可能完全讲清楚&#xff0c;未来如果看的人多可以适当更新&#xff0c;同时做部分网络图绘图复刻。 以下是本篇绘图实验效果&#xff1…
阅读更多...
Java中的String类

Java中的String类

String类1.String类1.1 特性1.2 面试题1.3 常用方法1.4 String与其他类型之间的转换2. StringBuilder类、StringBuffer类&#xff1a;可变字符序列1.String类 1.1 特性 String类为final类&#xff0c;不可被继承&#xff0c;代表不可变的字符序列&#xff1b; 实现了Serializ…
阅读更多...
webpack——使用、分析打包代码

webpack——使用、分析打包代码

世上本无nodejs js最初是在前端浏览器上运行的语言&#xff0c;js代码一旦脱离了浏览器环境&#xff0c;就无法被运行。直到nodejs的出现&#xff0c;我们在电脑上配置了node环境&#xff0c;就可以让js代码脱离浏览器&#xff0c;在node环境中运行。 浏览器不支持模块化 nodej…
阅读更多...
STL—vector

STL—vector

vector介绍在C标准库中&#xff0c;vector是一个常用的序列式容器&#xff08;线性结构&#xff09;&#xff0c;它就好比c语言中的数组&#xff0c;但是vector有一些数组没有的功能&#xff0c;是一个封装好了的类。想要使用vector需要先引入头文件&#xff1a;#include<ve…
阅读更多...
【C陷阱与缺陷】----语法陷阱

【C陷阱与缺陷】----语法陷阱

&#x1f4af;&#x1f4af;&#x1f4af; 要理解一个C程序&#xff0c;必须理解这些程序是如何组成声明&#xff0c;表达式&#xff0c;语句的。虽然现在对C的语法定义很完善&#xff0c;几乎无懈可击&#xff0c;大门有时这些定义与人们的直觉相悖&#xff0c;或容易引起混淆…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站