ElementPlus components
el-card: A card container component, often used to hold some information or data display. The main parameters:
body-style: Add styles to the card body, and style parameters can be passed in the form of objects.
el-form: A form component for quickly creating forms. The main parameters:
-
model: The data object bound to the form must be a data object in the Vue instance. -
rules: Form validation rule object, used for validation of form items, must be an object. -
ref: The reference of the form, the form component object can be accessed through $refs. -
label-position: The position of the label of the form item, the optional values are 'right', 'left', 'top'. -
label-width: The width of the form item label, you can set a specific value or percentage.
el-input: An input box component, used to obtain the information entered by the user. The main parameters:
-
v-model: Bind the value of the input box. -
type: The type of input box, commonly used values are 'text', 'password', 'number', etc. -
placeholder: The prompt text of the input box.
el-button: A button component used to trigger events. The main parameters:
-
type: Button type, optional values are 'primary', 'success', 'warning', 'danger', 'info'. -
disabled: Whether to disable the button, can be controlled by the attribute in data. -
@click: Event triggered when the button is clicked.
el-link: A link component, used to jump to the page. The main parameters:
href: The jump address of the link.
Component Properties
computed: computed is a computed attribute of Vue.js, which calculates a new value based on existing data. Using the computed attribute in the component can easily remove the calculation logic from the template, and the calculation result can be cached to improve performance. The computed attribute is written as follows:
computed: {
计算属性名称 () {
// 计算逻辑
return 计算结果
}
}
data: data is a function used in Vue.js to declare the data in the component. Using the data attribute in the component can easily manage the internal state of the component. The data attribute is written as follows:
data () {
return {
数据名称: 初始值
}
}
//下面是登录注册表单的一个例子
data () {
return {
registerForm: {
username: '',
password: ''
},
registerFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
verifyCodeBtnText: '获取验证码',
isDisabled: true
}
}
methods: methods is an object in Vue.js used to declare methods in components. Using the methods attribute in the component, you can easily manage the methods in the component. The methods attribute is written as follows:
methods: {
方法名称 () {
// 方法逻辑
}
}
//例子
methods: {
register () {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 注册逻辑
} else {
return false
}
})
},
getVerifyCode () {
// 获取验证码逻辑
}
}
ref: ref is an attribute used in Vue.js to obtain component references. Using the ref attribute in the component, you can easily get the component instance, call the method in the component or access the data in the component. The ref attribute is written as follows:
<组件 ref="引用名称"></组件>
//例子
<el-form ref="registerForm" :model="registerForm" :rules="registerFormRules">
v-model: v-model is a directive for two-way data binding in Vue.js. Using the v-model directive in the component, you can easily bind the form control with the data in the component. The v-model directive is written as follows:
<表单控件 v-model="数据名称"></表单
prop: prop is a way in Vue.js to pass data from parent components to child components. The parent component can pass data to the child component through the prop attribute, and use the data in the child component. In this component, prop is used to declare the validation rules of the corresponding form items in el-form-item, for example:
<el-form-item label="密码" prop="password">
<el-input v-model="registerForm.password" type="password"></el-input>
</el-form-item>
//在父组件中定义了如下验证规则，在子组件中使用prop属性，可以将该规则应用到el-form-item中，从而对密码进行验证。
registerFormRules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' }
]
}
scoped: scoped is a way to limit the scope of styles in Vue.js. Using the scoped attribute in a component ensures that styles apply only to the current component, without affecting other components or global styles. For example:
<style scoped>
.register-form {
margin: 20px;
}
</style>
//scoped属性也可以带有参数，参数值可以是任何字符串，用于区分不同的样式作用域。例如：
<style scoped="login">
.login-form {
margin: 20px;
}
</style>
css style
box model
The box model means that in a web page, each element is regarded as a box, which consists of a content area, inner margins, borders, and outer margins. We can use the width, height, padding, margin and other properties in CSS to control the size and spacing of the box model.
Common properties:
- width: the width of the box.
- height: the height of the box.
- padding: the inner margin of the box.
- margin: the outer margin of the box.
Flexbox
Flexbox is a CSS layout pattern that uses display: flex and a series of properties to control how elements are arranged. Through flexbox, we can easily achieve horizontal and vertical centering, equal height layout and other effects.
Common properties:
- display: flex: Set a container element to flex layout.
- justify-content: Defines the horizontal alignment of child elements within the flex container.
- align-items: defines the vertical alignment of child elements within the flex container.
- flex-direction: defines the arrangement direction of the child elements in the flex container.
Background picture
We can use the background and background-size properties to set the background image of an element and its size.
Common properties:
- background: Set the background color or background image of the element.
- background-size: Set the size of the background image.
Opacity
By setting the opacity property of the element, we can control the opacity of the element. The value of this property is between 0 and 1, where 0 is completely transparent and 1 is completely opaque.
Common properties:
- opacity: Sets the opacity of the element.
text style
We can use the text-align attribute to set the alignment of the text, including left (default, left-aligned), center (center-aligned), right (right-aligned), etc.
Common properties:
- text-align: Set the alignment of the text.
box shadow
Use the box-shadow property to add a shadow effect to the box to make it more three-dimensional.
Common properties:
- box-shadow: Set the shadow effect of the box, including the size, color, position, etc. of the shadow.
(to be continued)
