Vue.jså§ããããããã¢ããã³ãã«ã¬ã³ããŒ2016 â 18æ¥ç®
äœããŸãããšãããããŸã ããã¡ãã£ãšãããããšæã£ãŠããã ãã©ãåãã¯ããŸãã
ginpei/vue-props-template: Write vue’s props through template literal.
Reactããããªãã ãã©ããªããžã§ã¯ããå
¥ãåã«ããŠãæžãæ¹ããªããªãé¢åãããªãã§ãããããããã®ããªããããè£
食åã¿ããã«ããã£ãŠã§ãããããªãŒãããããã³ãã¬ãŒãæååã¯æ¹è¡ãå«ãããããã ãªãŒããã§ãããããããªãŒãšèããŠäœã£ãŠã¿ãŸããã
propsã®æ€èšŒ
Vueã®æ©èœãšããŠãåçãæå®ããããšãã§ããŸãã
ãããªæãã
const MyComponent = {
props: {
simpleString: { type: String },
requiredNumber: { type: Number, required: true },
defaultBoolean: { type: Boolean, default: true },
validatedObject: {
validator: function (value) {
return (value.flag1 && value.flag2)
}
}
}
}
vue-props-template
ãã£ãã®æå®ããã ãããããæžããããã«ãªããŸãã
const pt = require('vue-props-template')
const MyComponent = {
props: pt`
string simpleString
required number requiredNumber
boolean defaultBoolean = true
`
}
ã©ãã§ãããããããããã®ã
ããšã¯ validatedObject
ãã©ããããããªããšãããšããã§ããçŸç¶ãããªãã
const pt = require('vue-props-template')
const MyComponent = {
props: pt.extend(pt`
object validatedObject
`, {
validatedObject: {
validator: function (value) {
return (value.flag1 && value.flag2)
}
}
}
}
}
ããããããªãããš
䟿å©ïŒ
å人çã«ã¯ãããªé¢šã«æžããã䟿å©ã ãšæã£ãŠããã ãã©ãä»ã®äººã¯ã©ããªãã ãããŸãèªåã§äœ¿ãçšã§ãæ§ããªããã ãã©ã
æ¢åã§ããããã®ãªããïŒ
ã¡ãã£ãšæ¢ããŠèŠã€ãããªãã£ããã©ããããã§æãã
validator
ã®æ±ã
åã蟌ã¿å€ ${âŠ}
ã®äžã«é¢æ°ãæžãã®ã£ãŠã©ãããªããå¥ã«è¯ãããªããäŸãã°ããããã®ã
props: pt`
validatedObject as ${function (value) {
return (value.flag1 && value.flag2)
}}
`
ããŒããããã®ãæªããªãããªããã©ãããªãã
ãã®å Žåãä»ã®ãå ååãã®é ã®æžãæ¹ãšéã£ãŠãã¡ãããã©ãããŒãŸãè¯ããã
æè¿ã®ã©ã€ãã©ãªã®äœãæ¹
Vueæ¬äœãåèã«ããã©ãŠã¶ã§èªã¿èŸŒãã§ãNode.jsïŒvueifyïŒçµç±ã§ãåãããã«ã¯ãããã§ãä»ã¯ãããçŽæ¥å
ã³ãŒãã«æžããŠãŠããªããããããã«ãããããŠããããã®ãåºåããããæ¹ã®æ¹ãè¯ãã ãããã
ããšããŒãžã§ã³ç®¡çãå®ã¯ãããŸãããããã£ãŠãªããsemverã¯è¯ããã ãã©ããªããæåã§ãœã¡ãœã¡ããããããªããŠnpm scriptã«æŽæ°ã³ãã³ããçšæããŠããªããŠè©±ãåèããæ°ãããã
ä»ã«ããããš
ããå
šéšçµãã£ããv1.0.0ãšããããšã«ãããããªãšæã£ãŠãŸãã
validator
ã®æ±ã
- ããã
- ããã¥ã¡ã³ãã®èŠçŽã
- GitHub pagesã®å
å®
- npmç»é²