Vue Japanese Element

Enterprise 2023-10-05 10:30:32 views: null

1. Quick Start with Vue

1.1. Introduction to Vue

  • Vue is a progressive front-end framework for building user interfaces.
  • It only focuses on the view layer, is very easy to learn, and can be easily integrated with other libraries or existing projects.
  • Implement the binding and composition of view components that respond to data through the simplest possible API.
  • Features
    : Easy to use: Get started quickly based on HTMLCSS JavaScript.
    Flexible: Simple and compact core, progressive technology stack, enough to handle applications of any scale.
    Performance: 20kbmin+gzip running size, ultra-fast virtual DOM, and the most worry-free optimization.

1.2. Quick start with Vue

  • Development steps
  1. Download and import the vue.js file.
  2. Write an introductory program.
    View: Responsible for page rendering, mainly composed of HTML+CSS.
    Script: Responsible for the business data model (Model) and data processing logic.

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        {
     
     {msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
        
        
        el:"#div",
        data:{
        
        
            msg:"Hello Vue"
        }
    });
</script>
</html>

1.3. Detailed explanation of Vue quick start

  • Vue core object: Every Vue program starts with a Vue core object.

    let vm = new Vue({
 选项列表;
});

  • Option list
    el option: used to receive elements obtained from the page. (obtained based on common selectors).
    data option: used to save the data in the current Vue object. Variables declared in the view need to be assigned values ​​here.
    methods option: used to define methods. Methods can be called directly through the object name, and this represents the current Vue object.

  • Data binding
    gets data from the script part in the view part.
    { {variable name}}

