Vue学习日记35

快来打我* 2022-11-01 05:22 746阅读 0赞

**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