【后端卷前端3】

侦听器

监听的数据是 data()中的动态数据~响应式数据

<template>
  <div>
    <p>{{showHello}}</p>
    <button @click="updateHello">修改数据</button>
  </div>
</template>

<script>
    export default {
        name: "goodsTest",
        data() {
            return {
                showHello: "Hello"
        },
             methods: {
            updateHello() {
                this.showHello = "World"
            }
        }
    }
</script>

上面实现了一个功能:
点击按钮修改文本数据, 我们想要监听showHello的值的变化与否,我们需要在data()中去定义一个监听模块–

 
<script>
    export default {
        name: "goodsTest",
        data() {
            return {
                showHello: "Hello",
            }
        },
     

        methods: {
            updateHello() {
                this.showHello = "World"
            },
        },
        watch:{
            //函数名必须与data中的showHello名保持一致
            showHello(newValue,oldValue){
                console.log("新的值-",newValue)
                console.log("旧的值-",oldValue)
            }
        }
    }
</script>

表单输入绑定

<template>
<div>
  <input v-model="inputMsg" type="text" placeholder="请输入文本">
  <input :model="inputMsg" type="text" placeholder="请输入文本">
  <p>v-model文本数据:{{inputMsg}}</p>
  <p>:model文本数据:{{inputMsg}}</p>
</div>
</template>

<script>
    export default {
        name: "bindInput",
        data() {
            return {
                inputMsg: ""
            }
        }
    }
</script>

<style scoped>

</style>

前端展示的时候 , :model的方式并不能实时显示输入的文本
在这里插入图片描述

原因:
:model 其实是v-bind:model的缩写,其作用是将值传递给该组件,但是从该组件获得的值不能向上传递;

v-model修饰符

v-model也提供了修饰符: lazy trim `number’

lazy

默认情况下 v-model会在每次input事件后更新数据,此时使用lazy修饰符来使得每次在change事件后更新数据;

在这里插入图片描述

效果是输入之后按回车或者失去焦点时才会实时更新数据

在这里插入图片描述

trim

在这里插入图片描述

效果是去掉两边的空格

在这里插入图片描述

number

使用修饰符.number可以将输入的数据转换为Number类型

注意这里并不能限制输入的数据类型,而是可以帮助我们将数据转换为数字,如果这个值不能被解析,则会返回原始值;

举个例子:

<template>
  <div>
    <input v-model.number="inputMsg" type="text" placeholder="请输入数字">
    <p>数据格式:{{typeof inputMsg}}</p>
  </div>
</template>

<script>
    export default {
        name: "bindInput",
        data() {
            return {
                inputMsg: null,
            }
        }
    }
</script>

<style scoped>

</style>

在这里插入图片描述

模板引入

<template>
  <div>
    <input v-model.number="inputMsg" type="text" placeholder="请输入数字">
    <p>数据格式:{{typeof inputMsg}}</p>

    <div ref="form" class="hello">
      div里的信息
    </div>

    <button @click="getDomElement">获取元素</button>


  </div>
</template>

<script>
    export default {
        name: "bindInput",
        data() {
            return {
                divMsg: '获取整个dom元素',
                inputMsg: '',
                bindMsg: "绑定数据",
            }

        },
        methods: {
            getDomElement() {
                console.log(this.$refs.form)
            }
        }
    }
</script>

<style scoped>

</style>