JSXコンポーネントでVue.jsテンプレートの優れた機能を使用する
JSXのような特定の人々。 JSXは生き方だと考える人もいます。 Vue.jsのテンプレートは、存在すべきかどうかについて理想的に意見が一致しない場合でも、一般的な慣行の便利な省略形を提供することにすべての関係者が同意していると確信しています。 ただし、JSXの方が柔軟性が高いのは事実です。 ただし、柔軟性には冗長性が伴います。 特に、Vueのイベント修飾子および v-model は、JSXコンポーネントには存在しません。
ありがたいことに、誰かはこれらの機能の両方の必要性を認識し、コミュニティプラグインを作成したので、余分な手間をかけずにJSXを使用できるようになりました。
JSXvモデル
v-model に問題を抱える人もいれば、単一のコンポーネントを記述して理解するために必要なコードの量を減らすのに非常に役立つと感じる人もいます。 babel-plugin-jsx-v-model は、VueJSXでv-modelのサポートを追加します。
インストール
# Install through NPM... npm install babel-plugin-jsx-v-model --save-dev # ... or Yarn yarn add babel-plugin-jsx-v-model -D
次に、jsx-v-model
をbabel構成のプラグインに追加します。
.babelrc(部分的)
... "plugins": ["jsx-v-model", "transform-vue-jsx"], ...
使用法
export default { data() { return { syncData: '' } }, render: h => { return ( <div class="component-wrapper"> <h2>{this.syncData}</h2> <input type="text" v-model={this.syncData} /> </div> ) } }
さて、このv-modelの実装は、今のところVueテンプレートの実装ほど堅牢ではありませんが、ほとんどのユースケースでは十分であることに注意してください。 それは確かに毎回これを書かなければならないことを打ち負かします:
export default { data() { return { syncData: '' } }, render: h => { return ( <div class="component-wrapper"> <h2>{this.syncData}</h2> <input type="text" value={this.syncData} onInput={this.setSyncData}/> </div> ) }, methods: { setSyncData(evt) { this.syncData = evt.target.value } } }
JSXイベント修飾子
イベント修飾子は、Vueが持っているもう1つの巧妙なトリックであり、物事を少しだけ冗長にします。 (また、プレゼンテーションロジックをビジネスロジックから分離します。) babel-plugin-jsx-event-modifiers は、そのサポートも追加します。 (追加のボーナスとして、このプラグインはReact JSXでも機能します。)
さて、これがVue.jsで利用可能な多数のイベント修飾子全体をサポートしておらず、カスタムのもののサポートも追加していないことは何の価値もありません。 標準のバブリングコントロールとキー修飾子を実装するだけです。
:stop-
event.stopPropagation()
を含む関数でイベントをラップします。:prevent-
event.preventDefault()
を含む関数でイベントをラップします。:k[キーコード]一致するキーが押された場合にのみイベントを発生させます。 (これは、
k
プレフィックスがないVue実装とは異なります。)キーイベントでのみ有効です。:{キー名} 一致するキーが(名前で)見つかった場合にのみイベントを発生させます。
有効なキー名:
esc
tab
enter
space
up
down
left
right
delete
インストール
# Install through NPM... npm install babel-plugin-jsx-event-modifiers --save-dev # ... or Yarn yarn add babel-plugin-jsx-event-modifiers -D
次に、jsx-event-modifiers
をbabel構成のプラグインに追加します。
.babelrc(部分的)
... "plugins": ["jsx-event-modifiers", "transform-vue-jsx"], ...
使用法
export default { render: h => { return ( <div class="component-wrapper"> <button onClick:prevent={this.doSomething}> Do Something </button> <input type="text" placeholder="To do something, press enter." onKeyup:enter={this.doSomething} /> </div> ) }, methods: { doSomething() { ... } } }
これもまた、代替案よりも大幅に改善されています。
export default { render: h => { return ( <div class="component-wrapper"> <button onClick:prevent={evt => { evt.preventDefault(); this.doSomething(); }}> Do Something </button> <input type="text" placeholder="To do something, press enter." onKeyup:enter={evt => { if (evt.charCode === 13) { this.doSomething() } }} /> </div> ) }, methods: { doSomething() { ... } } }
そうですね、JSXでVueテンプレートの最高の部分を楽しんでください!
そして、magicまたはnon-javascriptynessについて不平を言う人がいたら誓います…