feat: add directives

pages.json

@@ -5,6 +5,12 @@
         "navigationBarTitleText": "hello uvue"
       }
     },
+    {
+      "path": "pages/v-bind/v-bind",
+      "style": {
+        "navigationBarTitleText": "v-bind"
+      }
+    },
     {
       "path": "pages/v-for/v-for",
       "style": {
@@ -16,6 +22,36 @@
       "style": {
         "navigationBarTitleText": "v-if"
       }
+    },
+    {
+      "path": "pages/v-model/v-model",
+      "style": {
+        "navigationBarTitleText": "v-model"
+      }
+    },
+    {
+      "path": "pages/v-on/v-on",
+      "style": {
+        "navigationBarTitleText": "v-on"
+      }
+    },
+    {
+      "path": "pages/v-once/v-once",
+      "style": {
+        "navigationBarTitleText": "v-once"
+      }
+    },
+    {
+      "path": "pages/v-show/v-show",
+      "style": {
+        "navigationBarTitleText": "v-show"
+      }
+    },
+    {
+      "path": "pages/v-slot/v-slot",
+      "style": {
+        "navigationBarTitleText": "v-slot"
+      }
     }
   ],
   "globalStyle": {

pages/index.uvue

@@ -121,7 +121,6 @@
       // uni.getStorage({
       //   key: STORAGE_KEY_PREFIX,
       //   success: function (res) {
-      //     console.log("121212")
       //     storageData = JSON.parse(res.data as string) as Array<string>
       //     console.log(storageData)
       //     for (let i = 0; i < this.list.length; ++i) {
@@ -134,7 +133,7 @@
       // })
     },
     methods: {
-      triggerCollapse(item : ListItem, index : number) {
+      triggerCollapse(_ : ListItem, index : number) {
         this.list[index].open = !this.list[index].open
 
         // const id = item.id

pages/v-bind/v-bind.test.js

+const PAGE_PATH = '/pages/v-bind/v-bind'
+
+describe('v-bind', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('button-v-bind:disabled', async () => {
+  })
+})

pages/v-bind/v-bind.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-bind</view>
+    <button :disabled="isButtonDisabled">Button</button>
+    <button v-bind:disabled="isButtonDisabled">Button</button>
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    data() {
+      return {
+        isButtonDisabled: true
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style>
+</style>

pages/v-for/v-for.test.js

@@ -4,7 +4,7 @@ describe('v-for', () => {
   let page
   beforeAll(async () => {
     page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(5000)
+    await page.waitFor(500)
   })
   it('list-items-3', async () => {
     const length = 3;

pages/v-if/v-if.test.js

+const PAGE_PATH = '/pages/v-if/v-if'
+
+describe('v-if', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('list-items-3', async () => {
+    const length = 3;
+    const elements = await page.$$('.list-item')
+    expect(elements.length).toBe(length)
+  })
+})

pages/v-if/v-if.uvue

@@ -2,7 +2,7 @@
   <view class="page">
     <view class="split-title">v-if</view>
     <button @click="onShowOrHide">show/hide</button>
-    <view v-if="show">hello</view>
+    <view class="hello" v-if="show">hello</view>
   </view>
 </template>
 

pages/v-model/counter.uvue

+<template>
+  <view>
+    <view>子组件-count的值是：{{number}}</view>
+    <button type="default" @click="add">+1</button>
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    props: {
+      number: {
+        type: Number,
+        default: 0
+      }
+    },
+    emits: ['update:number'],
+    methods: {
+      add() {
+        this.$emit('update:number', this.number + 1)//子组件通过this.$emit()方法修改number值
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/v-model/v-model.test.js

+const PAGE_PATH = '/pages/v-model/v-model'
+
+describe('v-model', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('input', async () => {
+    const value = Date.now() + ''
+
+    const inputElement = await page.$('.input')
+    await inputElement.input(value)
+
+    const inputValueElement = await page.$('.input-value')
+    expect(await inputValueElement.text()).toBe(value)
+  })
+})

pages/v-model/v-model.uvue

+<template>
+  <view class="page">
+    <view class="split-title">input</view>
+    <input class="input" v-model="inputValue" />
+    <text class="input-value">{{inputValue}}</text>
+
+    <view class="split-title">button</view>
+    <view>
+      <button type="default" @click="countPlus">+1</button>
+      <!-- TODO -->
+      <!-- <counter v-model:number="count"></counter> -->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+  // import counter from "./counter.uvue"
+  export default {
+    // components: {
+    //   counter
+    // },
+    data() {
+      return {
+        inputValue: '',
+        count: 0
+      }
+    },
+    methods: {
+      countPlus() {
+        this.count++;
+      }
+    }
+  }
+</script>
+
+<style>
+  .input {
+    padding: 8px 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+</style>
\ No newline at end of file

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

+const PAGE_PATH = '/pages/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 + '')
+  })
+})
\ No newline at end of file

pages/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 lang="ts">
+  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;
+  }
+</style>
\ No newline at end of file

pages/v-once/v-once.test.js

+const PAGE_PATH = '/pages/v-once/v-once'
+
+describe('v-once', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('list-items-3', async () => {
+  })
+})

pages/v-once/v-once.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-once</view>
+    <view class="v-once" v-once>This will never change: {{msg}}</view>
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    data() {
+      return {
+        msg: ''
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style>
+</style>

pages/v-show/v-show.test.js

+const PAGE_PATH = '/pages/v-slot/v-slot'
+
+describe('v-slot', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('list-items-3', async () => {
+    const length = 3;
+    const elements = await page.$$('.list-item')
+    expect(elements.length).toBe(length)
+  })
+})

pages/v-show/v-show.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-show</view>
+    <button @click="onShowOrHide">show/hide</button>
+    <view v-show="show">hello</view>
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    data() {
+      return {
+        show: true
+      }
+    },
+    methods: {
+      onShowOrHide() {
+        this.show = !this.show
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

pages/v-slot/counter.uvue

+<template>
+  <view>
+    <slot :loading="loading" :error="errorMessage" />
+  </view>
+</template>
+
+<script lang="ts">
+  export default {
+    props: {
+      number: {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        loading: false,
+        hasMore: false,
+        errorMessage: ''
+      }
+    },
+    created() {
+    },
+    methods: {
+    }
+  }
+</script>
\ No newline at end of file

pages/v-slot/v-slot.test.js

+const PAGE_PATH = '/pages/v-slot/v-slot'
+
+describe('v-slot', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('list-items-3', async () => {
+  })
+})

pages/v-slot/v-slot.uvue

+<template>
+  <view class="page">
+    <view class="split-title">v-slot</view>
+    <!-- <counter v-slot:default="options">
+      {{options['loading']}}
+    </counter> -->
+  </view>
+</template>
+
+<script lang="ts">
+  // import counter from "./counter.uvue"
+  export default {
+    // components: {
+    //   counter
+    // },
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style>
+</style>
\ No newline at end of file