Update
This commit is contained in:
parent
60a1d7593f
commit
ce76b735f4
|
@ -0,0 +1,86 @@
|
||||||
|
---
|
||||||
|
title: Deku
|
||||||
|
category: JavaScript libraries
|
||||||
|
---
|
||||||
|
|
||||||
|
```js
|
||||||
|
/** @jsx element */
|
||||||
|
import element from 'virtual-element' // replacement for React.createElement
|
||||||
|
import {render, tree} from 'deku'
|
||||||
|
|
||||||
|
var app = <div class='my-app'>Hello World!</div>
|
||||||
|
|
||||||
|
render(tree(app), document.body)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
```js
|
||||||
|
Button = {
|
||||||
|
render () { return <button>Submit</button> }
|
||||||
|
}
|
||||||
|
|
||||||
|
App = {
|
||||||
|
render () { return <div><Button /></div> }
|
||||||
|
}
|
||||||
|
|
||||||
|
render(tree(<App />), document.body)
|
||||||
|
// or with virtual-element
|
||||||
|
render(tree(element(App)), document.body)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Component props/state
|
||||||
|
|
||||||
|
```js
|
||||||
|
App = {
|
||||||
|
render ({ props, state }) {
|
||||||
|
return <div>{ /*...use state.store here*/ }</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
initialState (props) {
|
||||||
|
return { store: store.getState() }
|
||||||
|
},
|
||||||
|
|
||||||
|
afterMount (comp, el, setState) {
|
||||||
|
store.subscribe(() => setState({ store: store.getState() }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(tree(<App />), document.body)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
```js
|
||||||
|
<a onClick={onClick}>{props.text}</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Magic virtual element
|
||||||
|
Use [magic-virtual-element](https://github.com/dekujs/magic-virtual-element) to enable nice classnames.
|
||||||
|
|
||||||
|
```
|
||||||
|
import element from 'magic-virtual-element'
|
||||||
|
<div style={style} class={[ 'button', '-active' ]}>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Reference
|
||||||
|
|
||||||
|
```
|
||||||
|
name = 'MyComponent'
|
||||||
|
|
||||||
|
// Defaults
|
||||||
|
initialState (props) {...} // return initial state
|
||||||
|
defaultProps = { style: 'rout' }
|
||||||
|
|
||||||
|
// Render
|
||||||
|
render ({props, state}, setState) {...}
|
||||||
|
|
||||||
|
// Lifecycle
|
||||||
|
beforeUpdate ({props, state, id}, nextProps, nextState) {}
|
||||||
|
afterRender ({props, state, id}, el) {}
|
||||||
|
afterUpdate ({props, state, id}, prevProps, prevState, setState) {}
|
||||||
|
afterMount ({props, state, id}, el, setState) {}
|
||||||
|
beforeUnmount ({props, state, id}, el) {}
|
||||||
|
```
|
||||||
|
|
||||||
|
See: <https://www.npmjs.com/package/deku>
|
|
@ -0,0 +1,30 @@
|
||||||
|
---
|
||||||
|
title: Meow
|
||||||
|
category: JavaScript libraries
|
||||||
|
---
|
||||||
|
|
||||||
|
```js
|
||||||
|
const cli = require('meow')(`
|
||||||
|
Usage: appname [options]
|
||||||
|
|
||||||
|
Options:
|
||||||
|
-h, --help show usage information
|
||||||
|
-v, --version print version info and exit
|
||||||
|
`, {
|
||||||
|
alias: {
|
||||||
|
alias: { h: 'help', v: 'version', x: 'excludeTag' },
|
||||||
|
string: ['lang'],
|
||||||
|
boolean: ['pager'],
|
||||||
|
default: { lang: 'en' },
|
||||||
|
'--': true,
|
||||||
|
stopEarly: true, /* populate _ with first non-option */
|
||||||
|
unknown: function () { ... } /* invoked on unknown param */
|
||||||
|
})
|
||||||
|
|
||||||
|
cli.flags // { excludeTag: true }
|
||||||
|
cli.input // []
|
||||||
|
|
||||||
|
// yes, flags are camelCased
|
||||||
|
```
|
||||||
|
|
||||||
|
Also see [minimist](minimist.html).
|
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
title: MongoDB
|
||||||
|
category: Development
|
||||||
|
---
|
||||||
|
|
||||||
|
## Querying
|
||||||
|
|
||||||
|
```
|
||||||
|
{ name: 'john' }
|
||||||
|
{ name: { $eq: 'john' } }
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
title: Virtual-dom
|
||||||
|
category: JavaScript libraries
|
||||||
|
---
|
||||||
|
|
||||||
|
See <https://www.npmjs.com/package/virtual-dom>
|
||||||
|
|
||||||
|
```js
|
||||||
|
var h = require('virtual-dom/h')
|
||||||
|
var diff = require('virtual-dom/diff')
|
||||||
|
var patch = require('virtual-dom/patch')
|
||||||
|
var createElement = require('virtual-dom/create-element')
|
||||||
|
```
|
||||||
|
|
||||||
|
### Rendering
|
||||||
|
|
||||||
|
```js
|
||||||
|
tree = h('div', { style: { color: 'blue' } }, [ 'hello' ])
|
||||||
|
el = createElement(tree)
|
||||||
|
document.body.appendChild(root)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Updating
|
||||||
|
|
||||||
|
```js
|
||||||
|
tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ])
|
||||||
|
delta = diff(tree, tree2)
|
||||||
|
el = patch(el, delta) // patch() modifies el
|
||||||
|
```
|
|
@ -0,0 +1,107 @@
|
||||||
|
---
|
||||||
|
title: Vue
|
||||||
|
category: JavaScript libraries
|
||||||
|
---
|
||||||
|
|
||||||
|
### Lists
|
||||||
|
|
||||||
|
```html
|
||||||
|
<li v-for="todo in todos">
|
||||||
|
{{ todo.text }}
|
||||||
|
{{ $index }}
|
||||||
|
</li>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button v-on:click='submit'>Go</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Components
|
||||||
|
|
||||||
|
```js
|
||||||
|
new Vue({
|
||||||
|
components: { app: App }
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
```js
|
||||||
|
Vue.extend({ ... }) // creating components
|
||||||
|
Vue.nextTick(() => {...})
|
||||||
|
|
||||||
|
Vue.set(object, key, val) // reactive
|
||||||
|
Vue.delete(object, key)
|
||||||
|
|
||||||
|
Vue.directive('my-dir', { bind, update, unbind })
|
||||||
|
// <div v-my-dir='...'></div>
|
||||||
|
|
||||||
|
Vue.elementDirective('my-dir', { bind, update, unbind })
|
||||||
|
// <my-dir>...</my-dir>
|
||||||
|
|
||||||
|
Vue.component('my-component', Vue.extend({ .. }))
|
||||||
|
|
||||||
|
Vue.partial('my-partial', '<div>hi {{msg}}</div>')
|
||||||
|
// <partial name='my-partial'></partial>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
new Vue({
|
||||||
|
data: { ... }
|
||||||
|
props: ['size'],
|
||||||
|
props: { size: Number },
|
||||||
|
computed: { fullname() { return this.name + ' ' + this.lastName } },
|
||||||
|
methods: { go() { ... } },
|
||||||
|
watch: { a (val, oldVal) { ... } },
|
||||||
|
el: '#foo',
|
||||||
|
template: '...',
|
||||||
|
replace: true, // replace element (default true)
|
||||||
|
|
||||||
|
// lifecycle
|
||||||
|
created () {},
|
||||||
|
beforeCompile () {},
|
||||||
|
compiled () {},
|
||||||
|
ready () {}, // $el is inserted for the first time
|
||||||
|
attached () {},
|
||||||
|
detached () {},
|
||||||
|
beforeDestroy () {},
|
||||||
|
destroyed () {},
|
||||||
|
|
||||||
|
// options
|
||||||
|
directives: {},
|
||||||
|
elementDirectives: {},
|
||||||
|
filters: {},
|
||||||
|
components: {},
|
||||||
|
transitions: {},
|
||||||
|
partials: {}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Vue templates
|
||||||
|
Via [vueify](https://www.npmjs.com/package/vueify)
|
||||||
|
|
||||||
|
```js
|
||||||
|
// app.vue
|
||||||
|
<template>
|
||||||
|
<h1 class="red">{{msg}}</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
module.exports = {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
msg: 'Hello world!'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
Also
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template lang='jade'>
|
||||||
|
h1(class='red') {{msg}}
|
||||||
|
</template>
|
Loading…
Reference in New Issue