doc: update vue.md (jaywcjlove#10).

crazyshare · Nov 2, 2022 · df3e04b · df3e04b
1 parent 4662fb8
commit df3e04b
Show file tree

Hide file tree

Showing 2 changed files with 374 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Quick Reference
 
 [Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
 [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));&class=tag&data-lang=Docker-->
 [Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->

diff --git a/docs/vue.md b/docs/vue.md
@@ -268,4 +268,376 @@ v-on:submit.prevent="onSubmit"
   ┆   ┆      ╰─ Modifiers 由前导点表示
   ┆   ╰─ Argument 跟随冒号或速记符号
   ╰─ Name 以 v- 开头使用速记时可以省略
-```
+```
+
+响应式基础
+---
+
+### 声明状态
+
+```html
+<div>{{ count }}</div>
+```
+
+---
+
+```js {2,4}
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  },
+}
+```
+
+### 声明方法
+
+```html
+<button @click="increment">
+  {{ count }}
+</button>
+```
+
+---
+
+```js {8-10}
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    increment() {
+      this.count++
+    }
+  }
+}
+```
+
+### 有状态方法
+
+```js
+import { debounce } from 'lodash-es'
+export default {
+  created() {
+    // 每个实例都有了自己的预置防抖的处理函数
+    this.debouncedClick = debounce(this.click, 500)
+  },
+  unmounted() {
+    // 最好是在组件卸载时
+    // 清除掉防抖计时器
+    this.debouncedClick.cancel()
+  },
+  methods: {
+    click() {
+      // ... 对点击的响应 ...
+    }
+  }
+}
+```
+<!--rehype:className=wrap-text -->
+
+API 参考
+---
+
+### 应用实例 - (全局 API)
+<!--rehype:wrap-class=row-span-3-->
+
+:- | :-
+:- | :-
+`createApp()` | [#](https://cn.vuejs.org//api/application.html#create-app)
+`createSSRApp()` | [#](https://cn.vuejs.org//api/application.html#create-ssr-app)
+`app.mount()` | [#](https://cn.vuejs.org//api/application.html#app-mount)
+`app.unmount()` | [#](https://cn.vuejs.org//api/application.html#app-unmount)
+`app.provide()` | [#](https://cn.vuejs.org//api/application.html#app-provide)
+`app.component()` | [#](https://cn.vuejs.org//api/application.html#app-component)
+`app.directive()` | [#](https://cn.vuejs.org//api/application.html#app-directive)
+`app.use()` | [#](https://cn.vuejs.org//api/application.html#app-use)
+`app.mixin()` | [#](https://cn.vuejs.org//api/application.html#app-mixin)
+`app.version` | [#](https://cn.vuejs.org//api/application.html#app-version)
+`app.config` | [#](https://cn.vuejs.org//api/application.html#app-config)
+`app.config.errorHandler` | [#](https://cn.vuejs.org//api/application.html#app-config-errorhandler)
+`app.config.warnHandler` | [#](https://cn.vuejs.org//api/application.html#app-config-warnhandler)
+`app.config.performance` | [#](https://cn.vuejs.org//api/application.html#app-config-performance)
+`app.config.compilerOptions` | [#](https://cn.vuejs.org//api/application.html#app-config-compileroptions)
+`app.config.globalProperties` | [#](https://cn.vuejs.org//api/application.html#app-config-globalproperties)
+`app.config.optionMergeStrategies` | [#](https://cn.vuejs.org//api/application.html#app-config-optionmergestrategies)
+
+### 通用 - (全局 API)
+
+:- | :-
+:- | :-
+`version` | [#](https://cn.vuejs.org//api/general.html#version)
+`nextTick()` | [#](https://cn.vuejs.org//api/general.html#nexttick)
+`defineComponent()` | [#](https://cn.vuejs.org//api/general.html#definecomponent)
+`defineAsyncComponent()` | [#](https://cn.vuejs.org//api/general.html#defineasynccomponent)
+`defineCustomElement()` | [#](https://cn.vuejs.org//api/general.html#definecustomelement)
+
+### setup() - (组合式 API)
+
+:- | :-
+:- | :-
+`基本使用` | [#](https://cn.vuejs.org//api/composition-api-setup.html#basic-usage)
+`访问 Props` | [#](https://cn.vuejs.org//api/composition-api-setup.html#accessing-props)
+`Setup 上下文` | [#](https://cn.vuejs.org//api/composition-api-setup.html#setup-context)
+`与渲染函数一起使用` | [#](https://cn.vuejs.org//api/composition-api-setup.html#usage-with-render-functions)
+
+### 响应式: 工具 - (组合式 API)
+
+:- | :-
+:- | :-
+`isRef()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#isref)
+`unref()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#unref)
+`toRef()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#toref)
+`toRefs()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#torefs)
+`isProxy()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#isproxy)
+`isReactive()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#isreactive)
+`isReadonly()` | [#](https://cn.vuejs.org//api/reactivity-utilities.html#isreadonly)
+
+### 生命周期钩子 - (组合式 API)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`onMounted()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onmounted)
+`onUpdated()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onupdated)
+`onUnmounted()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onunmounted)
+`onBeforeMount()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onbeforemount)
+`onBeforeUpdate()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onbeforeupdate)
+`onBeforeUnmount()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onbeforeunmount)
+`onErrorCaptured()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onerrorcaptured)
+`onRenderTracked()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onrendertracked)
+`onRenderTriggered()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onrendertriggered)
+`onActivated()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onactivated)
+`onDeactivated()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#ondeactivated)
+`onServerPrefetch()` | [#](https://cn.vuejs.org//api/composition-api-lifecycle.html#onserverprefetch)
+
+### 依赖注入 - (组合式 API)
+
+:- | :-
+:- | :-
+`provide()` | [#](https://cn.vuejs.org//api/composition-api-dependency-injection.html#provide)
+`inject()` | [#](https://cn.vuejs.org//api/composition-api-dependency-injection.html#inject)
+
+### 响应式: 核心 - (组合式 API)
+
+:- | :-
+:- | :-
+`ref()` | [#](https://cn.vuejs.org//api/reactivity-core.html#ref)
+`computed ()` | [#](https://cn.vuejs.org//api/reactivity-core.html#computed)
+`reactive()` | [#](https://cn.vuejs.org//api/reactivity-core.html#reactive)
+`readonly()` | [#](https://cn.vuejs.org//api/reactivity-core.html#readonly)
+`watchEffect()` | [#](https://cn.vuejs.org//api/reactivity-core.html#watcheffect)
+`watchPostEffect()` | [#](https://cn.vuejs.org//api/reactivity-core.html#watchposteffect)
+`watchSyncEffect()` | [#](https://cn.vuejs.org//api/reactivity-core.html#watchsynceffect)
+`watch()` | [#](https://cn.vuejs.org//api/reactivity-core.html#watch)
+
+### 状态选项 - (选项式 API)
+
+:- | :-
+:- | :-
+`data` | [#](https://cn.vuejs.org//api/options-state.html#data)
+`props` | [#](https://cn.vuejs.org//api/options-state.html#props)
+`computed` | [#](https://cn.vuejs.org//api/options-state.html#computed)
+`methods` | [#](https://cn.vuejs.org//api/options-state.html#methods)
+`watch` | [#](https://cn.vuejs.org//api/options-state.html#watch)
+`emits` | [#](https://cn.vuejs.org//api/options-state.html#emits)
+`expose` | [#](https://cn.vuejs.org//api/options-state.html#expose)
+
+### 生命周期选项 - (选项式 API)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`beforeCreate` | [#](https://cn.vuejs.org//api/options-lifecycle.html#beforecreate)
+`created` | [#](https://cn.vuejs.org//api/options-lifecycle.html#created)
+`beforeMount` | [#](https://cn.vuejs.org//api/options-lifecycle.html#beforemount)
+`mounted` | [#](https://cn.vuejs.org//api/options-lifecycle.html#mounted)
+`beforeUpdate` | [#](https://cn.vuejs.org//api/options-lifecycle.html#beforeupdate)
+`updated` | [#](https://cn.vuejs.org//api/options-lifecycle.html#updated)
+`beforeUnmount` | [#](https://cn.vuejs.org//api/options-lifecycle.html#beforeunmount)
+`unmounted` | [#](https://cn.vuejs.org//api/options-lifecycle.html#unmounted)
+`errorCaptured` | [#](https://cn.vuejs.org//api/options-lifecycle.html#errorcaptured)
+`renderTracked` | [#](https://cn.vuejs.org//api/options-lifecycle.html#rendertracked)
+`renderTriggered` | [#](https://cn.vuejs.org//api/options-lifecycle.html#rendertriggered-sup-classvt-badge-dev-only)
+`activated` | [#](https://cn.vuejs.org//api/options-lifecycle.html#activated)
+`deactivated` | [#](https://cn.vuejs.org//api/options-lifecycle.html#deactivated)
+`serverPrefetch` | [#](https://cn.vuejs.org//api/options-lifecycle.html#serverprefetch)
+
+### 其他杂项 - (选项式 API)
+
+:- | :-
+:- | :-
+`name` | [#](https://cn.vuejs.org//api/options-misc.html#name)
+`inheritAttrs` | [#](https://cn.vuejs.org//api/options-misc.html#inheritattrs)
+`components` | [#](https://cn.vuejs.org//api/options-misc.html#components)
+`directives` | [#](https://cn.vuejs.org//api/options-misc.html#directives)
+
+### 渲染选项 - (选项式 API)
+
+:- | :-
+:- | :-
+`template` | [#](https://cn.vuejs.org//api/options-rendering.html#template)
+`render` | [#](https://cn.vuejs.org//api/options-rendering.html#render)
+`compilerOptions` | [#](https://cn.vuejs.org//api/options-rendering.html#compileroptions)
+
+### 组件实例 - (选项式 API)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`$data` | [#](https://cn.vuejs.org//api/component-instance.html#data)
+`$props` | [#](https://cn.vuejs.org//api/component-instance.html#props)
+`$el` | [#](https://cn.vuejs.org//api/component-instance.html#el)
+`$options` | [#](https://cn.vuejs.org//api/component-instance.html#options)
+`$parent` | [#](https://cn.vuejs.org//api/component-instance.html#parent)
+`$root` | [#](https://cn.vuejs.org//api/component-instance.html#root)
+`$slots` | [#](https://cn.vuejs.org//api/component-instance.html#slots)
+`$refs` | [#](https://cn.vuejs.org//api/component-instance.html#refs)
+`$attrs` | [#](https://cn.vuejs.org//api/component-instance.html#attrs)
+`$watch()` | [#](https://cn.vuejs.org//api/component-instance.html#watch)
+`$emit()` | [#](https://cn.vuejs.org//api/component-instance.html#emit)
+`$forceUpdate()` | [#](https://cn.vuejs.org//api/component-instance.html#forceupdate)
+`$nextTick()` | [#](https://cn.vuejs.org//api/component-instance.html#nexttick)
+
+### 组合选项 - (选项式 API)
+
+:- | :-
+:- | :-
+`provide` | [#](https://cn.vuejs.org//api/options-composition.html#provide)
+`inject` | [#](https://cn.vuejs.org//api/options-composition.html#inject)
+`mixins` | [#](https://cn.vuejs.org//api/options-composition.html#mixins)
+`extends` | [#](https://cn.vuejs.org//api/options-composition.html#extends)
+
+### 指令 - (内置内容)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`v-text` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-text)
+`v-html` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-html)
+`v-show` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-show)
+`v-if` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-if)
+`v-else` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-else)
+`v-else-if` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-else-if)
+`v-for` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-for)
+`v-on` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-on)
+`v-bind` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-bind)
+`v-model` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-model)
+`v-slot` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-slot)
+`v-pre` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-pre)
+`v-once` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-once)
+`v-memo` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-memo)
+`v-cloak` | [#](https://cn.vuejs.org//api/built-in-directives.html#v-cloak)
+
+### 组件 - (内置内容)
+
+:- | :-
+:- | :-
+`<Transition>` | [#](https://cn.vuejs.org//api/built-in-components.html#transition)
+`<TransitionGroup>` | [#](https://cn.vuejs.org//api/built-in-components.html#transitiongroup)
+`<KeepAlive>` | [#](https://cn.vuejs.org//api/built-in-components.html#keepalive)
+`<Teleport>` | [#](https://cn.vuejs.org//api/built-in-components.html#teleport)
+`<Suspense>` | [#](https://cn.vuejs.org//api/built-in-components.html#suspense)
+
+### 特殊 Attributes - (内置内容)
+
+:- | :-
+:- | :-
+`key` | [#](https://cn.vuejs.org//api/built-in-special-attributes.html#key)
+`ref` | [#](https://cn.vuejs.org//api/built-in-special-attributes.html#ref)
+`is` | [#](https://cn.vuejs.org//api/built-in-special-attributes.html#is)
+
+### 特殊元素 - (内置内容)
+
+:- | :-
+:- | :-
+`<component>` | [#](https://cn.vuejs.org//api/built-in-special-elements.html#component)
+`<slot>` | [#](https://cn.vuejs.org//api/built-in-special-elements.html#slot)
+
+### 语法定义 - (单文件组件)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`总览` | [#](https://cn.vuejs.org//api/sfc-spec.html#overview)
+`相应语言块` | [#](https://cn.vuejs.org//api/sfc-spec.html#language-blocks)
+`自动名称推导` | [#](https://cn.vuejs.org//api/sfc-spec.html#automatic-name-inference)
+`预处理器` | [#](https://cn.vuejs.org//api/sfc-spec.html#pre-processors)
+`Src 导入` | [#](https://cn.vuejs.org//api/sfc-spec.html#src-imports)
+`注释` | [#](https://cn.vuejs.org//api/sfc-spec.html#comments)
+
+### \<script setup> - (单文件组件)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`基本语法` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#basic-syntax)
+`响应式` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#reactivity)
+`使用组件` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#using-components)
+`使用自定义指令` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#using-custom-directives)
+`defineProps() 和 defineEmits()` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#defineprops-defineemits)
+`defineExpose` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#defineexpose)
+`useSlots() 和 useAttrs()` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#useslots-useattrs)
+`与普通的 &lt;script&gt; 一起使用` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#usage-alongside-normal-script)
+`顶层 await` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#top-level-await)
+`针对 TypeScript 的功能` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#typescript-only-features)
+`限制` | [#](https://cn.vuejs.org//api/sfc-script-setup.html#restrictions)
+
+### CSS 功能 - (单文件组件)
+
+:- | :-
+:- | :-
+`组件作用域 CSS` | [#](https://cn.vuejs.org//api/sfc-css-features.html#scoped-css)
+`CSS Modules` | [#](https://cn.vuejs.org//api/sfc-css-features.html#css-modules)
+`CSS 中的 v-bind()` | [#](https://cn.vuejs.org//api/sfc-css-features.html#v-bind-in-css)
+
+### 渲染函数 - (进阶 API)
+
+:- | :-
+:- | :-
+`h()` | [#](https://cn.vuejs.org//api/render-function.html#h)
+`mergeProps()` | [#](https://cn.vuejs.org//api/render-function.html#mergeprops)
+`cloneVNode()` | [#](https://cn.vuejs.org//api/render-function.html#clonevnode)
+`isVNode()` | [#](https://cn.vuejs.org//api/render-function.html#isvnode)
+`resolveComponent()` | [#](https://cn.vuejs.org//api/render-function.html#resolvecomponent)
+`resolveDirective()` | [#](https://cn.vuejs.org//api/render-function.html#resolvedirective)
+`withDirectives()` | [#](https://cn.vuejs.org//api/render-function.html#withdirectives)
+`withModifiers()` | [#](https://cn.vuejs.org//api/render-function.html#withmodifiers)
+
+### 服务端渲染 - (进阶 API)
+
+:- | :-
+:- | :-
+`renderToString()` | [#](https://cn.vuejs.org//api/ssr.html#rendertostring)
+`renderToNodeStream()` | [#](https://cn.vuejs.org//api/ssr.html#rendertonodestream)
+`pipeToNodeWritable()` | [#](https://cn.vuejs.org//api/ssr.html#pipetonodewritable)
+`renderToWebStream()` | [#](https://cn.vuejs.org//api/ssr.html#rendertowebstream)
+`pipeToWebWritable()` | [#](https://cn.vuejs.org//api/ssr.html#pipetowebwritable)
+`renderToSimpleStream()` | [#](https://cn.vuejs.org//api/ssr.html#rendertosimplestream)
+`useSSRContext()` | [#](https://cn.vuejs.org//api/ssr.html#usessrcontext)
+
+### TypeScript 工具类型 - (进阶 API)
+
+:- | :-
+:- | :-
+`PropType<T>` | [#](https://cn.vuejs.org//api/utility-types.html#proptypet)
+`ComponentCustomProperties` | [#](https://cn.vuejs.org//api/utility-types.html#componentcustomproperties)
+`ComponentCustomOptions` | [#](https://cn.vuejs.org//api/utility-types.html#componentcustomoptions)
+`ComponentCustomProps` | [#](https://cn.vuejs.org//api/utility-types.html#componentcustomprops)
+`CSSProperties` | [#](https://cn.vuejs.org//api/utility-types.html#cssproperties)
+
+### 自定义渲染 - (进阶 API)
+
+:- | :-
+:- | :-
+`createRenderer()` | [#](https://cn.vuejs.org//api/custom-renderer.html#create-renderer)
+
+
+另见
+---
+
+- [Vue 3.x 官方文档](https://cn.vuejs.org/)
+- [Vue Router 4.x 官方文档](https://router.vuejs.org/zh/)