Element-UI 要怎么学？官方文档！
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 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》开源 " 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>
[](()Basic 组件
===========================================================================
[](()Button 按钮
官方文档索引：[https://element.eleme.cn/#/zh-CN/component/button](()
大部分用法是设置 button 的样式，注意 按钮组 的用法；
[](()Link 文字链接
官方文档索引：[https://element.eleme.cn/#/zh-CN/component/link](()
[](()Layout 布局
官方文档索引：[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指定分栏偏移的栏数；
[](()Container 布局容器
官方文档索引：[https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi](()
Container 是用于布局的容器组件，方便快速搭建页面的基本结构；
容器包含
<el-container>、<el-header>、<el-aside>、<el-main>、<el-footer>；
[](()Form 组件
==========================================================================
[](()Radio 单选框
官方文档索引：[https://element.eleme.cn/#/zh-CN/component/radio](()
在使用 Radio 时至少加入
v-model和label两个属性；注意 Radio 按钮组；
[](()Checkbox 多选框
官方文档索引：[https://element.eleme.cn/#/zh-CN/component/checkbox](()
[](()Input 输入框
官方文档索引：[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 {
restaurants: [],
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-m Java 开源项目【ali1024.coding.net/public/P7/Java/git】 odel="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>
[](()Select 选择器
官方文档索引：[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:''
}
},
总结
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。
很多人担心学了容易忘，这里教你一个方法，那就是重复学习。
打个比方，假如你正在学习 spring 注解，突然发现了一个注解 @Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到 @Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。
从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
人的本性就是容易遗忘，只有不断加深印象、重复学习才能真正掌握，所以很多书我都是推荐大家多看几遍。哪有那么多天才，他只是比你多看了几遍书。
还未添加个人签名 2022.04.13 加入
还未添加个人简介
评论