refactor(directive): v-on

pages.json

@@ -183,6 +183,19 @@
         "navigationBarTitleText": "v-for 组合式 API"
       }
     },
+    {
+      "path": "pages/directive/v-on/v-on-options",
+      "style": {
+        "navigationBarTitleText": "v-on 选项式 API"
+      }
+    },
+    {
+      "path": "pages/directive/v-on/v-on-composition",
+      "style": {
+        "navigationBarTitleText": "v-on 组合式 API"
+      }
+    },
+
 
     {
       "path": "pages/directive/v-bind/v-bind",
@@ -246,12 +259,6 @@
         "navigationBarTitleText": "v-model"
       }
     },
-    {
-      "path": "pages/directive/v-on/v-on",
-      "style": {
-        "navigationBarTitleText": "v-on"
-      }
-    },
     // #ifdef APP
     {
       "path": "pages/directive/v-once/v-once",

pages/directive/v-on/v-on-composition.uvue

+<template>
+  <view class="page">
+    <text class="bold mb-10">下方按钮点击累加 count</text>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <button class="mb-10 btn" @click="handleClick">
+      @click="handleClick" 缩写
+    </button>
+    <button class="mb-10 btn" v-on:click="handleClick">
+      v-on:click="handleClick" 方法处理函数
+    </button>
+    <button class="mb-10 btn" v-on:click="count++">
+      v-on:click="count++" 内联事件
+    </button>
+    <button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)">
+      v-on:click="handleClick($event as MouseEvent)"
+      内联声明，注意要显式声明$event的类型
+    </button>
+    <button class="mb-10 btn" v-on:[event]="handleClick">
+      v-on:[event]="handleClick" 动态事件
+    </button>
+    <button class="mb-10 btn" v-on="{ click: handleClick }">
+      v-on="{ click: handleClick }" 对象语法
+    </button>
+    <!-- TODO 不支持修饰符 -->
+    <!-- <view class="mb-10 btn" v-on:click.once="handleClick">v-on:click.once="handleClick" 点击事件将最多触发一次</view> -->
+  </view>
+</template>
+
+<script setup lang="uts">
+const count = ref(0)
+
+const event = ref('click')
+
+const handleClick = (e : MouseEvent) => {
+  count.value++
+  console.log('handleClick', e)
+}
+</script>

pages/directive/v-on/v-on-options.uvue

+<template>
+  <view class="page">
+    <text class="bold mb-10">下方按钮点击累加 count</text>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <button class="mb-10 btn" @click="handleClick">@click="handleClick" 缩写</button>
+    <button class="mb-10 btn" v-on:click="handleClick">
+      v-on:click="handleClick" 方法处理函数
+    </button>
+    <button class="mb-10 btn" v-on:click="count++">
+      v-on:click="count++" 内联事件
+    </button>
+    <button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)">
+      v-on:click="handleClick($event as MouseEvent)"
+      内联声明，注意要显式声明$event的类型
+    </button>
+    <button class="mb-10 btn" v-on:[event]="handleClick">
+      v-on:[event]="handleClick" 动态事件
+    </button>
+    <button class="mb-10 btn" v-on="{ click: handleClick }">
+      v-on="{ click: handleClick }" 对象语法
+    </button>
+    <!-- TODO 不支持修饰符 -->
+    <!-- <view class="mb-10 btn" v-on:click.once="handleClick">v-on:click.once="handleClick" 点击事件将最多触发一次</view> -->
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      count: 0,
+      event: 'click'
+    }
+  },
+  methods: {
+    handleClick(e : MouseEvent) {
+      this.count++
+      console.log('handleClick', e)
+    }
+  }
+}
+</script>

pages/directive/v-on/v-on.test.js

-const PAGE_PATH = '/pages/directive/v-on/v-on'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-on/v-on-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-on/v-on-composition'
 
 describe('v-on', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
-  })
-  it('view:click', async () => {
-    const expectedCount = 6
-    const countText = await page.$('.count')
-    const clickEls = await page.$$('.view-click')
-    for (let i = 0; i < clickEls.length; i++) {
-      await clickEls[i].tap()
+  
+  const test = async (pagePath) => {
+    page = await program.reLaunch(pagePath)
+    await page.waitFor('view')
+    
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('0')
+    
+    const btnList = await page.$$('.btn')
+    for (let i = 0; i < btnList.length; i++) {
+      await btnList[i].tap()
     }
-    expect(await countText.text()).toBe(expectedCount + '')
-    expect((await page.data()).count).toBe(expectedCount)
+    
+    expect(await count.text()).toBe('6')
+  }
+  
+  it('v-on options API', async () => {
+    await test(OPTIONS_PAGE_PATH)
+  })
+  
+  it('v-on composition API', async () => {
+    await test(COMPOSITION_PAGE_PATH)
   })
 })
\ No newline at end of file

pages/directive/v-on/v-on.uvue

-<template>
-  <view class="page">
-    <view class="split-title">v-on</view>
-    <view class="view-click" @click="onClick">@click="onClick" 缩写</view>
-    <view class="view-click" v-on:click="onClick">v-on:click="onClick" 方法处理函数</view>
-    <view class="view-click" v-on:click="count++">v-on:click="count++" 内联事件</view>
-    <view class="view-click" v-on:click="onClick($event as MouseEvent)">v-on:click="onClick($event as
-      MouseEvent)" 内联声明，注意要显示声明$event的类型</view>
-    <view class="view-click" v-on:[event]="onClick">v-on:[event]="onClick" 动态事件</view>
-    <!-- TODO 不支持修饰符 -->
-    <!-- <view class="view-click" v-on:click.once="onClick">v-on:click.once="onClick" 点击事件将最多触发一次</view> -->
-    <view class="view-click" v-on="{ click: onClick }">v-on="{ click: onClick }" 对象语法</view>
-    <view>
-      <text class="count">{{count}}</text>
-    </view>
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        count: 0,
-        event: 'click'
-      }
-    },
-    methods: {
-      onClick(e : MouseEvent) {
-        this.count++
-        console.log('onClick', e)
-      }
-    }
-  }
-</script>
-
-<style>
-  .view-click {
-    margin-bottom: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-  }
-</style>
\ No newline at end of file

pages/index/index.uvue

@@ -698,6 +698,22 @@ export default {
                   url: 'v-for-composition'
                 },
               ]
+            },
+            {
+              id: 'v-on',
+              name: 'v-on',
+              children: [
+                {
+                  id: 'v-on-options',
+                  name: 'v-on 选项式 API',
+                  url: 'v-on-options'
+                },
+                {
+                  id: 'v-on-composition',
+                  name: 'v-on 组合式 API',
+                  url: 'v-on-composition'
+                },
+              ]
             }
           ]
         },

refactor_options-API-composition-API-correspondence.md

@@ -157,7 +157,7 @@ function transform(fileInfo, api) {
 - [x] v-show
 - [x] v-if v-else-if v-else
 - [x] v-for
-- [ ] v-on
+- [x] v-on
 - [ ] v-bind
 - [ ] v-model
 - [ ] v-slot