VUE 之 $ref 和 $refs

本文全是总结参考摘抄至网络,谢谢各路大神的总结<仅供自己复习>
1.vue中$refs的用法及作用: 原文链接:https://www.jianshu.com/p/e1f4e3ac6606

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后 ''$ refs'里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

2.用代码增加删除dom元素:
http://www.imooc.com/wiki/detail/id/1590

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例

<pre style="margin: 10px 0px 0px; padding: 10px; overflow-x: auto; word-break: break-word !important; color: rgb(28, 31, 33); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, &quot;Courier New&quot;, Courier, monospace; width: 685px; background-color: rgb(245, 245, 245);"><div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script></pre>