Vue学习日记35

1.error ‘_’ is defined but never used no-unused-vars
解析：编辑package.json如下：

"rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
  }

2.el-dialog
解析：Dialog分为两个部分：body和footer，footer需要具名为footer的slot。

3.before-close
解析：before-close仅当用户通过点击关闭图标或遮罩关闭Dialog时起效。如果在footer具名slot里添加了用于关闭Dialog的按钮，那么可以在按钮的点击回调函数里加入before-close的相关逻辑。

4.core-js
解析：core-js是babel-polyfill的底层依赖，通过各种奇技淫巧，用ES3实现了大部分的ES2017原生标准库，同时还要严格遵循规范。

5.:visible.sync原理
解析：它是一个语法糖，用于子组件修改父组件中的值，实现双向绑定功能。

6.el-button
解析：
[1]Dialog的内容是懒渲染的，即在第一次被打开之前，传入的默认slot不会被渲染到DOM上。因此，如果需要执行DOM操作，或通过ref获取相应组件，请在open事件回调中进行。
[2]如果visible属性绑定的变量位于Vuex的store内，那么.sync不会正常工作。此时需要去除.sync修饰符，同时监听Dialog的open和close事件，在事件回调中执行Vuex中对应的mutation更新visible属性绑定的变量的值。

7.Dialog属性
解析：

[1]visible：是否显示Dialog，支持.sync修饰符
[2]title：Dialog的标题，也可通过具名slot传入
[3]width：Dialog的宽度
[4]fullscreen：是否为全屏Dialog
[5]top：Dialog CSS中的margin-top值
[6]modal：是否需要遮罩层
[7]modal-append-to-body：遮罩层是否插入至body元素上，若为false，则遮罩层会插入至Dialog的父元素上
[8]append-to-body：Dialog自身是否插入至body元素上。嵌套的Dialog必须指定该属性并赋值为true
[9]lock-scroll：是否在Dialog出现时将body滚动锁定
[10]custom-class：Dialog的自定义类名
[11]close-on-click-modal：是否可以通过点击modal关闭Dialog
[12]close-on-press-escape：是否可以通过按下ESC关闭
[13]Dialogshow-close：是否显示关闭按钮
[14]before-close：关闭前的回调，会暂停Dialog的关闭：
[15]center：是否对头部和底部采用居中布局
[16]destroy-on-close：关闭时销毁Dialog中的元素

8.Dialog Slot
解析：
[1]—：Dialog的内容
[2]title：Dialog标题区的内容
[3]footer：Dialog按钮操作区的内容

9.Dialog事件
[1]open：Dialog打开的回调
[2]opened：Dialog打开动画结束时的回调
[3]close：Dialog关闭的回调
[4]closed：Dialog关闭动画结束时的回调

10.ElementUI组件
解析：
[1]基本组件：Layout布局、Container布局容器、Color色彩、Typography字体、Border边框、Icon图标、Button按钮、Link文字链接
[2]表单组件：Radio单选框、Checkbox多选框、Input输入框、InputNumber计数器、Select选择器、Cascader级联选择器、Switch开关、Slider滑块、TimePicker时间选择器、DatePicker日期选择器、DateTimePicker日期时间选择器、Upload上传、
Rate评分、ColorPicker颜色选择器、Transfer穿梭框、Form表单
[3]数据组件：Table表格、Tag标签、Progress进度条、Tree树形控件、Pagination分页、Badge标记、Avatar头像
[4]通知组件：Alert警告、Loading加载、Message消息提示、MessageBox弹框、Notification通知
[5]Navigation组件：NavMenu导航菜单、Tabs标签页、Breadcrumb面包屑、PageHeader页头、Dropdown下拉菜单、Steps步骤条
[6]其它组件：Dialog对话框、Tooltip文字提示、Popover弹出框、Popconfirm气泡确认框、Card卡片、Carousel走马灯、Collapse折叠面板、Timeline时间线、Divider分割线、Calendar日历、Image图片、Backtop回到顶部、InfiniteScroll无限滚动、Drawer抽屉

11.<router-view/>
解析：路由匹配到的组件将渲染在这里。

12.创建和挂载根实例
解析：

const app = new Vue({
  router
}).$mount('#app')

