欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue結(jié)合原生js如何實(shí)現(xiàn)自定義組件自動(dòng)生成

這篇文章主要介紹Vue結(jié)合原生js如何實(shí)現(xiàn)自定義組件自動(dòng)生成，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司主營惠山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,惠山h5微信小程序搭建,惠山網(wǎng)站營銷推廣歡迎惠山等地區(qū)企業(yè)咨詢

就目前三大前端主流數(shù)據(jù)驅(qū)動(dòng)框架（vue,ng,react）而言，均具有創(chuàng)建自定義組件的api，但都是必須先做到事先寫好掛載點(diǎn)，這個(gè)掛載點(diǎn)可以是原有靜態(tài)元素標(biāo)簽也可以是自定義模板；對于多種組件通過同一數(shù)據(jù)流生成的，如果事先在頁面上寫好掛載點(diǎn)(mounted)，然后通過dom操作去動(dòng)態(tài)添加，會(huì)遇到類似這樣一條錯(cuò)誤提示信息：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)。這又是為何呢，下一步該怎么辦？

原因是任何dom操作的對象必須是符合W3C標(biāo)準(zhǔn)的元素，除非如下所述的，改寫生成html元素對象的原型（HTMLElement.prototype）并注冊自定義元素，從而實(shí)現(xiàn)動(dòng)態(tài)生成自定義組件的效果。

不過，大家都明白使用數(shù)據(jù)驅(qū)動(dòng)框架的初衷就是盡可能避免dom操作，而如下代碼中還是有一些dom操作的，就目前認(rèn)知水平而言，感覺這些必要的dom操作還是避免不了的。其它不多說了，直接看代碼。。。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-type" content="text/html,charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/mui.min.css" rel="stylesheet">
  <link href="css/app.css" rel="stylesheet">
  <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="mui-content">
</div>
</body>
<script src="js/fuhao-components.js" type="text/javascript"></script>

<script>

  var jsonData = [
    {
      "keyname": "姓名鄂然失色而熱重重中之重重中之重雜志的熱熱",
      "type": "text",
      "key": "name11"
    }, {
      "value": "姓名鄂之重雜志的熱熱",
      "key": "name11"
    }, {
      "keyname": "姓名鄂然失色而熱熱熱熱是重中之重重中之重重中之重雜志的熱熱",
    },
    {
      "keyname": "姓名鄂然失色而熱熱熱熱是重中之重重中之重重中之重雜志的熱熱",
      "type": "textarea",
      "key": "name"
    },
    {
      "keyname": "性別",
      "type": "radio",
      "key": "sex",
      "values": [
        {
          "key": "man",
          "value": "男輔導(dǎo)班"
        },
        {
          "key": "women",
          "value": "女"
        }
      ]
    },
    {
      "keyname": "復(fù)選",
      "type": "checkbox",
      "key": "checkbox",
      "values": [
        {
          "key": "man",
          "value": "男"
        },
        {
          "key": "women",
          "value": "女"
        }
      ]
    },
    {
      "keyname": "類型",
      "type": "select",
      "key": "type1",
      "values": [
        {
          "key": "type1",
          "value": "類型1"
        },
        {
          "key": "type2",
          "value": "類型2"
        },
        {
          "key": "type3",
          "value": "類型3"
        },
        {
          "key": "type4",
          "value": "類型4"
        }
      ]
    },
    {
      "keyname": "定位",
      "type": "gps",
      "key": "btn",
      "value": "地圖獲取定位"
    },
    {
      "keyname": "拍照",
      "type": "photo",
      "key": "btn",
      "value": "拍照"
    }
  ];
  (function () {
    AnalyJson(jsonData);
  })();
  function AnalyJson(data) {
    if ('id' in data) {
      arguments.callee(data.values);
    } else {
      if ('name' in data) {
        htmlname = data.name;
        CreateInputViewer(data.name);
        arguments.callee(data.values);
      } else {
        if ('type' in data) {
          CreateInputViewer(data);
        } else {
          for (var p in data) {
            CreateInputViewer(data[p]);
          }
        }
      }
    }
  }
  function CreateInputViewer(data) {
    switch (data.type) {
      case 'text': {
        fh_C(data, 'c-input-text' + '-' + data.key, 'fhInputText', textTpl);
        break;
      }
      case 'textarea': {
        fh_C(data, 'c-textarea' + '-' + data.key, 'fhInputTextarea', textareaTpl);
        break;
      }
      case 'radio': {
        fh_C(data, 'c-input-radio' + '-' + data.key, 'fhInputTextarea', radioTpl);
        break;
      }
      case 'checkbox': {
        fh_C(data, 'c-input-checkbox' + '-' + data.key, 'fhInputCheckbox', checkboxTpl);
        break;
      }
      case 'select': {
        fh_C(data, 'c-select' + '-' + data.key, 'fhSelect', selectTpl);
        break;
      }
      case 'photo': {
        fh_C(data, 'c-photo' + '-' + data.key, 'fhPhoto', photoTpl);
        break;
      }
      case 'gps': {
        fh_C(data, 'c-gps' + '-' + data.key, 'fhGPS', gpsTpl);
        break;
      }
      default: {
        fh_C(data, 'c-default' + '-' + data.key, 'fhInputDefault', defaultTpl);
        break;
      }

    }
  }
  function fh_C(d, c, cn, tpl) {
    console.log(d);
    Vue.component(c, {
      template: tpl,
//       props:['key','keyname','values','value'],
      data: function () {
        return d
      }
    });
    new Vue({
      el: '.mui-content',
      components: {
        cn: cn
      },
    });
    var MyElementProto = Object.create(HTMLElement.prototype);
    MyElementProto.createdCallback = function () {
      this.innerHTML = tpl
    };
    var MyComponent = document.registerElement(c, {prototype: MyElementProto});
    document.querySelector('.mui-content').appendChild(new MyComponent());
  }
