feat: v-on

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

-const PAGE_PATH = '/pages/directive/v-on/v-on'
-
-describe('v-on', () => {
-  let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
-  })
-  it('view:click', async () => {
-    let count = 0
-
-    const countText = await page.$('.count')
-
-    const view = await page.$('.view-click')
-    await view.tap()
-    count += 1
-    expect(await countText.text()).toBe(count + '')
-
-    const view_v_on = await page.$('.view-v-on-click')
-    await view_v_on.tap()
-    count += 1
-    expect(await countText.text()).toBe(count + '')
-  })
+const PAGE_PATH = '/pages/directive/v-on/v-on'
+
+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()
+    }
+    expect(await countText.text()).toBe(expectedCount + '')
+    expect((await page.data()).count).toBe(expectedCount)
+  })
 })
\ 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="button view-click" @click="onClick">click</view>
-    <view class="button view-v-on-click" v-on:click="onClick">v-on:click</view>
-    <view>
-      <text class="count">{{count}}</text>
-    </view>
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        count: 0
-      }
-    },
-    methods: {
-      onClick() {
-        this.count++
-        console.log('onClick')
-      }
-    }
-  }
-</script>
-
-<style>
-  .button {
-    margin-bottom: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-  }
+<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