Skip to main content

Marshio

springboot-demo
A springboot project for dependencies usage
My Site
未完成备案,暂不支持访问
bookshelf
Detailed description of the book
yuque
Detailed description of the article
steam
Detailed description of the article
JavaScript

JavaScript

简称JS，文件以.js为后缀。

ECMAScript

ECMAScript （简称ES）是JavaScript的标准化版本，由ECMA国际（前身为欧洲计算机制造商协会）的TC39技术委员会负责制定。以下是ECMAScript的主要版本迭代历程：

  1. ECMAScript 1（1997年）

    • 初始版本，确立了JavaScript作为一门编程语言的基础。

  2. ECMAScript 2（1998年）

    • 一个小更新，增加了一些新特性和错误修复。

  3. ECMAScript 3（1999年）

    • 引入了正则表达式、try...catch异常处理等重要特性。

  4. ECMAScript 4（未能发布）

    • 计划引入面向对象编程、模块化等特性，但由于争议过大，该版本最终被废弃。

  5. ECMAScript 5（2009年）

    • 重新聚焦于小的、一致的更新，引入了严格模式、JSON等。

  6. ECMAScript 5.1（2011年）

    • 一个小更新，主要是一些bug修复和一些新的API。

  7. ECMAScript 6（ES2015，2015年）

    • 引入了类、模块、箭头函数、模板字符串、解构赋值、let和const、Promise、Map和Set等大量新特性。

    类演示

    模块演示

    箭头函数示例

    其余新特性示例

  8. ECMAScript 2016（ES2016）

    • 引入了Array.prototype.includes方法和指数运算符（**）。

  9. ECMAScript 2017（ES2017）

    • 引入了async/await、Object.values和Object.entries等。

  10. ECMAScript 2018（ES2018）

    • 引入了Promise.prototype.finally、Object.getOwnPropertyDescriptors等。

  11. ECMAScript 2019（ES2019）

    • 引入了Array.prototype.flat和Array.prototype.flatMap、String.prototype.trimStart和String.prototype.trimEnd等。

  12. ECMAScript 2020（ES2020）

    • 引入了空值合并运算符（??）、globalThis、Promise.allSettled等。

  13. ECMAScript 2021（ES2021）

    • 引入了逻辑赋值运算符（||=和&&=）、Promise.any等。

  14. ECMAScript 2022（ES2022）

    • 引入了Array.prototype.at、String.prototype.replaceAll、Object.hasOwn、FinalizationRegistry等。

  15. ECMAScript 2023（ES2023）

    • 引入了Array.prototype.findLast、Array.prototype.findLastIndex、String.prototype.codePoints等。

  16. ECMAScript 2024（ES2024）（预计）

    • 正在讨论中，预计会引入新的语法和API。
MarshioAbout 2 min
暴露模式

默认暴露

在Vue 3中，默认暴露通常指的是使用setup函数时，所有返回的对象属性都会被暴露给模板和外部。这意味着，如果你在setup函数中返回了一个对象，那么这个对象的所有属性都会默认暴露给组件的模板。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// 默认暴露方式
export default defineComponent({
  setup() {
    const message = 'Hello from Vue 3';
    const greet = () => {
      alert(message);
    };

    // 暴露已有属性和方法
    return {
      message,
      greet
    };
  }
});
</script>
MarshioAbout 1 min
脚手架创建应用

使用脚手架创建应用

下载脚手架（CLI）

pnpm i -g @vue/cli

创建一个项目

这里会让你选择vue的版本和包管理工具，也可以使用本脚手架创建vue3应用，但是官方更推荐使用vite创建vue3应用

MarshioLess than 1 minute
API 风格

选项式API（Options API）

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data，methods，mounted，computed 等，选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

export default {
    name: 'Demo',
    // name 就是一个选项
    data() {
        // data也是一个选项
        return {
            age: 18
        }
    },
    methods: {
        // methods也是一个选项
        grow() {
            this.age+=1
        }
    },
    computed() {
        // computed也是一个选项

    }
}
MarshioLess than 1 minute
组件通信

组件通信

props

自定义事件

mitt

对于兄弟组件之间的通信，可以使用第三方库mitt来实现一个简单的事件总线。

安装mitt:

pnpm i mitt
MarshioLess than 1 minute