Vue quick start

Posted by erick_w on Wed, 05 Jan 2022 18:14:11 +0100

1. Vue quick start

1.1 introduction to Vue

  • Vue is a progressive front-end framework for building user interfaces.
  • Only focus on layers, and it is very easy to learn. It can also be easily integrated with other libraries or existing projects.
  • The binding of response data and combined view components are realized through the simplest API as possible.
  • characteristic
    Easy to use: get started quickly on the basis of HTML CSS JavaScript.
    Flexible: simple and compact core, progressive technology stack, enough to cope with applications of any scale.
    Performance: 20kbmin+gzip running size, ultrafast virtual DOM, the most worry free optimization.

1.2. Quick start of Vue

  • Development steps
  1. Download and import Vue JS file.
  2. Write an introductory program.
    View: responsible for page rendering, mainly composed of HTML+CSS.
    Script: responsible for business data Model and data processing logic.

  • code implementation

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

1.3 detailed introduction to Vue quick start

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

    let vm = new Vue({
 List of options;
});

  • List of options
    el option: used to receive and get the elements in the page. (obtained from common selectors).
    Data option: used to save the data in the current Vue object. Variables declared in the view need to be assigned here.
    Methods option: used to define methods. Method can be called directly through the object name, and this represents the current Vue object.

  • Data binding
    Get the data of 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>Quick start upgrade</title>
</head>
<body>
    <!-- view -->
    <div id="div">
        <div>full name:{{name}}</div>
        <div>Class:{{classRoom}}</div>
        <button onclick="hi()">say hello</button>
        <button onclick="update()">Modify class</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // script
    let vm = new Vue({
        el:"#div",
        data:{
            name:"Zhang San",
            classRoom:"Dark horse programmer"
        },
        methods:{
            study(){
                alert(this.name + "Is" + this.classRoom + "study hard!");
            }
        }
    });

    //Define greeting method
    function hi(){
        vm.study();
    }

    //Define and modify class
    function update(){
        vm.classRoom = "Intelligence Podcast";
    }
</script>
</html>

1.5 Vue summary

  • Vue is a progressive front-end framework for building user interfaces.
  • Vue's program includes two core parts: view and script.
  • Script part
    • Vue core object.
    • List of options
      • el: receive the acquired element.
      • Data: save data.
      • Methods: define methods.
  • View part
    • Data binding: {variable name}}

2. Vue common instructions

2.1 instruction introduction

  • Instruction: it is a special attribute with v-prefix. Different instructions have different meanings. For example, v-html, v-if, v-for.

  • When using the instruction, it is usually written on the attribute of the tag, and the value can use JS expression.

  • Common instructions

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>Text interpolation</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 properties

  • v-bind: bind attribute values for HTML tags.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Binding properties</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">use Baidu Search</a>
        <br>
        <a :href="url">use Baidu Search</a>
        <br>
        <div :class="cls">I am 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: conditionally render an element. Render when it is determined to be true, otherwise it will not be rendered.

  • v-else: conditional rendering.

  • v-else-if: conditional rendering.

  • v-show: displays an element according to 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>conditional rendering </title>
</head>
<body>
    <div id="div">
        <!-- judge num The remainder of 3 is 0 div1  The remainder is 1 div2  The remainder is 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

  • v-for: list rendering, traversing the attributes of the elements or objects of the container.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List rendering</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:["Zhang San","Li Si","Wang Wu"],
            student:{
                name:"Zhang San",
                age:23
            }
        }
    });
</script>
</html>

2.6. Event binding

  • v-on: binding events for HTML tags.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event binding</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">change div Content of</button>
        <button v-on:dblclick="change()">change div Content of</button>

        <button @click="change()">change div Content of</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"Dark horse programmer"
        },
        methods:{
            change(){
                this.name = "Intelligence Podcast"
            }
        }
    });
</script>
</html>

2.7 form binding

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

  • Bidirectional data binding
    When the data is updated, the data in the page will also be updated.
    When the page data is updated, the data data will also be updated.

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form binding</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            full name:<input type="text" name="username" v-model="username">
            <br>
            Age:<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"Zhang San",
            age:23
        }
    });
