• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

xaboy/json2vue: 以json方式生成vue,可用于后端控制前端Vue组件生成 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

xaboy/json2vue

开源软件地址:

https://github.com/xaboy/json2vue

开源编程语言:

TypeScript 85.3%

开源软件介绍:

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)
  }
})



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap