vue

1.引入
a).

<script src="https://unpkg.com/vue"></script>

b).import
2.vue特点
a).简洁的模板语法
将数据渲染进DOM

{{ message }}

b).视图数据双向绑定
简易视图数据双向绑定的实现

<input type="text" name="text" id="text"><span id="showvalue"></span>
<script type="text/javascript">
    var val = {};
    Object.defineProperty(val, 'input', {
        set: function(newvalue){
            document.getElementById('text').value =  newvalue;
            document.getElementById('showvalue').innerHTML =  newvalue;
        }
    })
    document.addEventListener('keyup',  function(e){
        val.input = e.target.value;
    });
</script>

关键是Object.defineProperty方法.
vue的数据视图双向绑定类似于:

<div id="app">
    <input type="text" name="text" v-model="message">
    {{ message }}
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: 'test'
        }
    });
</script>

实现原理:
(i).document.createDocumentFragment

// createDocumentFragment方法
var time = new Date();
var node = document.createDocumentFragment();
for(var i = 0 ;i <1000000 ; i++){
    var child = document.createElement('div');
    child.innerHTML = "test" + i + " <br />";
    node.appendChild(child);
}
document.body.appendChild(node);
var afterTime = new Date();
console.log(time,afterTime);
// 普通方法
for(var i = 0;i < 1000000;i++){
    var tmpNode = document.createElement("div");
    tmpNode.innerHTML = "test" + i + " <br />";
    document.body.appendChild(tmpNode);
}
var afterTime = new Date();
console.log(time,afterTime);

(ii).数据绑定
c).组件系统
参考文章：
Vue.js双向绑定的实现原理和模板引擎实现原理