磨蹭磨蹭终于算是学会了vue的基础知识，虽然组件还是没太弄明白，之后的项目应该会被血虐吧…… 这学期的项目前端打算用vue搭建，想要节省前端搭建的时间，所以照着视频学习了element-ui的一些使用 打算去学习一下typescript，买了一些前端的书，要加油呀
这个笔记不全，不清楚是csdn的问题还是我电脑的问题，没办法直接导入md文件也没办法复制全部笔记，会页面崩溃，打算分开传送也不全
总结：使用elementUI，ui的相关组件时需要注意的是，所有组件都是el-组件名开头
在elementui中所有组件的属性全部使用在组件标签上
按钮组的使用
<el-button-group> <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button> <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> </el-button-group>注意
在element ui中所有组件都是el-组件名称方式进行命名在element ui中组件的属性使用都是直接属性名=属性值方式写在对应的组件标签上primary 黄色 / success 绿色 / warning 黄色 / danger 红色 / info 灰色
<el-link type="primary" :underline="isunderline">默认链接</el-link> <el-link type="success">默认链接</el-link> <el-link type="warning" disabled>默认链接</el-link> <el-link type="danger">默认链接</el-link> <el-link type="info">默认链接</el-link>通过基础的 24 分栏，迅速渐变地创建布局
在element ui中布局组件将页面划分为多个行row，每行最多分为24栏(列)
注意
在一个布局组件中，是由行和列组合而成在使用时，要区分row属性和col属性行属性的使用
<el-row :gutter="10" tag="span"> <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col> <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col> <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col> <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col> </el-row>列属性的使用
<h2>Layout属性中使用偏移offset</h2> <el-row> <el-col :span="12" :offset="3" :push="3" xs><div style="border: 1px pink solid">占用12份</div></el-col> <el-col :span="6"><div style="border: 1px pink solid">占用6份</div></el-col> </el-row><el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平
<el-container direction="horizontal"> <!-- header --> <el-header> <div><h2>我是标题</h2></div> </el-header> <!-- asider --> <el-container> <el-aside> <div><h2>我是菜单</h2></div> </el-aside> <!-- main --> <el-main> <div> <h2>我是中心内容</h2> </div> </el-main> </el-container> <el-footer> <div> <h2>我是页脚</h2> </div> </el-footer> </el-container>创建Radio按钮
<h2>Radio组件使用</h2> <!-- 组件创建 --> <el-radio v-model="label" label="男">男</el-radio> <el-radio v-model="label" label="女">女</el-radio> <script> export default { name: "Radio", data(){ return{ label: '男' } } } </script>注意：在使用radio单选按钮时，至少加入v-model和label两个属性
Radio使用属性
<el-radio v-model="label" name="gender" disabled label="男">男</el-radio> <el-radio v-model="label" name="gender" :border="true" label="女">女</el-radio> <el-radio v-model="label" border size="small" label="女">女</el-radio> <el-radio v-model="label" border size="mini" label="女">女</el-radio> <el-radio v-model="label" border size="medium" label="test"></el-radio>Radio事件的使用
<el-radio v-model="label" @change="aa" name="gender" label="男">男</el-radio> <el-radio v-model="label" @change="aa" name="gender" label="女">女</el-radio> <!--js中的代码--> <script> export default { name: "Radio", data(){ return{ label: '男' } }, methods:{ aa(){ //定义的事件处理函数 console.log(this.label); } } } </script>总结
事件的使用也是和属性使用时一致的，都是写在对应的组件标签上事件在使用时，必须使用vue中绑定事件的方式进行使用，如@事件名=事件处理函数（绑定在vue组件中对应函数）Radio按钮组
<h2>单选按钮组</h2> <!-- 创建单选按钮组 --> <el-radio-group v-model="radio"> <el-radio :label="3">备选项3</el-radio> <el-radio :label="6">备选项6</el-radio> <el-radio :label="9">备选项9</el-radio> </el-radio-group> <!--vue中data中数据--> data() { return { radio: 3, }; } <!--或者也可以写成这种形式--> <h2>单选按钮组</h2> <!-- 创建单选按钮组 --> <el-radio-group v-model="radio"> <el-radio label="3">备选项3</el-radio> <el-radio label="6">备选项6</el-radio> <el-radio label="9">备选项9</el-radio> </el-radio-group> <!--vue中data中数据--> data() { return { radio: "3", }; },创建checkbox组件
属性使用
<el-checkbox v-model="checked" true-label="烟台">烟台</el-checkbox> <el-checkbox v-model="checked" disabled true-label="青岛">青岛</el-checkbox> <el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>事件使用
复选框组
<el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="选中且禁用" disabled></el-checkbox> </el-checkbox-group> <!--在data中写checkList:[]-->创建组件
<el-input v-model="name"></el-input> <script> export default { name: "Input", data(){ return { name: 'niko' } } } </script>组件属性
<el-input v-model="name" disabled type="textarea"></el-input> <el-input v-model="price" :maxlength="10" show-word-limit></el-input> <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" v-model="username" clearable></el-input> <el-input suffix-icon="el-icon-star-off" placeholder="请输入密码" show-password type="password" v-model="password" clearable></el-input> <script> export default { name: "Input", data(){ return { name: 'niko', price: 0.0, username:"", password: "" } } } </script>事件的使用
<el-input v-model="username" @blur="aaa" @focus="bbb"></el-input> methods:{ aaa(){ alert("失去焦点") }, bbb(){ alert("获取焦点") } }方法的使用
<h2>方法的使用</h2> <el-input v-model="username" ref="inputs"></el-input> <el-button @click="focusInputs">focus方法</el-button> <el-button @click="blurInputs">blur方法</el-button> methods:{ focusInputs(){ this.$refs.inputs.focus(); }, blurInputs(){ this.$refs.inputs.blur(); }, blurInputs(){ this.$refs.inputs.blur(); }, }总结
在使用组件的方法时，需要在对应的组件中加入ref = "组件别名"在调用方法时直接使用this.$refs.组件别名.方法名()总结
在使用组件的方法时需要在对应的组件中加入ref="组件别名"在调用方法时直接使用this.$refs.组件名.方法名 注意：在elementUI中所有组件都存在 属性 事件 方法
属性：直接卸载对应组件标签上 使用方式：属性名=属性值方式
事件：直接使用vue绑定事件方式卸载对应的组件标签上 使用方式@事件名=vue事件处理函数
方法：1. 在对应组件标签上使用ref=组件别名 2.通过使用this.$refs.组件别名.方法名进行调用
组件创建
<!-- 数据写死在页面上 下拉列表中必须存在option的value属性值 要求select中必须绑定v-model --> <el-select v-model="cityname"> <el-option value="北京">北京</el-option> <el-option value="天津">天津</el-option> </el-select> <!--动态获取数据--> <el-select> <el-option v-for="item in options" :v-key="item.id" :value="item.name" :label="item.value"></el-option> </el-select> <script> export default { name:"Select", data (){ return { options: [ {id: "1", name:"研发室"}, {id: "2", name:"小卖部"}, {id: "3", name:"小米部"}, ] } } } </script> <!--获取下拉列表中选中数据--> <el-select v-model="cityid"> <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.name" ></el-option> </el-select> <script> export default { name:"Select", data (){ return { options: [ {id: "1", name:"研发室"}, {id: "2", name:"小卖部"}, {id: "3", name:"小米部"}, ], cityid: "" } } } </script>属性使用
<el-select v-model="cityid" multiple clearable> .... </el-select>事件的使用
<el-select v-model="cityid" value-key="id" @change="aaa" multiple clearable> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" ></el-option> </el-select> <script> export default { name:"Select", data (){ return { options: [ {id: "1", name:"研发室"}, {id: "2", name:"小卖部"}, {id: "3", name:"小米部"}, ], cityid: "", cityname: "", city:'' } }, methods:{ aaa(value){ console.log(value) } } } </script>方法的使用
<!-- 给组件通过ref起别名并绑定到vue实例中 调用方法 --> <el-select v-model="cityid" value-key="id" @change="aaa" multiple clearable ref="select"> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" ></el-option> </el-select> <el-button @click="bbb">获取焦点</el-button> <script> export default { name:"Select", data (){ return { options: [ {id: "1", name:"研发室"}, {id: "2", name:"小卖部"}, {id: "3", name:"小米部"}, ], cityid: "", cityname: "", city:'' } }, methods:{ aaa(value){ console.log(value) }, bbb(){ this.$refs.select.focus() } } } </script>组件创建
<el-date-picker v-model="createDate"></el-date-picker>属性
<el-date-picker v-model="createDate" :editable="false" :clearable="false" type="datetimerange" start-placeholde="开始时间" end-placeholde="结束时间"> </el-date-picker> <script> export default { name:"DatePickers", data(){ return { createDate:'' } } } </script>Picker Options & Shortcuts
Shortcuts 用来增加日期组件的快捷面板Picker Option 用来对日期控件做自定义配置