</script>
</html>

為了保持代碼的可維護(hù)性及易讀性，我將模板部分單獨(dú)放在fuhao-components.js的文件里邊，如下所示：

var textTpl='';
<div class="mui-content-padded">
  <input :type="type" :name="key" :placeholder="keyname" >
</div>
  
var textareaTpl= '';
<div class="mui-content-padded ">
  <textarea rows="5" :placeholder="keyname"> 
  </textarea>
</div>
  
var radioTpl= '';
<form class="mui-input-group mui-content-padded">
    <div class="mui-input-row mui-radio mui-left"v-for="value in values">
      <label>{{value.key}}</label>
      <input :name="key" :type="type" :value="key">
    </div>
</form>
var checkboxTpl= '';
<form class="mui-input-group mui-content-padded">
    <div class="mui-input-row mui-checkbox mui-left"v-for="value in values">
      <label>{{value.key}}</label>
      <input :name="key" :type="type" :value="key">
    </div>
</form>
var selectTpl= '';
  <div class="mui-content-padded">
  <h6 class="mui-content-padded" v-text="keyname"></h6>
    <select class="mui-btn mui-btn-block " :name="key">
      <option value="key" v-text="value.key" v-for="value in values">{{value.key}}</option>
    </select>
  </div>

var photoTpl= '';
<div class="mui-content-padded">
  <span v-text="keyname"></span>
  <button :name="key" onclick="takePhoto(this.name)" class="mui-btn mui-btn-primary">拍照</button> 
  <img :id="key" height="70" width="100" class="img-rounded">
</div>
  
var gpsTpl='';
<div class="mui-content col-xs-12">
  <button class="mui-btn mui-btn-primary" :id="key" onclick="takeLocation(this.id)">
  獲取定位
  </button>
</div>
  
var defaultTpl= '';
<div class="mui-content-padded " v-if="key">
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
      <span class="fuhaoKey" v-text="key"></span>
      <span class="fuhaoValue" v-text="value"></span>
    </li>
  </ul >
</div>

最終渲染效果如下：

Vue結(jié)合原生js如何實(shí)現(xiàn)自定義組件自動(dòng)生成

鑒于vue結(jié)合dom操作動(dòng)態(tài)生成自定義組件，控制臺(tái)會(huì)報(bào)一定的錯(cuò)誤這一點(diǎn)bug還在努力修復(fù)中，可能需要更加深入地了解vue數(shù)據(jù)綁定及傳遞機(jī)制與js動(dòng)態(tài)注冊自定義組件的深入領(lǐng)會(huì)，繼續(xù)努力中。。。

以上是“Vue結(jié)合原生js如何實(shí)現(xiàn)自定義組件自動(dòng)生成”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：Vue結(jié)合原生js如何實(shí)現(xiàn)自定義組件自動(dòng)生成
文章起源：http://chinadenli.net/article22/goehcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、小程序開發(fā)、外貿(mào)網(wǎng)站建設(shè)、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營