前言

上一章主要讲了vue主要的生命周期mounted和Unmounted以及常用修饰符stop和prevent的场景使用，今天主要学习vue中ref(这里的ref和之前讲的使普通变量变成响应式变量不是同一个东西)的使用，以及v-model的使用

Ref

虽然vue推荐我们使用数据去驱动视图渲染，但是有时候我们还是需要去获取真实dom的信息，一般我们获取一个真实dom，大部分是用类似document.querySelector选择器的方式，就像下面这段代码，我们要获取当前组件内的button节点

我们在onMounted时调用浏览器dom选择器api(上一章已经讲过，当组件挂载时，也就是onMounted钩子触发时能获取到当前组件内的真实dom，如果直接在setup中会获取不到，得到的是null)，获取button节点，打印出来，如下图

我们可以使用vue提供的特殊属性ref，也同样能实现效果，我们稍微改进下

使用ref的好处是不会影响到其他组件的代码，只会操作当前组件作用域下的节点(如果直接使用document去寻找dom很可能会获取到其他组件的dom)，所以推荐以后获取dom时都尽量用这种方法，让你的代码可维护性更高，我看下效果，打印结果一样

v-model

有时候我们希望数据和dom之间可以做到数据双向绑定，比如我对一个输入框输入的值，想绑定到一个变量上，同时这个变量改变时，输入框也能对应跟着改变，就可以使用v-model(前面我们说过只要是v-开头的都属于指令)如下代码

 v-model本质是双向绑定dom上的value属性和input事件，而input的value属性的值就是input输入框中的内容，我们随便输入一些值，发现keyword数值会随着输入框的值改变

点击click，keyword被清空，input也被清空，达到数据双向绑定的效果

 上面有说到，v-model本质是双向绑定dom上的value属性和input事件，所以下面这句代码

等同于这样

作业（建议先自己做再看答案哦）

有个输入框，当输入是长度大于5时，输入框边框变红色，并在底下出现一行10px红字“输入长度不能超过5”

答案

<template>
  <div>
    <input :class="verify ?'danger' : null" v-model="keyword" />
    <div class="tip" v-show="verify">输入长度不能超过5</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'App',
  setup() {
    const keyword = ref('');
    const verify = computed(() => {
      return keyword.value.length > 5;
    });

    return {
      keyword,
      verify
    };
  }
};
</script>

<style>
.danger {
  border: 1px solid red;
  outline: none;
}

.tip {
  color: red;
  font-size: 10px;
}
</style>

效果

总结

今天主要讲了如何使用ref获取当前组件内的dom元素，以及使用v-model语法糖实现数据双向绑定，文章还在持续更新中~，然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有各种优惠卡券会员啥的，帮你省钱，这么好的博主能有啥坏心思呢~

标签：教程,Vue,dom,获取,筑基,输入框,组件,model,ref
来源： https://blog.csdn.net/hhzzcc_/article/details/123057348