Vue 数据绑定-事件绑定-样式绑定

数据绑定

• DOM内容绑定

插值表达式

注意事项
1、插值表达式可以使用简单的运算，例如三目运算、字符串拼接、算术运算
2、插值表达式可以调用函数，例如：{{ fn() }}
3、复杂的计算或者数据处理，应该使用计算属性或者函数

插值表达式的问题
1、会闪动 （解决方案使用v-cloak或者v-text替代插值表达式）

v-text

与插值表达式作用一样，但写在标签属性的位置
<div v-text="msg"></div>

强烈推荐使用v-text取代插值表达式

v-html

此指令有安全隐患，所以只能用于自己的内部数据中，
不能使用在第三方数据上

<div v-html="msg"></div>

• DOM属性绑定

v-bind

注意事项
1、响应式的
2、支持动态处理属性
3、有简写 v-bind:src="xxx" ---> :src="xxx"

事件绑定

v-on

1、有简写 v-on:clock="onClick"  --->  @click="onClick"
2、有2种事件调用方式
:click="fn(params, $event)"
:click="fn"

样式绑定

• 2种样式绑定方式

1、使用class属性动态修改
2、使用style属性动态修改

• 通过class绑定样式

通过修改class属性的类名来更改样式

• 对象写法

// key就是类名
<view class="box" :class="{'bg-red': isRed}"></view>

export default {
    data() {
        return {
            title: 'Hello',
            isRed: true
        }
    },
    methods: {
        changeColor(){
            this.isRed = !this.isRed;
        }
    }
}

• 数组写法

// 数组元素变量对应的值就是类名
<view class="box" :class="[errorClass,activeClass]"></view>

export default {
    data() {
        return {
            errorClass: 'error',
            activeClass: 'active
        }
    },
    methods: {
        changeColor(){
            this.errorClass = '';
        }
    }
}

• 注意事项

1、对象与数组可以混合使用（数组包对象）
2、如果有多个class类名，写法如何更加优雅？（推荐）

<view class="box" :class="objClass"></view>

export default {
    data() {
        return {
            objClass: {
                active: true,
                error: false
            }
        }
    },
    methods: {
        changeColor(){
            this.isRed = !this.isRed;
        }
    }
}

3、默认类名如何处理
<view class="box" :class="[errorClass,activeClass]"></view>

• 通过style绑定样式

双向绑定v-model

1、包含2种东西：事件绑定和数据绑定
2、响应式的

自己实现v-model
<input :value="msg" @input="msg = $event.target.value" />