就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板;对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)。这又是为何呢,下一步该怎么办?
原因是任何dom操作的对象必须是符合W3C标准的元素,除非如下所述的,改写生成html元素对象的原型(HTMLElement.prototype)并注册自定义元素,从而实现动态生成自定义组件的效果。
不过,大家都明白使用数据驱动框架的初衷就是尽可能避免dom操作,而如下代码中还是有一些dom操作的,就目前认知水平而言,感觉这些必要的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="/UploadFiles/2021-04-02/vue.js">为了保持代码的可维护性及易读性,我将模板部分单独放在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"> <h5 class="mui-content-padded" v-text="keyname"></h5> <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结合dom操作动态生成自定义组件,控制台会报一定的错误这一点bug还在努力修复中,可能需要更加深入地了解vue数据绑定及传递机制与js动态注册自定义组件的深入领会,继续努力中。。。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】