用Vue实现高度自增的文本框

越是使用框架，越是觉得有些"繁琐"是必要的，未经粉饰的知识更为直接，所造成的隔离也是少的。

在我写这篇文章时，依然查了下scrollHeight、offsetHeight、clientHeight的定义，这很正常，有时候我在想，自己使用一个框架时、百度问题时、复制黏贴时，是因为"君子性非异也，善假于物也"，还是因为心中的浮躁。 effect1.gif

<textarea style="overflow:hidden"    @keyup.enter="monitorHeight"> </textarea>

如果使用keydown那么按下enter的时候文本框的高度还没有发生变化，会有一次高度不变化，然后每次变化的时上次的高度，内部还是出现的了滚动

monitorHeight($event){
  $event.target.style.height = $event.target.scrollHeight + ($event.target.offsetHeight - $event.target.clientHeight) + "px";
}

clientHeight：width+padding
scrollHeight: 元素内容的总高度，不包含border
offsetHeight: width+padding+border

如果你还需要$event.srcElement去做兼容，给你一个大大拥抱。

Tips:

document上有很多元素的直接引用
document.body body元素
document.title 文档标题
document.documentElement html元素
图片、框架等
document.querySelector 和 document.querySelectorAll能够实现JQ选择器大部分功能，也是常用的部分。
document.body.classList.add 简化类的操作
document.body.insertBefore JQ插入API大多有它的身影。

本文的CodePen地址https://codepen.io/xiaodun/pen/qJBgjd

感受原生的力量吧！