async 与 await1. async async 作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行 async 函数里如果有异步过程会等待，但async 函数本身会马上返回，不会阻塞当前线程。可以简单认为 async 函数工作在主线程，同步执行，不会阻塞界面渲染；async 函数内部由 await 修饰的异步过程，工作在相应的协程上，会阻塞等待异步任务的完成再返回 async 函数返回类型为 Promise 对象async 函数会返回一个 promise，并且 Promise 对象的状态值是 resolved（成功的）如果没有在 async 函数中写 return，那么 Promise 对象 resolve 的值就是是 undefined如果写了 return，那么 return 的值就会作为成功的时候传入的值 这是和普通函数本质上不同的地方，也是使用时重点注意的地方： 1. return new Promise()，这个符合 async 函数本意 2. return data 这是同步函数的写法，特别注意这其实就相当于 Promise.reso ...

一. Promise1. 异步异步：则是将耗时很长的 A 交付的工作交给系统之后，就去继续做 B 交付的工作，等到系统完成了前面的工作之后，再通过回调或者事件，继续做 A 剩下的工作。AB 工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。 2. 回调函数当一个函数作为参数传入另一个函数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器和 Ajax 中就存在有回调函数. 12345<script> setTimeout(() => { console.log(`执行了回调函数`); }, 3000);</script> 这里的回调函数是() => {console.log( 执行了回调函数 )}，在满足时间 3 秒后执行。 3. 异步函数123456<script> setTimeout(() => { console.log(`执行了回调函数`); }, 3000); console.log(`11 ...

1 let 与 const、块级作用域在 ES6 之前 JS 是没有块级作用域的，const 与 let 填补了这方面的空白，分别使用 let、const 声明变量和常量，const 与 let 都是块级作用域。使用 var 定义的变量为函数级作用域：使用 let 与 const 定义的变量为块级作用域 123456789{ var i = 0; var i = 1; let j = 0; const k = 1;}console.log("i:" + i); // 正常输出 i = 1;//console.log("j:" + j); // 报错,Uncaught ReferenceError: j is not defined//console.log("k:" + k); // 报错,Uncaught ReferenceError: K is not defined 2 函数参数默认值ES6 支持在定义函数的时候为其设置默认值：传值覆盖，空值默认格式：function 函数名称(参数名称 1 ...

透传 attribute“透传 attribute”指的是传递给一个组件，却没有被改组件声明为 props 或 emits 的 attribute 或者 v-on事件监听器。最常见的例子就是 class、style和 id。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 注意：: 必须是唯一根元素 禁用属性继承123export default { inheritAttrs: false,}; 举例123456789101112131415<script> export default { inheritAttrs: false }</script><template> <h3>透传属性</h3></template><style scoped>.attr-container { color: red;}</style> 生命周期每个组件在被创建时 ...

组件传递数据_props组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间可以传递数据的。传递数据的解决方案就是 props。 App.vue1234567891011121314151617181920<script> import parent from './components/parent.vue'; export default { name: 'App', components: { parent, } }</script><template> <div id="app"> <parent /> </div></template><style></style> parent.vue12345678910111213141516171819<script>import child from  ...

模板引用(获取 DOM 操作)虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 refattribute。 挂载结束后引用都会被暴露在 this.$refs之上。 1234567891011121314151617181920212223242526<script> /** * 内容改变：{{模板语法}} * 属性改变：v-bind * 事件改变：v-on */ export default { data() { return { content: "内容" } }, methods: { getElementHandle() { con ...

Class 绑定数据绑定的一个常见需求场景式操纵元素的 CSS class 列表，因为 class是 attribute,我们可以和其他 attribute 一样使用 v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class的 v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。 绑定对象12345678isActive: true, hasError: false, classObject: { 'active': true, 'text-danger': true },<p :class="{'active':isActive,'text-danger':hasError}&q ...

事件处理我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName" 事件处理器的值可以是： 内联事件处理器：事件被触发时执行的内联 JavaScript 语句(与 onclick类似) 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。 内联事件处理器内联事件处理器通常用于简单场景 123456789101112131415<script> export default { data() { return { count: 0 } } }</script><template> <h3>内联事件处理器</h3> <b ...

模板语法Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。 文本插值最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法(即双大括号)： 1234567891011121314151617<script>export default { name: 'hello' data() { return { msg: "神奇的语法", hello: "Hello World" } }}</script><template> <h3>模板语法</h3> <p>{{ msg }}</p> <p>&# ...