Element-UI 要怎么学？官方文档！，20 道 Java 工程师面试必问题
npm i element-ui -S
指定项目中使用 Element UI，在 index.js 中添加以下代码：`
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 在 vue 脚手架中使用 elementui
==================================================================================
官方文档 是最好的参考教程！
难得有官方中文的参考文档，上面写的已经很详细了，例子也很多，基本的开发完全没有问题！
每个组件都有 属性、事件、方法。事件和方法的区别在于：事件是去调用自己写的函数，方法相当于它给你写好的函数，你去调用；
掌握 属性、事件、方法 的用法后，所有组件的使用基本都一样。
大部分组件都是以
el-组件名开头，比如el-button是按钮；
<el-button>默认按钮</el-button>
Element UI 中所有组件的 属性(Attributes) 全部写在组件标签上；
<el-button type="primary" 属性名=属性值>默认按钮</el-button>
事件(Events) 也是直接写在对应的组件标签上，使用 Vue 中绑定事件方式
@change="aa"；
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio>
<script> export default {
name: "Radio",
data(){
return{
label:'男'
}
},
methods:{
aa(){ //定义的事件处理函数
console.log(this.label);
}
}
} </script>
组件的 方法(Methods)：
在对应的组件中加入 ref="组件别名"；
通过 this.$refs.组件别名.方法名() 调用方法；
<h1>方法的使用</h1>
<el-input v-model="username" ref="inputs"></el-input>
<el-button @click="focusInputs">focus 方法</el-button>
<el-button @click="blurInputs">blur 方法</el-button>
<script> export default {
name: "Input",
data() {
return{}
},
methods:{
// 调用 focus 方法
focusInputs(){
this.$refs.inputs.focus();
},
// 调用失去焦点方法
blurInputs(){
this.$refs.inputs.blur();
}
}
} </script>
===========================================================================
官方文档索引：https://element.eleme.cn/#/zh-CN/component/button
大部分用法是设置 button 的样式，注意 按钮组 的用法；
官方文档索引：https://element.eleme.cn/#/zh-CN/component/link
官方文档索引：https://element.eleme.cn/#/zh-CN/component/layout
Element UI 中是 24 分栏，迅速简便地创建布局。
一个布局组件由
el-row和el-col组合构成，使用属性时要区分 行属性 与 列属性；<el-row :gutter="20">指定每一栏之间的间隔，默认间隔为 0；<el-col :span="24">用来组合一栏的布局，一栏是分为 24 部分；<el-col :span="6" :offset="6">中利用offset指定分栏偏移的栏数；
官方文档索引：https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi
Container 是用于布局的容器组件，方便快速搭建页面的基本结构；
容器包含
<el-container>、<el-header>、<el-aside>、<el-main>、<el-footer>；
==========================================================================
官方文档索引：https://element.eleme.cn/#/zh-CN/component/radio
在使用 Radio 时至少加入
v-model和label两个属性；注意 Radio 按钮组；
官方文档索引：https://element.eleme.cn/#/zh-CN/component/checkbox
官方文档索引：https://element.eleme.cn/#/zh-CN/component/input
Input 为受控组件，它总会显示 Vue 绑定值。
autocomplete 是一个带 输入建议 的输入框组件，也可以自定义输入建议显示模板；
事件的使用：
<el-input v-model="username" @blur="aaa" @focus="bbb"
@clear="clears" clearable @input="ccc">
</el-input>
<script> export default {
name: "Input",
data() {
return {
resta
《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》
【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开源分享
urants: [],
state1: '',
state2: '',
name:'xiaochen',
price:0.0,
username:"",
password:"",
};
},
methods:{
aaa(){
console.log('失去焦点');
;
},
bbb(){
console.log("获取焦点");
},
ccc(value){
console.log("改变:"+value);
},
clears(){
console.log("清楚");
}
}
} </script>
方法的使用：
<h1>方法的使用</h1>
<el-input v-model="username" ref="inputs"></el-input>
<el-button @click="focusInputs">focus 方法</el-button>
<el-button @click="blurInputs">blur 方法</el-button>
<script> export default {
name: "Input",
data() {
return{}
},
methods:{
// 调用 focus 方法
focusInputs(){
this.$refs.inputs.focus();
},
// 调用失去焦点方法
blurInputs(){
this.$refs.inputs.blur();
}
}
} </script>
官方文档索引：https://element.eleme.cn/#/zh-CN/component/select
事件的使用：
<el-select v-model="cityId" @change="aaa" multiple clearable>
<el-option v-for="option in options" :label="option.name"
:value="option.id" :key="option.id">
</el-option>
</el-select>
<script> export default {
name: "Select",
data(){
return{
options:[
{id:'1',name:"研发部"},
{id:'2',name:"小卖部"},
{id:'3',name:"小米部"},
],
cityId:'',
cityName:''
}
},
methods:{
aaa(value){
console.log(value);
}
}
} </script>
方法的使用：
1.给组件通过 ref 起别名并绑定到 vue 实例中
<el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable>
....
</el-select>
2.调用方法
this.$refs.selects.focus(); //方法调用
官方文档索引：https://element.eleme.cn/#/zh-CN/component/switch
事件的使用：
<el-switch v-model="value" @change="aaa"></el-switch>
<script> export default {
name: "Switchs",
data(){
return{
value:true
}
},
methods:{
aaa(value){
console.log(value);
}
}
} </script>
方法的使用：
<el-switch v-model="value" ref="sw"></el-switch>
<el-button @click="bbb">调用方法</el-button>
<script> export default {
name: "Switchs",
data() {
return {
读者福利
由于篇幅过长，就不展示所有面试题了，感兴趣的小伙伴
更多笔记分享
还未添加个人签名 2021.11.12 加入
还未添加个人简介
评论