Javascript

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

本文主要是介绍Vue修炼系列教程 - 筑基篇5,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

上一章主要讲了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修炼系列教程 - 筑基篇5的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!