初识Vue.js

什么是Vue.js?

它是一个构建网页的Javascript的一个库，你可以理解为它是一个框架，便于开发，Vue.js与Javascript的关系可以类比为django与python之间的关系。它提供一种开发的便利性。它是一个Javascript的MVVM库（model - view -viewmodel）.

它具有一个功能特性，虚拟DOM(Virtual dom).

什么是虚拟DOM？

首先需要知道的是传统的JS对DOM进行的操作流程：JS会找到这个DOM节点进行对应语句操作，要明白的是如果一个网页中有成千上万的节点，JS每次进行DOM操作都需要去找这个节点。那么用传统方法对DOM进行操作花费的成本都是很大的。比如下面的这个代码方法：

<script type="text/javascript">

var NewNode = document.createElement('li');var textNode = document.createTextNode('this is new!');NewNode.appendChild(textNode);document.getElementById('mylist').appendChild(NewNode);

</script>

然而在Vue.js中，你首先要明白在JS中，一切皆对象，把这个节点对象化，并且对这个对象进行操作即可。比如我们要往这个ul中增加一个li。下面是DOM操作前后效果图。

<ul id="mylist">    <li>1</li>    <li>2</li>    <li>3</li></ul>

现在用JS去对象化这个ul节点。

let domNode = {    tag:'ul'    attributes:{id:'mylist'}    children:[    //此处就是li对象了    ]};domNode.children.push('<ul>hh!</ul>');//对JS对象化的虚拟DOM节点进行操作。sync(originalDomNode,domNode);//异步原DOM即可更新节点。