vue+koa 美团实战之vue基础2

写博客是思考的过程

样式与遍历

计算属性

具有依赖关系的数据监听

    computed: {
        b: function() {
            return a + c
        }
    }

样式

:class=[a1, a2]

data() {
    return {
        a1: aaa,
        b1: bbb
    }
}

---

:class="{ 'test1': a3 }"

data() {
    return {
        a1: true
    }
}

---

:class=obj

data() {
    return {
        test1: true || false
    }
}

遍历

    v-for= "(item, idx) in List" :key="item"

key 是用来提高性能的, vue会根据key来判断某些没有发生变化的节点,复用。

---

遍历的分组用法

    <template for="item in List">
        <li :key="item + 1">Hello</li>
        <li :key="item">{{item}}</li>
    </template>

事件

定义和缩写

定义: v-bind:click="eventName"
缩写: @click="eventName"

传参数
@click="eventName(param, $event)"

1. param 就是传的参数
2. $event 是事件对象

修饰符

1. stop 阻止事件冒泡
2. prevent 阻止默认事件
3. capture 开启捕获模式
4. self
5. once 事件只执行一次
6. passive

键盘事件
:keyup.13="eventName"