1.4. Upgrade of Vue Quick Start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{
   
   {name}}</div>
        <div>班级：{
   
   {classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
      
      
        el:"#div",
        data:{
      
      
            name:"张三",
            classRoom:"程序员"
        },
        methods:{
      
      
            study(){
      
      
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
      
      
        vm.study();
    }

    //定义修改班级
    function update(){
      
      
        vm.classRoom = "二班";
    }
</script>
</html>

1.5, Vue summary

  • Vue is a progressive front-end framework for building user interfaces.
  • Vue programs contain two core parts: views and scripts.
  • script part
    • Vue core objects.
    • Options list
      • el: Receive the obtained element.
      • data: Save data.
      • methods: define methods.
  • view section
    • Data binding: { {variable name}}

2. Vue common instructions

2.1. Introduction to instructions

  • Command: It is a special attribute with v- prefix. Different commands have different meanings. For example v-html, v-if, v-for.

  • When using directives, they are usually written on the attributes of tags, and the values ​​can use JS expressions.

  • Common commands

Insert image description here

2.2. Text interpolation

  • v-html: Parse text into HTML code.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{
     
     {msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        
        
        el:"#div",
        data:{
        
        
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

2.3. Binding attributes

  • v-bind: Bind attribute values ​​to HTML tags.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
        
        
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        
        
        el:"#div",
        data:{
        
        
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

2.4. Conditional rendering

  • v-if: Render an element conditionally, render it when it is judged to be true, otherwise do not render it.

  • v-else: conditional rendering.

  • v-else-if: conditional rendering.

  • v-show: Display an element based on conditions. The difference is that the value of the display attribute is switched.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        
        
        el:"#div",
        data:{
        
        
            num:1,
            flag:false
        }
    });
</script>
</html>

2.5. List rendering

  • The v-for directive requires special syntax of the form site in sites, where sites is the source data array and site is an alias for iterating over the array elements.
  • v-for: List rendering, traversing the elements of the container or the properties of the object.
  • When there is 1 parameter, the value of the object is obtained.
  • When there are 2 parameters, the first is the value and the second is the key.
  • When there are 3 parameters, the third one is the index, starting from 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {
   
   {name}}
            </li>
            <li v-for="value in student">
                {
   
   {value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
      
      
        el:"#div",
        data:{
      
      
            names:["张三","李四","王五"],
            student:{
      
      
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

A second parameter can be specified:

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {
   
   { key }} : {
   
   { value }}
    </li>
  </ul>
</div>

A third parameter can be specified:

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {
   
   { index }}. {
   
   { key }} : {
   
   { value }}
    </li>
  </ul>
</div>

2.6. Event binding

  • v-on: Bind events to HTML tags.
  • Normal writing: v-on: event name = "js fragment or function name"
  • Abbreviation: @event name="js fragment or function name"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{
   
   {name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
      
      
        el:"#div",
        data:{
      
      
            name:"程序员"
        },
        methods:{
      
      
            change(){
      
      
                this.name = "张三"
            }
        }
    });
</script>
</html>

Vue.js provides event modifiers for v-on to handle DOM event details, such as event.preventDefault() or event.stopPropagation().

Vue.js calls modifiers through the directive suffix represented by a dot.

  • .stop - stop bubbling
  • .prevent - prevent the default event
  • .capture - prevent capture
  • .self - only listen for events that trigger this element
  • .once - triggers only once
  • .left - left click event
  • .right - right click event
  • .middle - middle wheel event

2.7. Form binding

  • Form binding
    v-model: Create two-way data binding on form elements.

  • Two-way data binding
    updates data, and the data in the page will also be updated.
    When the page data is updated, the data data will also be updated.

  • MVVM model (ModelViewViewModel): It is an improved version of the MVC model
    . In the front-end page, the JS object represents the Model and the page represents the View. The two are separated to the maximum extent.
    ViewModel is the bridge that associates Model and View.
    ViewModel is responsible for synchronizing the data of the Model to the View for display, and is also responsible for synchronizing the data modified by the View back to the Model.

Insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
      
      
        el:"#div",
        data:{
      
      
            username:"张三",
            age:23
        }
    });
</script>
</html>
  • When multiple checkboxes correspond to one modell, the type of model is an array, and the value of a single checkbox is of type boolean.
  • The value corresponding to radio is the value of input
  • The default model corresponding to input and textarea is a string
  • Select single selection corresponds to a string, and multi-selection corresponds to an array as well.

2.8. Summary

  • Instruction: It is a special attribute with v- prefix. Different instructions have different meanings.
  • Text interpolation
    v-html: Parse text into HTML code.
  • Bind attribute
    v-bind: Bind attribute values ​​to HTML tags.
  • Conditional rendering
    v-if: Conditionally render an element, render it when it is determined to be true, otherwise do not render it.
    v-else: conditional rendering.
    v-else-if: conditional rendering.
    v-show: Display an element based on conditions. The difference is that the value of the display attribute is switched.
  • List rendering
    v-for: List rendering, traversing the elements of the container or the properties of the object.
  • Event binding
    v-on: Bind events to HTML tags.
  • Form binding
    v-model: Create two-way data binding on form elements.

3. Basic use of Element

3.1. Introduction to Element

  • Element: Website rapid prototyping tool. It is a set of Vue-based website component libraries provided by the front-end development team of Ele.me.

  • The prerequisite for using Element is Vue.

  • Components: components that make up a web page, such as hyperlinks, buttons, pictures, tables, etc.~

  • Element official website: https://element.eleme.cn/#/zh-CN

  • Do it yourself button
    Insert image description here

  • Buttons provided by Element

Insert image description here

3.2. Quick Start with Element

  • Development steps

    1. Download the Element core library.
    2. Introduce Element style files.
    3. Introduce Vue core js files.
    4. Introduce the Element core js file.
    5. Write button labels.
    6. Load elements through Vue core objects.

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <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>
          <br>
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          <br>
          <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>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div"
    });
</script>
</html>

3.3. Basic layout

Divide the page into up to 24 parts, split freely.

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-row {
        
        
            /* 行距为20px */
            margin-bottom: 20px;
        }
        .bg-purple-dark {
        
        
            background: red;
        }
        .bg-purple {
        
        
            background: blue;
        }
        .bg-purple-light {
        
        
            background: green;
        }
        .grid-content {
        
        
            /* 边框圆润度 */
            border-radius: 4px;
            /* 行高为36px */
            min-height: 36px;
        }
      </style>
</head>
<body>
    <div id="div">
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>
          <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-col :span="8"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div"
    });
</script>
</html>

3.4. Container layout

Divide the page into a header area, sidebar area, main area, and bottom area.

Insert image description here

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
        
        
            background-color: #d18e66;
            color: #333;
            text-align: center;
            height: 100px;
        }
        .el-aside {
        
        
            background-color: #55e658;
            color: #333;
            text-align: center;
            height: 580px;
        }
        .el-main {
        
        
            background-color: #5fb1f3;
            color: #333;
            text-align: center;
            height: 520px;
        }
    </style>
</head>
<body>
    <div id="div">
        <el-container>
            <el-header>头部区域</el-header>
            <el-container>
              <el-aside width="200px">侧边栏区域</el-aside>
              <el-container>
                <el-main>主区域</el-main>
                <el-footer>底部区域</el-footer>
              </el-container>
            </el-container>
          </el-container>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div"
    });
</script>
</html>

3.5. Form component

