From 7889b77174f98f868a58c163eb98cfe10f29abbd Mon Sep 17 00:00:00 2001
From: Alex <115539090+Alex-Programer@users.noreply.github.com>
Date: Fri, 18 Nov 2022 12:31:21 +0800
Subject: [PATCH] doc: update vue.md (#125)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 和[Attribute 绑定]的部分重叠了

* doc: 新增自定义指令

* doc: 新增[响应式样式]

* docs: [入门]部分改为vue3写法

* docs: 新增获取事件对象相关内容

* fix: 删除多余文件
---
 docs/vue.md | 79 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 70 insertions(+), 9 deletions(-)

diff --git a/docs/vue.md b/docs/vue.md
index e20801f..7d4996f 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -64,11 +64,13 @@ $ npm run build
 <!--rehype:wrap-class=row-span-2-->
 
 ```js
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 
 const app = createApp({
-  data() {
-    return { count: 0 }
+  setup() {
+    const count = ref(0)
+
+    return { count }
   }
 })
 app.mount('#app')
@@ -90,15 +92,18 @@ app.mount('#app')
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <div id="app">{{ message }}</div>
 <script>
-  const { createApp } = Vue
+  const { createApp, ref } = Vue
   createApp({
-    data() {
+    setup() {
+      const message = ref('Hello Vue!')
+
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
 </script>
+
 ```
 <!--rehype:className=wrap-text -->
 
@@ -107,11 +112,13 @@ app.mount('#app')
 ```html
 <div id="app">{{ message }}</div>
 <script type="module">
-  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
   createApp({
-    data() {
+    setup() {
+      const message = ref('Hello Vue!')
+
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -216,6 +223,38 @@ data() {
 <a @click="doSomething"> ... </a>
 ```
 
+### 获取事件对象
+
+```js
+<script setup>
+import { ref } from 'vue'
+
+const onClick = function(e){
+  console.log(e)
+}
+</script>
+
+<template>
+  <button @click="onClick">click</button>
+</template>
+```
+
+### 传参的同时获取事件对象
+
+```js
+<script setup>
+import { ref } from 'vue'
+
+const onClick = function(msg, e){
+  console.log(msg, e)
+}
+</script>
+
+<template>
+  <button @click="onClick('Hello Vue!', $event)">click</button>
+</template>
+```
+
 ### 动态参数
 
 ```html
@@ -430,6 +469,28 @@ export default defineComponent({
 });
 ```
 
+### 响应式样式
+
+```js
+<script setup>
+import { ref } from 'vue'
+const open = ref(false);
+</script>
+
+<template>
+  <button @click="open = !open">Toggle</button>
+  <div>Hello Vue!</div>  
+</template>
+
+<style scope>
+  div{
+    transition: height 0.1s linear;
+    overflow: hidden;
+    height: v-bind(open ? '30px' : '0px');
+  }
+</style>
+```
+
 响应式进阶 —— wath和computed
 ---