Java全栈课程之Vue3详解———绑定与侦听器

 一、class绑定

        数据绑定的一个常见需求场景是操纵元素的CSS class列表,因为class是attribute,我们可以和其他attribute一样使用 v-bind 将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue专门为 class 的 v-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组

        1.绑定对象

<template>
    <div :class="{ active: isActive, 'text-danger': hasError}">isActive</div>
</template>
<script>
export default {
    data (){
        return{
            isActive:true,
            hasError: true
        }
    }
}
</script>
<style>
    .avtive{
        font-size:30px;
}
    .text-danger{
        color:red;
}
</style>

        2.多个对象绑定

<template>
    <div :class="classobject">isActive</div>
</template>
<script>
export default {
    data() {
        return {
            classobject: {
                active: true,
                'text-danger': true
            }
        }
    }
}
</script>

        3.绑定数组

<template>
    <div :class="[activeclass, errorclass]">isActive</div>
</template>
<script>
export default {
    data () {
        return {
            activeClass: 'active',
            errorclass: 'text-danger'
        }
    }
}
</script>

如果你也想在数组中有条件地渲染某个class,你可以使用三元表达式: 

<template>
    <div :class="[isActive ? 'active' : '']">isActive</div>
</template>
<script>
export default {
    data () {
        return {
            isActive:true
        }
    }
}
</script>

        4.数组和对象

<template>
    <div :class="[{ 'active':isActive }, errorclass]"></div>
</template>
<script>
export default {
    data() {
        return {
            isActive:true,
            errorclass:"text-danger"
        }
    }
}
</script>

数组和对象嵌套过程中，只能是数组嵌套对象

二、style绑定

        数据绑定的一个常见需求场景是操纵元素的CSS style列表,因为 style 是attribute,我们可以和其他attribute一样使用 v-bind 将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue专门为 style的v-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组

        1.绑定对象

<template>
    <div :style="{ color: activeColor, fontsize: fontsize + 'px' }">Stylet邦定</div>
</template>
<script>
export default {
    data () {
        return {
        activeColor: 'red',
        fontsize: 30
        }
    }
}
</script>

<template>
    <div:style="styleobject">Style绑定</div>
</template>
<script>
export default {
    data () {
        return {
            styleobject:{
            color: 'red',
            fontSize: '30px'
            }
        }
    }
}
</script>

         2.绑定数组

<template>
    <div :style="[baseStyles]">Style绑定</div>
</template>
<script>
export default {
    data() {
        return {
            baseStyles:{
            color:"green",
            fontSize:"30px"
            }
        }
    }
}
</script>

三、侦听器

监听页面的数据变化

<template>
    <p>{{ message }}</p>
    <button @click="clickHandle">修改数据</button>
</template>
<script>
export default {
    data() {
        return {
            message:"前端"
        }
    },
    methods : {
        clickHandle({
            this.message = "Python"
        }
    },
    watch:{
        message(newValue, oldvalue) {
            console.log(newValue,oldValue);
        }
    }
}
</script>

四、表单输入绑定

        在前端处理表单时,我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦,v-model指令帮我们简化了这一步骤

<template>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</template>
<script>
export default {
    data() {
        return {
            message: ""
        }
    }
}
</script>

        1.复选框

        单一的复选框，绑定布尔类型值

<template>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
</template>
<script>
export default {
    data() {
        return {
            checked: true
        }
    }
}
</script>

        2.修饰符

v-model也提供了修饰符:.lazy 、.number（取数字）、.trim（去除前后空格）

.lazy默认情况下,v-model会在每次 input 事件后更新数据。你可以添加lazy修饰符来改为在每次 change 事件后更新数据

<template>
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</template>
<script>
export default {
    data() {
        return {
            message:""
        }
    }
}
</script>

五、模板引用

虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作,但在某些情况下,我们仍然需要直接访问底层DOM元素。要实现这一点,我们可以使用特殊的 ref attribute

挂载结束后引用都会被暴露在 this.Srefs 之上

<template>
    <div ref="container">容器</div>
    <input type="text" ref="username">
    <button @click="getUserName">获取数据</button>
</template>
<script>
export default {
    methods : {
        getUserName () {
            console.log(this.$refs.container);
            console.log(this.$refs.username.value);
        }
    }
}

</script>