Vue.jsのrender関数(JSX)に思いを馳せた結果 - じまろぐ
この記事はVue.js #2 Advent Calendar 2018の18日目の記事です。 Vue.jsを使った開発では、特別な理由がない限り.vueファイルで記述するのが主流かと思います。.vueの場合、テンプレートの定義は<template>で行うことになるでしょう。 自分も何の疑問が湧くことなく<template>を使っていましたが、ある日ふとrender関数に思いを馳せ、いくつかの個人プロジェクトで試してみました。 Vueのrenderについて思いを馳せてる— じまぐ (@nakajmg) 2018年6月29日 本記事では、その試行錯誤から得たrender関数についてのあれこれを記しています。 <template>がコンパイルされるとどうなるか render関数の前に、まずは<template>がコンパイルされるとどうなるかについて目を向けてみます。 .vueの<template
vuex-connectでnamespacedなmoduleを使いやすくするヘルパーを作った - じまろぐ
vuex-connectはVuexでReduxのconnectのようにstoreとコンポーネントを繋ぐやつ。 www.npmjs.com コンポーネントとstoreを繋ぐ部分を切り離せて宣言的に書けて気に入ってる。mapStateとかVuexが用意してるやつ使わなくてもstoreの値を取り出せて注入できる。 namespacedなmoduleを繋ぐとき たとえば次のようなstoreがあったとき const store = new Vuex.Store({ state: { foo: 'foo', }, modules: { moduleName: { namespaced: true, state: { bar: 'bar', }, mutations: { barMutation(state, payload) { state.bar = payload }, }, actions: {
Vueのバージョンアップの内容を追いかける方法 - じまろぐ
弊CodeGridにてVueの2.1から2.5で追加された機能からいくつかピックアップして解説した記事を書きました。 CodeGridで入門シリーズを連載したVue.js 2.0。その後のアップデートをおいかけ、特に注目したい機能を選んで解説します：キャッチアップ Vue.js - 2.1から2.5まで https://t.co/39bX3uXDpn #codegrid— CodeGrid (@CodeGrid) April 19, 2018 どういった方法で更新を追うかについては触れていないので、ここに書いておきたいと思います。 ライブラリの更新を追う こういった記事を書く書かないに関わらず、日頃から自分がよく使うライブラリ/フレームワークに関しては更新を追って追加された機能などを把握するようにしています。 更新を追うのは大事だと思っていますが、常日頃から意識して更新を追いかけてる人ばか
VueコンポーネントのnameからCSSのクラスを付与するディレクティブを作ってみた - じまろぐ
VueのSFCでのCSSの命名について以前書いた。 nakajmg.hatenablog.com このSFCSSをやってくうえでクラス名を記述するのをなんとか楽できないか考えた。 この記事はその試行錯誤の軌跡である。 はじめに結論 コンポーネントのnameからクラス名を付与するディレクティブを作ってプラグインをnpmに公開したが、最終的には普通にせっせと書くのが一番ベターなのでは？というところに辿りついたというお話。 めんどくさポイント 命名規則によって命名の手間は減ったが、classをフルで記述する必要があって変わらずめんどうだった。 <template> <div class="MyComponent"> <h1 class="MyComponent_Heading"> heading </h1> </div> </template> <script> export default {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
