Vue零碎知识点

最新推荐文章于 2022-06-24 10:36:56 发布

lxxxxxt

最新推荐文章于 2022-06-24 10:36:56 发布

阅读量176

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36281031/article/details/106235774

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue监听键盘事件

@keyup.enter.native = “ ” ：监听键盘回车事件，使用了element组件要加上native（因为是监听根元素的原生事件）。如果只监听自定义事件（用$emit触发的事件，则不用使用native）
@blur ：失去焦点时的监听事件。失去焦点：鼠标离开点击该组件时触发。
Vue生命周期的created：在模板渲染成html或者模板编译进路由前调用created。通常用来初始化某些属性值，然后再渲染视图。
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

通常在一些插件或者组件的使用中操作，有时created无法对一些组件进行初始化配置，这时需要用到mounted。

Vue slot

插槽slot，有三种，匿名插槽，具名插槽，作用域插槽
插槽的意义是子组件里定义一个slot占位符，父组件调用时，在slot对应的位置填充模板。子组件暴露的一个让父组件传入自定义内容的接口。
slot-scope：作用域插槽。
参见element-ui，data表格自定义模板

<template slot-scope="scope">{{ scope.row.RouteName }}</template>

属性中带冒号和不带冒号

加冒号的说明后面是一个变量或者表达式；（是v-bind的缩写）

:key = " "
没加冒号的后面是对应的字符串。（属性常量不加冒号）

Element-UI Collapse折叠面板

基础用法，可同时展开多个面板，面板之间不影响。

<el-collapse>
	<el-collapse-item title ="一致性" name = "">
		<div></div>    //折叠内容
	</el-collapse-item>
	<el-collapse-item >
<el-collapse>

效果：
在这里插入图片描述

手风琴效果，一次只能展开一个面板。

<el-collapse   accordion>
	<el-collapse-item title ="一致性" name = "">
		<div></div>    //折叠内容
	</el-collapse-item>
	<el-collapse-item >
<el-collapse>

async/await

异步函数
Promise，js中Promises代表非阻塞异步执行的抽象。通常用于网络和I/O操作，例如从文件读取或发出HTTP请求。如果不需要阻塞当前的”线程“执行，可以生成一个异步Promises，并使用then方法来传入一个回调函数，它在Promise完成时将被触发。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

当使用一个异步调用方法的时候，可以理解为，发送完请求后，我们就可以继续去做自己的事情，然后在一个合适的节点去取数据即可。
异步调用的理解

调用后端接口时，在接口前面需要加await，在包含这个接口的前端函数前面加async

async handleInputConfirm() {
  let inputValue = this.inputValue;
  if (inputValue) {
    let ret = await IsRouteExist(inputValue);      //后端接口
    if(ret.data){
      this.dynamicNotice.push(inputValue);
      this.getBusRouteByNames();
    }
    else{
      this.$alert('提示','该条线路已经删除',{
          confirmButtonText:'确定'
      });
    }
  }
  this.inputVisible = false;
  this.inputValue = "";
},