通过vue如何实现动态配置页面？

Question

目标：
实现一个功能，用户可以通过这个功能来定制自己想要的页面（不是动态表单，期望是可以定制化一切页面以及页面上的逻辑）；

思路：
为用户提供很多控件，如：input、select、checkbox、button等，然后让用户配置各种控件的样式、属性、事件以及事件对应的逻辑；

目前只能实现非常简单的功能，并且大部分都是写死的：一个页面的增、删、改、查，假设我添加了两列：用户名、年龄

然后这些列会出现在查询条件区域、表格区域、编辑页面，调用的接口都是写死的；

问题：
目前非常棘手的问题是：如何为这些控件动态绑定事件？如何处理（配置）不同事件里面对应的逻辑——逻辑是一张白纸，用户想怎么写就怎么写？

Answer 1

这个功能有点复杂，首先你要定义好数据格式，一个页面你可以把它划分成多个组件来构成，例如一个基本的布局:
header,main,footer。那么就可以划分成三个组件，为这三个组件添加样式，属性，事件。一个很好的示例网站就是:易企秀。那么组件数据大致可以分为如下:

`

{
   header:{
      style:{},
      property:{},
      event:{}
   },
   main:{
      style:{},
      property:{},
      event:{}
   }
}

`
当数据添加进去，你生成的页面就应该根据这些数据来渲染，可以用canvas引擎来写，例如:pixi.js。页面是根据用户定制的，那么你就需要一个后台管理系统来让用户自己操作自定义，如果更为复杂，可能还涉及到拖拽，旋转，缩放等复杂功能，可以说常用的业务功能都涉及到了。然后根据用户自定义的数据来渲染页面，整体的思路就是这样，但要细分的话，可能会更多。

Answer 2

v-if就可以了

Answer 3

给个思路，事件绑定可以用vue的自定义指令绑定

<button v-bindEvent="event"></button>

event:[{
      name:'onclick',
      eventInfo:'let a = 1;let b = 2;console.log(a+b)'
    },
    {
      name:'onmouseover',
      eventInfo:"console.log('mouseover')"
    }
    ]

Vue.directive("bindEvent",{
  inserted:function(el,binding){
    let eventData = binding.value
    eventData.forEach((event)=>{
      el[event.name]=new Function(event.eventInfo)
    })
  }
})