Vue修炼系列教程 - 筑基篇5

2022-02-21 23:06:25 阅读：172 来源： 互联网

前言

上一章主要讲了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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue修炼系列教程 - 筑基篇5

前言

Ref

v-model

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

答案

效果

总结