• 从字符串模板到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片段或者模板开发。

    我站在山顶看风景!下面是我的家乡!
  • 相关阅读:
    集合
    字典
    二进制数,错位相乘
    技术不牛如何才拿到国内IT巨头的Offer(转)
    羊群过河问题
    ubuntu搜不到wifi信号
    win7下Arduino Mega 2560驱动安装失败解决办法
    关于windows下QT以及QT creator的安装
    mybatis相关知识
    oracle中计算百分比,并同时解决小数点前0不显示的问题
  • 原文地址:https://www.cnblogs.com/zhensg123/p/15666997.html
Copyright © 2020-2023  润新知