都知道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片段或者模板开发。