13.组件内的守卫
解析：

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被confirm前调用
    // 不能获取组件实例this
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，
    // 由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例this
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例this
  }
}

14.完整的导航解析流程
解析：

[1]导航被触发
[2]在失活的组件里调用beforeRouteLeave守卫
[3]调用全局的beforeEach守卫
[4]在重用的组件里调用beforeRouteUpdate守卫(2.2+)
[5]在路由配置里调用beforeEnter
[6]解析异步路由组件
[7]在被激活的组件里调用beforeRouteEnter
[8]调用全局的beforeResolve守卫(2.5+)
[9]导航被确认
[10]调用全局的afterEach钩子
[11]触发DOM更新
[12]调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入

15.Navigation Failure Type
解析：
[1]redirected：在导航守卫中调用了next(newLocation)重定向到了其它地方
[2]aborted：在导航守卫中调用了next(false)中断了本次导航
[3]cancelled：在当前导航还没有完成之前又有了一个新的导航。比如在等待导航守卫的过程中又调用了router.push
[4]duplicated：导航被阻止，因为我们已经在目标位置了

16.<router-link> Props
解析：to、replace、append、tag、active-class、exact、event、exact-active-class、aria-current-value

17.Router构建选项
解析：routes、mode、base、linkActiveClass、linkExactActiveClass、scrollBehavior、parseQuery/stringifyQuery、fallback

18.Router实例属性
解析：router.app、router.mode、router.currentRoute、router.START_LOCATION

19.Router实例方法
解析：router.beforeEach、router.beforeResolve、router.afterEach、router.push、router.replace、router.go、router.back、router.forward、router.getMatchedComponents、router.resolve、router.addRoutes、router.addRoute、router.addRoute、router.getRoutes、router.onReady、router.onError

20.setTimeout()方法
解析：setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

21.Select属性
解析：

[1]value/v-model：绑定值
[2]multiple：是否多选
[3]disabled：是否禁用
[4]value-key：作为value唯一标识的键名，绑定值为对象类型时必填
[5]size：输入框尺寸
[6]clearable：是否可以清空选项
[7]collapse-tags：多选时是否将选中值按文字的形式展示
[8]multiple-limit：多选时用户最多可以选择的项目数，为0则不限制
[9]name：select input的name属性
[10]autocomplete：select input的autocomplete属性
[11]auto-complete：下个主版本弃用
[12]placeholder：占位符
[13]filterable：是否可搜索
[14]allow-create：是否允许用户创建新条目，需配合filterable使用
[15]filter-method：自定义搜索方法
[16]remote：是否为远程搜索
[17]remote-method：远程搜索方法
[18]loading：是否正在从远程获取数据
[19]loading-text：远程加载时显示的文字
[20]no-match-text：搜索条件无匹配时显示的文字，也可以使用slot="empty"设置
[21]no-data-text：选项为空时显示的文字，也可以使用slot="empty"设置
[22]popper-class：Select下拉框的类名
[23]reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
[24]default-first-option：在输入框按下回车，选择第一个匹配项。需配合filterable或remote使用
[25]popper-append-to-body：是否将弹出框插入至body元素。在弹出框的定位出现问题时，可将该属性设置为false
[26]automatic-dropdown：对于不可搜索的Select，是否在输入框获得焦点后自动弹出选项菜单

22.Select事件
解析：
[1]change：选中值发生变化时触发
[2]visible-change：下拉框出现/隐藏时触发
[3]remove-tag：多选模式下移除tag时触发
[4]clear：可清空的单选模式下用户点击清空按钮时触发
[5]blur：当input失去焦点时触发
[6]focus：当input获得焦点时触发

23.Select Slots
解析：
[1]—：Option组件列表
[2]prefix：Select组件头部内容
[3]empty：无选项时的列表

24.Select Option Group属性
解析：
[1]label：分组的组名
[2]disabled：是否将该分组下所有选项置为禁用

25.Select Option属性
解析：
[1]value：选项的值
[2]label：选项的标签，若不设置则默认与value相同
[3]disabled：是否禁用该选项

参考文献：
[1]Vue Router API参考：https://router.vuejs.org/zh/api/
[2]Select选择器：https://element.eleme.io/#/zh-CN/component/select