2019-02-26

前言 

---

在公司实习使用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改变时会触发的每页条数 。