Skip to content
以json方式生成vue,可用于后端控制前端Vue组件生成
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 1761e6e Aug 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist build 0.0.3 Aug 15, 2019
src fix Aug 15, 2019
.gitignore v0.0.1 Aug 4, 2019
LICENSE v0.0.2 Aug 4, 2019
README.md fix Aug 4, 2019
bili.config.js v0.0.2 Aug 4, 2019
package-lock.json v0.0.2 Aug 4, 2019
package.json build 0.0.3 Aug 15, 2019
tsconfig.json

README.md

json2vue

以json方式生成vue,可用于后端控制前端Vue组件生成

本项目从 form-create 中抽出,成为独立的功能

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!如有任何建议或问题请在这里提出

安装

Npm

npm install json2vue

CDN

<script src="https://cdn.jsdelivr.net/npm/json2vue/dist/json2vue.min.js"></script>

示例1

function mock(){
  return {
    rule:[
      {
        type:'ElButton',
        ref:'btn',
        props:{
          disabled:true
        },
        children:['test']
      }
    ],
    mounted(){
      console.log(this)
    }
  };
}
var jv = new jsonVue(mock())
var vm = jv.mount('#app');

等同于

<ElButton :disabled="true" ref="btn">test</ElButton>
var vm = new Vue({
  el:'#app',
  mounted(){
    console.log(this)
  }
})

示例2

function mock(){
  return {
    data:function(){
      return {
        disabled:false
      }
    },
    rule:function(){
      return [
        {
          type:'ElButton',
          ref:'btn',
          props:{
            disabled:this.disabled
          },
          on:{
            click:()=>{
              this.disabled = true;
            }
          },
          children:['test']
        }
      ]
    },
    mounted(){
      console.log(this)
    }
  };
}
var jv = new jsonVue(mock())
var vm = jv.mount('#app');

等同于

<ElButton :disabled="disabled" @click="disabled = true" ref="btn">test</ElButton>
var vm = new Vue({
  el:'#app',
  data:function(){
    return {
      disabled: false
    }
  },
  mounted(){
    console.log(this)
  }
})
You can’t perform that action at this time.