从字符串模板到vue

都知道vue是JavaScript驱动。vue最终生成的是dom片段，是一种对其挂载数据设置监听的dom片段。

实际上，早期开发就有这种简单形式。

一，最早的使用document.createElement的dom片段

<div id="app"></div>
    <script>
        const appDom = document.getElementById('app')
        const div = document.createElement('div')
        div.innerHTML = '<p>测试</p>'
        div.addEventListener('click', ()=>{

          appDom.appendChild(div)

}) </script>

　　

二，模板库比如jquery-template

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>    
<script type="text/javascript" src="jquery-jtemplates.js"></script>    
    
<script type="text/javascript">    
   $(document).ready(function() {    
    //初始化JSON数据    
    var data = {    
     name: '用户列表',    
     list_id: '编号89757',    
     table: [    
      {id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},    
      {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},    
      {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},    
      {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},    
      {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}    
     ]    
    };    
    // 附上模板    
    $("#result1").setTemplateElement("template");    
    // 给模板加载数据    
    $("#result1").processTemplate(data);    
   });     
</script>    

　　

三，vue/react高级库

不管内部功能如何，起点是dom片段或者模板开发。