diff --git a/docs/vue.html b/docs/vue.html index bdee962e..548b50d0 100644 --- a/docs/vue.html +++ b/docs/vue.html @@ -196,32 +196,37 @@ <!-- 简写 --> <a @click="doSomething"> ... </a> -

获取事件对象

-
<script setup>
-import { ref } from 'vue'
+

获取事件对象

+ +
<script setup>
+import { ref } from 'vue'
+
+const onClick = function(e){
+  console.log(e)
+}
+</script>
 
-const onClick = function(e){
-  console.log(e)
-}
-</script>
-
-<template>
-  <button @click="onClick">click</button>
-</template>
+<template>
+  <button @click="onClick">click</button>
+</template>
-

传参的同时获取事件对象

-
<script setup>
-import { ref } from 'vue'
+

传参的同时获取事件对象

+ +
<script setup>
+import { ref } from 'vue'
+
+const onClick = function(msg, e){
+  console.log(msg, e)
+}
+</script>
 
-const onClick = function(msg, e){
-  console.log(msg, e)
-}
-</script>
-
-<template>
-  <button @click="onClick('Hello Vue!', $event)">click</button>
-</template>
+<template>
+  <button @click="onClick('Hello Vue!', $event)">
+    click
+  </button>
+</template>
+

动态参数

<a v-bind:[attributeName]="url"> ... </a>
 <!-- 简写 -->
@@ -250,20 +255,22 @@

指令 Directives

<p v-if="seen">Now you see me</p>
-

自定义指令 Directives

-
<script setup>
-const vAdmin = {
-  created(el, binding, vnode, prevVnode) {
-    el.style.display = isAdmin ? 'block' : 'none'
-  },
-}
-</script>
+

自定义指令 Directives

+ +
<script setup>
+const vAdmin = {
+  created(el, binding, vnode, prevVnode) {
+    el.style.display = isAdmin ? 'block' : 'none'
+  },
+}
+</script>
 
-<template>
-  <button v-admin>Settings</button>
-</template>
+<template>
+  <button v-admin>Settings</button>
+</template>
-

更多指令函数参考：https://vuejs.org/guide/reusability/custom-directives.html

+ +

更多指令函数参考

响应式基础

声明状态

<div>{{ state.count }}</div>
@@ -310,7 +317,6 @@

<script setup> setup语法糖

<script setup>
-// setup语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时
 import { reactive } from 'vue';
 
 const state = reactive({ count: 0 })
@@ -326,6 +332,7 @@
   </button>
 </template>
+

setup 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时

用 ref() 定义响应式变量

// `reactive`只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 import { ref } from 'vue';
diff --git a/index.html b/index.html
index 05004fe7..adf272d1 100644
--- a/index.html
+++ b/index.html
@@ -458,6 +458,9 @@
 
   fw_qaq
 
+
+  Alex
+
 
   mofelee
 
@@ -473,15 +476,15 @@
 
   花殇
 
-
-  Alex
-
 
   Anko
 
 
   Chart
 
+
+  DaiN
+
 
   DemigodLiu
 
@@ -562,7 +565,7 @@
 
 
如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 docker 快捷部署 web 版。

 
-