</script>
</html>

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.
  • Binding properties
    v-bind: bind attribute values for HTML tags.
  • conditional rendering
    v-if: conditionally render an element. Render when it is determined to be true, otherwise it will not be rendered.
    v-else: conditional rendering.
    v-else-if: conditional rendering.
    v-show: displays an element according to conditions. The difference is that the value of the display attribute is switched.
  • List rendering
    v-for: list rendering, traversing the attributes of the elements or objects of the container.
  • Event binding
    v-on: binding events for HTML tags.
  • Form binding
    v-model: creates a two-way data binding on form elements.

3. Element basic usage

3.1 introduction to Element

  • Element: website rapid prototyping tool. Is it hungry? A set of Vue based website component library provided by the front-end development team of the company.

  • Vue is required before using Element.

  • Components: components that make up a web page, such as hyperlinks, buttons, pictures, tables, and so on~

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

  • Self completion button

  • Button provided by Element

3.2. Element quick start

  • Development steps

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

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>quick get start</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>I'm the button</button>
    <br>
    <div id="div">
        <el-row>
            <el-button>Default button</el-button>
            <el-button type="primary">Main button</el-button>
            <el-button type="success">Success button</el-button>
            <el-button type="info">Information button</el-button>
            <el-button type="warning">Warning button</el-button>
            <el-button type="danger">Danger button</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button plain>Plain button</el-button>
            <el-button type="primary" plain>Main button</el-button>
            <el-button type="success" plain>Success button</el-button>
            <el-button type="info" plain>Information button</el-button>
            <el-button type="warning" plain>Warning button</el-button>
            <el-button type="danger" plain>Danger button</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button round>Fillet button</el-button>
            <el-button type="primary" round>Main button</el-button>
            <el-button type="success" round>Success button</el-button>
            <el-button type="info" round>Information button</el-button>
            <el-button type="warning" round>Warning button</el-button>
            <el-button type="danger" round>Danger button</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 foundation layout

