This commit is contained in:
Rico Sta. Cruz 2015-12-26 08:49:18 +08:00
parent 60a1d7593f
commit ce76b735f4
5 changed files with 262 additions and 0 deletions

86
deku.md Normal file
View File

@ -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>

30
meow.md Normal file
View File

@ -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).

10
mongodb.md Normal file
View File

@ -0,0 +1,10 @@
---
title: MongoDB
category: Development
---
## Querying
```
{ name: 'john' }
{ name: { $eq: 'john' } }

29
virtual-dom.md Normal file
View File

@ -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
```

107
vue.md Normal file
View File

@ -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>