uni-app（二）

阿新 • • 發佈：2021-02-08

uni-app（二）事件處理

1. 監聽事件
2. 事件修飾符
3. 計算屬性computed
4. 偵聽器watch

1. 監聽事件

使用v-on指令監聽DOM事件，並在觸發時執行一些JS程式碼
一般在methods裡面宣告方法，然後在使用v-on繫結在元件上

<template>
        <view>
            <!-- `greet` 是在下面定義的方法名 -->
            <button v-on:click="greet" 
>Greet</button>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    name: 'Vue.js'
                }
            },
            // 在 `methods` 物件中定義方法
            methods: {
                greet 
(event){
                    // `event` 是原生 DOM 事件，也可以替換為e等任意字串
                    console.log(event);
                    uni.showToast({
                        title: 'Hello ' + this.name + '!'
                    });
                }
            }
        }
    </script>

2. 事件修飾符

用於指出一個指令應該以特殊方式繫結

.stop:使用時會阻止事件冒泡
.native:監聽原生事件，僅在H5平臺支援
.prevent
.capture
.self
.once
.passive

呼叫：v-on.stop=" "

3. 計算屬性computed

每一個計算屬性都包含一個getter和setter，預設使用getter來讀取，所有的getter和setter的this上下文自動繫結vue例項

通過下面的例子來看看getter和setter是如何工作的

<template>
        <view>
            <view>{{ fullName }}</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    firstName: 'Foo',
                    lastName: 'Bar'
                }
            },
            //計算屬性
            computed: {
                fullName: {
                    // getter
                    get(){
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter通過設定一個值來改變其關聯的值
                    set(newValue){
                        var names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        }
    </script>

4. 偵聽器watch

型別：{[key:string]:string|Function|Object|Array}

一個物件，鍵為需要觀察的表示式，值時對應回撥函式，值也可以是方法名，或者包含選項的物件

<template>
    <view>
        // v-model繫結動態word
        <input type="text" v-model="word">
    </view>
</template>
<script>
    export default {
        data() {
            return {
                word: 'word'
            }
        },
        watch: {
            /* 使用watch來響應資料的變化 */
            //一般使用old value和new value來檢視變換前後的值
            word(newVal, oldVal) {
                console.log('最新值是：'+newVal,"原來的值是："+ oldVal);
            }
        },
    }
</script>