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操作还是避免不了的。其它不多说了，直接看代码。。。

为了保持代码的可维护性及易读性，我将模板部分单独放在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">

{{value.key}} var checkboxTpl= '';

{{value.key}}

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