前言
在公司实习使用Vue搭配着ElementUI完成前端的设计内容,受益颇多,将工作中常用的知识点在此处做下总结。
一,sass语言使用
刚进入团队,就开始对sass的进行使用学习,例如:
1.定义变量,方便后期统一维护和修改;
$borderStytle:1px solid #ecf0f6;
.home{
border:$borderStytle;
}
2,嵌套使得层级更鲜明,清晰,如:
3,导入其他的sass文件 ,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以'_'开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin".
4,扩展和继承可以通过@extend来实现代码的组合生明,简洁代码;
sass中可用混合(mixin)定义一些代码,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。;
4,特殊变量
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
二,Form表单
1,阻止输入框回车刷新刷新问题:在W3C标准的说法是:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 标签上添加@submit.native.prevent。
2,在这个form表单中,要格外注意:modle和:rules还有ref后面和你自定义的是否一样,prop v-modle后的值要一致这两个地方对应着JS中定义好的名称
写自定义验证规则的时候是以callback(new Error(''));来抛出错误的,要是没有要提示的东西的话要写上 callback();
三,Pagination 分页
设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev表示上一页,next为下一页,pager表示页码列表,还提供了jumper和total,size。jumper表示跳页元素,total表示总条目数,size用于设置每页显示的页码数量。同时使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组,数组元素为展示的选择每页显示个数的选项,size-change表示pageSize改变时会触发的每页条数 。
网友评论