vue-hyper
所属分类：虚拟化
开发工具：JavaScript
文件大小：0KB
下载次数：0
上传日期：2017-06-02 10:58:40
上 传 者：
sh-1993
说明： 动态接口原型制作。在不直接使用html的情况下编程html，
(Prototyping dynamic interfaces. Programming html without directly using html,)
文件列表:
.babelrc (234, 2017-04-04)
.editorconfig (147, 2017-04-04)
.eslintignore (23, 2017-04-04)
.eslintrc.js (642, 2017-04-04)
.postcssrc.js (196, 2017-04-04)
LICENSE (1069, 2017-04-04)
build/ (0, 2017-04-04)
build/build.js (953, 2017-04-04)
build/check-versions.js (1172, 2017-04-04)
build/dev-client.js (245, 2017-04-04)
build/dev-server.js (2518, 2017-04-04)
build/utils.js (1949, 2017-04-04)
build/vue-loader.conf.js (307, 2017-04-04)
build/webpack.base.conf.js (1548, 2017-04-04)
build/webpack.dev.conf.js (1225, 2017-04-04)
build/webpack.prod.conf.js (3883, 2017-04-04)
build/webpack.test.conf.js (584, 2017-04-04)
config/ (0, 2017-04-04)
config/dev.env.js (139, 2017-04-04)
config/index.js (1437, 2017-04-04)
config/prod.env.js (48, 2017-04-04)
config/test.env.js (132, 2017-04-04)
docs/ (0, 2017-04-04)
docs/CONTRIBUTING.md (735, 2017-04-04)
docs/EVENTS.md (938, 2017-04-04)
docs/result.gif (556808, 2017-04-04)
examples/ (0, 2017-04-04)
examples/schema.js (1615, 2017-04-04)
index.html (197, 2017-04-04)
package.json (2994, 2017-04-04)
src/ (0, 2017-04-04)
src/App.vue (1935, 2017-04-04)
src/assets/ (0, 2017-04-04)
src/assets/logo.png (6849, 2017-04-04)
src/components/ (0, 2017-04-04)
src/components/Hello.vue (224, 2017-04-04)
src/components/Input.vue (577, 2017-04-04)
src/main.js (465, 2017-04-04)
... ...
# Vue-hyper
[](https://www.github.com/anlijudavid/vue-hyper)
> Prototyping extremely dynamic interfaces. Programming html without directly using html
### Install
```bash
# Using npm
$ npm install --save vue-hyper
# Using yarn
$ yarn add vue-hyper
```
Import
```js
import Vue from 'vue'
import VueHyper from 'vue-hyper'
import Schema from './schema'
new Vue({
el: '#app',
name: 'hello',
data () {
return {
schema: Schema
}
},
template: '',
components: { VueHyper }
})
```
### Schema
The scheme is a direct bridge that leads directly to the creation of native components of vues. Therefore, properties follow the style of VueJS names, such as `click`, `change`, `input`... The same applies to attributes: `title`, `class`, `placeholder`, `value`, `innerHtml`...
```js
// filename: schema.js
// dir: examples/schema.js
module.exports = {
root: {
type: 'form',
method: 'post'
},
name: {
type: 'input',
properties: {
title: 'Name',
class: 'form-control',
tooltip: 'Input your first name',
value: 'Julian',
innerHtml: 'hello',
placeholder: ''
},
events: {
change: function (data) {
console.log('Element changed to', data.target.value)
},
click: function (data) {
console.log('Element clicked ', data)
},
input: function (data) {
console.log('Pressed input', data.target.value)
},
keypress: function (data) {
console.log('Pressed key', data.key, data.keyCode)
}
}
},
lastname: {
type: 'input',
properties: {
title: 'lastname',
tooltip: 'Input your first lastname',
value: 'David'
},
events: {
input: function (data) {
console.log('Element changed to', data.target.value)
}
}
},
description: {
type: 'input',
properties: {
title: 'biografy',
tooltip: 'Here your text',
placeholder: 'Text'
},
events: {
input: function (data) {
console.log('Element changed to', data.target.value)
}
}
},
genre: {
type: 'select',
properties: {
title: 'genre',
tooltip: 'Input your genre',
value: ['M', 'F', 'Other']
},
events: {
change: function (value) {
console.log('Element genre changed to ', value.target.value)
},
click: function (value) {
console.log('Element genre clicked ', value)
}
}
}
}
```
See example [schema.js](./examples/schema.js)
The rendered elements look like this:
[](https://github.com/juliandavidmr/vue-hyper)
### Events
| Prop | Description |
| --------------- | ------------- |
| `click` | Custom class to add to the **component** |
| `change` | Custom url that the component will load |
| `input` | Custom text |
**See full [list of events](./docs/EVENTS.md)**
## Development, Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
```
[**Contributing**](./docs/CONTRIBUTING.md)
### License
MIT [@juliandavidmr](https://github.com/juliandavidmr)
近期下载者：
相关文件：
收藏者：