フロントエンド

【Vue.js #1 Advent Calendar 2017】Vue.js + Element でフォームダイアログをいい感じに呼び出す【24日目】

Vue.js #1 Advent Calendar 2017 24日目の記事になります。 少し前に Electron + Vue.js + Element でネイティブアプリの開発を行っていたのですが、その時に利用したコードなどを簡単に紹介してみようかと思います。 Element とは Element(element-ui) とは…

Vue で親の値が変わったら子コンポーネントも更新する

Vue で親が子コンポーネントに対して値を渡す場合、以下のように props を介して渡します。 index.html <script type="text/x-template", id="child"> <div> <input v-model="message"> <a>Child message is: {{ message }}</a> </div> </script> <div id="example"> <input v-model="message"> <a>Parent message is: {{ message }…</a></div>

element-ui の tree コンポーネントでノードのレンダリングをカスタマイズする

かなりマイナーなネタですが、element-ui の tree コンポーネントで表示されるノードをカスタマイズしてみたいと思います。 環境 Vue.js : v2.4.4 element-ui : v1.4.6 コード HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.6/lib/theme-default/index.css"> </head> <body> </body></html>

browser-sync を使ってお手軽にライブリロードする

今までライブリロードといえば gulp を使っていたんですが、 『動作確認用のサンプルコードとかでいちいち gulpfile.js を用意するのめんどいなー』 と思い、もっとお手軽にライブリロード出来ないか探していたんですが Browsersync というのがよさそうでし…