Vue整合ElementUI，组件使用教程，适合新手，BAT大厂面试题整理

容器中包含的子元素

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

嵌套容器

我是标题

我是菜单

我是内容

我是底部

容器的属性

• 注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平

---

五. Radio 单选框

===============================================================================

• 在一组备选项中进行单选

创建一个单选按钮

男

女

• 此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的value / v-model和label属性进行使用。

radio组件的使用

男

女

Radio按钮属性的使用

男

女

• 总结：属性的使用还是直接写在对应的组件标签上以 属性名 = 属性值 的方式使用。

Radio事件的使用

1. 事件的使用也和属性的使用是一致的都是写在对应的组件标签上

2. 事件在使用时必须使用vue中绑定事件方式进行使用如@事件名=事件处理函数(绑定在vue组组件中对应函数)

<el-radio v-model=“label” @change=“aa” name=“sex” label=“男”>男

<el-radio v-model=“label” @change=“aa” name=“sex” label=“女”>女

Radio单选按钮组的使用

备选项3

备选项6

备选项9

---

六. Checkbox 多选框

==================================================================================

• 一组备选项中进行多选

创建Checkbox

北京

• 使用<el-checkbox>标签去构建我们的checkbox日后我们checkbox的值可以通过v-model进行绑定(true|false)。

属性和事件的使用

<el-checkbox v-model=“checked” @change=“aa” :true-label=1>北京

<el-checkbox v-model=“checked” @change=“aa” :true-label=2>洛阳

<el-checkbox v-model=“checked” @change=“aa” :true-label=3>上海

<el-checkbox v-model=“checked” @change=“aa” :true-label=4>曹县

复选框组的使用

• 适用于多个复选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<el-checkbox-group v-model=“checkList” @change=“aa” :max=“2”>

北京

洛阳

上海

曹县

---

七. Input 输入框

===============================================================================

• 通过鼠标或键盘输入字符

创建

Input属性的使用

事件的使用

<el-input v-model=“userSex” @input=“ccc”>

方法的使用

<el-button @click=“focusInputs”>focus方法

总结：

• 在使用组件的方法时需要在对应的组件中加入 ref="组件别名"

• 在调用方法时直接使用 this.$refs.组件别名.方法名()

注意：在elementui中所有组件 都存在 属性和方法

属性：直接写在对应的组件标签上 使用方式：属性名=属性值 方式

事件：直接使用vue绑定事件方式写在对应的组件标签上 使用方式：@事件名=vue中事件处理函数

方法：1.在对应组件标签上使用 ref=组件别名 2.通过使用this.$refs.组件别名.方法名() 进行调用。

---

八. Select选择器组件

=================================================================================

• 当选项过多时，使用下拉菜单展示并选择内容。

选择器组件的使用

1. 数据写死在页面上

北京

上海

澳门

曹县

• 注意：要求下拉列表中必须存在option的value属性值，select中必须使用v-modek进行数据绑定

2. 如何动态获取数据