gogoWebsite

ElementUI Overview

ElementUI: It is a Vue framework-based website component library provided by Ele.me's previous development team, which is used to quickly build web pages.

Components: Components that make up web pages

• For example: hyperlinks, buttons, pictures, tables, etc.

ElementUI Quick Start:

1. Introduce CSS and JS files for Element

   • Since ElementUI is a website component library based on the Vue framework, when we introduce CSS files and JS files in Element, we must first introduce the JS files of the Vue framework.

2. Create Vue core object

   <script>
       new Vue({
           el: "#app", //Set the mount location of the Vue core object, which means mounting to the tag with our id attribute as the app
       })
   </script>
   

3. Copy the ElementUI component code on the official website:

ElementUI layout:

There are two layout methods in ElementUI:

1. Layout layout: Create layouts quickly and easily through the 24-part columns of the component's basic components

   • el-row tag: represents a line
   • el-col tag: represents a cell
     • There is a "span" attribute in el-col to set how many columns this cell occupies

2. container layout container: component container for layout, convenient and fast basic content of page construction

   • In fact, it is to find a written layout from the official ElementUI component library, and then we can use it directly to modify it and use it.

ElementUI_ Table of Common Components

The table tag is: <el-table> < /el-table>

One column in the table is: < el-table-column> < el-table-column>

• Properties in el-table tags
  1. prop: The attribute name corresponding to the column content
  2. align: How column contents are aligned
• We can also add check boxes in our table. If we add a check box to the table, we can write a @selection-change event to the el-table tag. When the corresponding check box in our table is selected, the corresponding event will be triggered

Replenish:

When we copy the component source code in the ElementUI component library, we will find that there is a: & : last-child , which is a pseudo-class selector

Supplement 2:

After downloading the ElementUI library using the npm instruction, you must import the js and css files of the corresponding ElementUI library in it.

• Just like downloading vue and vue-router, you need to import the corresponding js file after downloading
• Our vue is a js framework, so it is actually a js file. Our elementui is a vue-based component library, which is a js file plus a css file.