It is composed of input boxes, drop-down lists, radio button boxes, multi-select boxes and other controls, and is used to collect, verify and submit data.

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单组件</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div",
        data:{
        
        
            ruleForm: {
        
        
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
                },
        rules: {
        
        
          name: [
            {
        
         required: true, message: '请输入活动名称', trigger: 'blur' },
            {
        
         min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            {
        
         required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            {
        
         type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            {
        
         type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            {
        
         type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            {
        
         required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            {
        
         required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
        },
        methods:{
        
        
            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>
</html>

3.6. Table component

Used to display multiple pieces of data with similar structures. The data can be edited, deleted, or otherwise customized.

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格组件</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>

              <el-table-column
                label="操作"
                width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </el-table-column>
            </el-table>
          </template>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div",
        data:{
        
        
            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 弄'
            }]
        }
    });
</script>
</html>

3.7. Top navigation bar component

Insert image description here

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顶部导航栏</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
      <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div"
    });
</script>
</html>

3.8. Side navigation bar component

Insert image description here

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边导航栏</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
      <el-col :span="6">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
</body>
<script>
    new Vue({
        
        
        el:"#div"
    });
</script>
</html>

3.9. Summary

  • Element: Website rapid prototyping tool. It is a Vue-based desktop component library prepared for developers, designers, and product managers.
  • The prerequisite for using Element is Vue.
  • Usage steps
    1. Download the Element core library.
    2.Introduce Element style files.
    3.Introduce Vue core js files.
    4. Introduce the Element core js file.
    5. Write web pages with the help of common components.
  • Commonly used components
    are the basic components of web pages, such as layout, buttons, tables, forms, etc.
    Common components do not need to be memorized, they only need to be copied and used on the Element official website.

4. Comprehensive case student list

4.1. Case effects and analysis

Insert image description here

4.2. Implementation of the head area

  • Implementation ideas

    • The head effect is realized.
    • Sidebar and main area effects are implemented.

  • Code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
      .el-header{
        
        
        background-color: #545c64;
      }
      .header-img{
        
        
        width: 100px;
        margin-top: 20px;
      }
    </style>
</head>
<body>
  <div id="div">
    <el-container>
      <!-- 头部 -->
      <el-header class="el-header">
        <el-container>
          <div>
            <el-image src="img/export.png" class="header-img"></el-image>
          </div>
          <el-menu
            :default-active="activeIndex2"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="white"
            active-text-color="#ffd04b"
            style="margin-left: auto;">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item>
          </el-menu>
        </el-container>
      </el-header>
    </el-container>
  </div>
</body>
<script>
    new Vue({
        
        
        el:"#div"
    });
</script>
</html>

4.3. Implementation of sidebar area

<!-- 侧边栏区域 -->
<el-container style="height: 580px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-menu"></i>学工部</template>
                <el-menu-item-group>
                    <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
                <el-menu-item-group>
                    <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                    <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                    <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-menu"></i>教研部</template>
                <el-menu-item-group>
                    <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
                    <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
                    <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-aside>

</el-container>

4.4. Implementation of main area

Main area and sidebar area put together

<!-- 主区域 -->
<el-container>
    <el-main>
        <b style="color: red;font-size: 20px;">学生列表</b>
        <div style="float:right">
            <el-button type="primary">添加学生</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column
                             label="操作"
                             width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
            </el-table-column>
        </el-table>
    </el-main>
</el-container>

Define data in vue

<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
          tableData:[
            {
    
    
              date:"2088-08-08",
              name:"张三",
              address:"北京市昌平区"
            },{
    
    
              date:"2088-08-08",
              name:"李四",
              address:"北京市昌平区"
            },{
    
    
              date:"2088-08-08",
              name:"王五",
              address:"北京市昌平区"
            },
          ]
        }
    });
</script>
   <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column
                             label="操作"
                             width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
            </el-table-column>
        </el-table>
    </el-main>
</el-container>

Define data in vue

<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
          tableData:[
            {
    
    
              date:"2088-08-08",
              name:"张三",
              address:"北京市昌平区"
            },{
    
    
              date:"2088-08-08",
              name:"李四",
              address:"北京市昌平区"
            },{
    
    
              date:"2088-08-08",
              name:"王五",
              address:"北京市昌平区"
            },
          ]
        }
    });
</script>

Guess you like

Origin blog.csdn.net/weixin_45417754/article/details/125113904
Recommended
Linus is the most active in "eating dog food"!
Ranking
Share good programmer web front-end array and sorting, de-duplication and random roll call
Compilation error caused by cv_bridge and python version problems error: return-statement with no value, in function returning'void*' [-fpe
魔众帮助中心系统 v3.1.0 首页切换器，界面优化
Die beim Millimeterwellenradar-Integrationstest aufgetretene Grube (Multiprozessbindung an einen UDP-Port verursacht Probleme)
How to suppress the "requires transitive directive for an automatic module" warning properly?
LeetCode-1743. Restore the Array From Adjacent Pairs-Analysis and Code (Java)
Summer 2019 Summer soft essay 7 workers
Python中Assert断言的使用语法和例子
LeetCode one question per day (2021-2-3 sliding window median)
Fairchild, the ancestor of semiconductors, the legend of the first trillion-dollar start-up
Daily
More
2024-05-20(5)
2024-05-19(0)
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)

Code World

© 2018 codetd.com