Vue结合原生js实现自定义组件自动生成示例

前端之家收集整理的这篇文章主要介绍了Vue结合原生js实现自定义组件自动生成示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

就目前三大前端主流数据驱动框架(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操作还是避免不了的。其它不多说了,直接看代码。。。

<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">

为了保持代码的可维护性及易读性,我将模板部分单独放在fuhao-components.js的文件里边,如下所示:

var textareaTpl= '';
<div class="mui-content-padded ">
<textarea rows="5" :placeholder="keyname">

var radioTpl= '';
<form class="mui-input-group mui-content-padded">
<div class="mui-input-row mui-radio mui-left"v-for="value in values">

var checkBoxTpl= '';
Box mui-left"v-for="value in values">
var selectTpl= '';

var photoTpl= '';
<div class="mui-content-padded">
<span v-text="keyname">
<button :name="key" onclick="takePhoto(this.name)" class="mui-btn mui-btn-primary">拍照
<img :id="key" height="70" width="100" class="img-rounded">

var gpsTpl='';
<div class="mui-content col-xs-12">
<button class="mui-btn mui-btn-primary" :id="key" onclick="takeLocation(this.id)">
获取定位

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 class="fuhaoValue" v-text="value">

最终渲染效果如下:

鉴于vue结合dom操作动态生成自定义组件,控制台会报一定的错误这一点bug还在努力修复中,可能需要更加深入地了解vue数据绑定及传递机制与js动态注册自定义组件的深入领会,继续努力中。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/42232.html

猜你在找的Vue相关文章