Divide the page into up to 24 parts and cut them freely.

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic layout</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 {
            /* Line spacing is 20px */
            margin-bottom: 20px;
        }
        .bg-purple-dark {
            background: red;
        }
        .bg-purple {
            background: blue;
        }
        .bg-purple-light {
            background: green;
        }
        .grid-content {
            /* Frame roundness */
            border-radius: 4px;
            /* The row height is 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 header area, sidebar area, main area and bottom area.

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container layout</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>Head area</el-header>
            <el-container>
              <el-aside width="200px">Sidebar area</el-aside>
              <el-container>
                <el-main>Main area</el-main>
                <el-footer>Bottom area</el-footer>
              </el-container>
            </el-container>
          </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

3.5 form components

It is composed of input box, drop-down list, radio box, multi box and other controls to collect, verify and submit data.

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form component</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="Activity name" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="zone of action" prop="region">
              <el-select v-model="ruleForm.region" placeholder="Please select an active area">
                <el-option label="Region I" value="shanghai"></el-option>
                <el-option label="Region II" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Activity time" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="Select date" 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="Select time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="Instant delivery" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="Activity nature" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="delicious food/Restaurant online activities" name="type"></el-checkbox>
                <el-checkbox label="Earth pushing activity" name="type"></el-checkbox>
                <el-checkbox label="Offline theme activities" name="type"></el-checkbox>
                <el-checkbox label="Pure brand exposure" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="Special resources" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="Online brand sponsor"></el-radio>
                <el-radio label="Offline venues are free"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="Activity form" 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')">Create now</el-button>
              <el-button @click="resetForm('ruleForm')">Reset</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: 'Please enter the activity name', trigger: 'blur' },
            { min: 3, max: 5, message: 'The length is between 3 and 5 characters', trigger: 'blur' }
          ],
          region: [
            { required: true, message: 'Please select an active area', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: 'Please select a date', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: 'Please select a time', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: 'Please select at least one activity property', trigger: 'change' }
          ],
          resource: [
            { required: true, message: 'Please select an active resource', trigger: 'change' }
          ],
          desc: [
            { required: true, message: 'Please fill in the activity form', 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 components

It is used to display multiple pieces of data with similar structure. You can edit, delete or other user-defined operations on the data.

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table component</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="date"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="full name"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="address">
              </el-table-column>

              <el-table-column
                label="operation"
                width="180">
                <el-button type="warning">edit</el-button>
                <el-button type="danger">delete</el-button>
              </el-table-column>
            </el-table>
          </template>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            tableData: [{
                date: '2016-05-02',
                name: 'Wang Xiaohu',
                address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
            }, {
                date: '2016-05-04',
                name: 'Wang Xiaohu',
                address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
            }, {
                date: '2016-05-01',
                name: 'Wang Xiaohu',
                address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
            }, {
                date: '2016-05-03',
                name: 'Wang Xiaohu',
                address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
            }]
        }
    });
</script>
</html>

3.7 top navigation bar assembly

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top navigation bar</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">Processing center</el-menu-item>
      <el-submenu index="2">
        <template slot="title">My workbench</template>
        <el-menu-item index="2-1">Option 1</el-menu-item>
        <el-menu-item index="2-2">Option 2</el-menu-item>
        <el-menu-item index="2-3">Option 3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="2-4-1">Option 1</el-menu-item>
          <el-menu-item index="2-4-2">Option 2</el-menu-item>
          <el-menu-item index="2-4-3">Option 3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>Message center</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele. me" target="_ Blank "> order management < / a > < / El menu item >
    </el-menu>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

3.8 side navigation bar assembly

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side navigation bar</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>Navigation one</span>
            </template>
            <el-menu-item-group>
              <template slot="title">Group I</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">Option 4</template>
              <el-menu-item index="1-4-1">Option 1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">Navigation II</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">Navigation III</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">Navigation IV</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 set of Vue based desktop component library for developers, designers and product managers.
  • Vue is required before using Element.
  • Use steps
    1. Download the Element core library.
    2. Import Element style file.
    3. Import Vue core js file.
    4. Import the Element core js file.
    5. Write web pages with common components.
  • Common components
    The basic components of a web page are layout, buttons, tables, forms, etc~~~
    Common components do not need to be remembered, but only need to be copied and used in the Element official website.

4. Comprehensive case student list

4.1 case effect and analysis

4.2 realization of head area

  • Realization idea

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

  • code implementation

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student list</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>
      <!-- head -->
      <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">Processing center</el-menu-item>
            <el-submenu index="2">
              <template slot="title">My workbench</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="Student list.html" target="_self">home page</a></el-menu-item>
          </el-menu>
        </el-container>
      </el-header>
    </el-container>
  </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

4.3 realization of sidebar area

<!-- 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>School Work Department</template>
                <el-menu-item-group>
                    <el-menu-item index="1-1"><i class="el-icon-help"></i>Student management in school</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-help"></i>Student upgrade/Repeat a grade</el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-help"></i>Student employment</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>Consulting Department</template>
                <el-menu-item-group>
                    <el-menu-item index="2-1"><i class="el-icon-help"></i>Intentional student management</el-menu-item>
                    <el-menu-item index="2-2"><i class="el-icon-help"></i>Management of unregistered students</el-menu-item>
                    <el-menu-item index="2-3"><i class="el-icon-help"></i>Registered student management</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-menu"></i>Teaching and Research Department</template>
                <el-menu-item-group>
                    <el-menu-item index="3-1"><i class="el-icon-help"></i>Existing course management</el-menu-item>
                    <el-menu-item index="3-2"><i class="el-icon-help"></i>Developing course management</el-menu-item>
                    <el-menu-item index="3-3"><i class="el-icon-help"></i>New technology curriculum management</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-aside>

</el-container>

4.4 realization of main area

The main area and the sidebar area are placed together

<!-- Main area -->
<el-container>
    <el-main>
        <b style="color: red;font-size: 20px;">Student list</b>
        <div style="float:right">
            <el-button type="primary">Add student</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="date" label="date" width="140">
            </el-table-column>
            <el-table-column prop="name" label="full name" width="120">
            </el-table-column>
            <el-table-column prop="address" label="address">
            </el-table-column>
            <el-table-column
                             label="operation"
                             width="180">
                <el-button type="warning">edit</el-button>
                <el-button type="danger">delete</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:"Zhang San",
              address:"Changping District, Beijing"
            },{
              date:"2088-08-08",
              name:"Li Si",
              address:"Changping District, Beijing"
            },{
              date:"2088-08-08",
              name:"Wang Wu",
              address:"Changping District, Beijing"
            },
          ]
        }
    });
</script>

Hot Topics

©2025 Programmer Think