#CustomComponents
Explore tagged Tumblr posts
Visit Tumblr Blog
Explore Tumblr blogs with no restrictions, modern design and the best experience.
Last Seen Tumblr Blogs
Fun Fact
Tumblr has 411 employees.
Text
Precision-machined G10/FR4 fasteners from Fenhar deliver strength and insulation where it matters most 🔩⚙️ Contact us: [email protected]
0 notes
Photo
In the workshop this weekend I had the challenge of helping @corinnabage to create a curious musical instrument, a variation on the water-phone, this will be a water-harp! I'm not quite sure what it is going to sound like, but I've had a lot of fun dreaming up and then making the odd custom component. We're now waiting on tuning pegs before the final fettling can commence 😃 . . . . . #woodturning #woodturnersofinstagram #custommade #customcomponents #musicalinstrument #waterphone #waterharp #creativechallenge #creativeprocess #workshopfun #workshoplife #goodturning #goodwithwood #goodthingscometothosewhowait #learningcurve #learningbydoing #lovemylathe #partoftheprocess https://www.instagram.com/p/CMb9P65D2BH/?igshid=1tzbtxmw9tlds
#woodturning#woodturnersofinstagram#custommade#customcomponents#musicalinstrument#waterphone#waterharp#creativechallenge#creativeprocess#workshopfun#workshoplife#goodturning#goodwithwood#goodthingscometothosewhowait#learningcurve#learningbydoing#lovemylathe#partoftheprocess
0 notes
Video
instagram
centreless grinding for pins used in mould and dies. #customcomponents, #diecomponent #pins #injectionpins #punches
0 notes
Photo
HTMLファイルだけでVue.jsを利用する http://bit.ly/2FuurLR
多分これが一番シンプルだと思います。
実装
<html> <body> <div id="app"> <custom-component :msg='msg' v-on:hello-hoge="msg = 'OK!!!'" /> </div> <script type="text/x-template" id="custom-component"> <div> <span></span> <button v-on:click="$emit('hello-hoge')">ボタン</button> </div> </script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> Vue.component("customComponent", { props: ["msg"], template: "#custom-component", }) </script> <script> new Vue({ el: "#app", data: { msg: 'hoge' }, }) </script> </body> </html>
まとめ
ライブラリなどは利用しにくいので、ちょっとした検証をする際には便利かも。
元記事はこちら
「HTMLファイルだけでVue.jsを利用する」
January 16, 2019 at 02:00PM
0 notes
Photo
Vue.jsでコンポーネントのイベント名をキャメルケースにすると反応しない http://bit.ly/2seAyLC
地味にハマったのでメモ。
再現
htmlファイルのみで再現できます。 適当に保存して、ブラウザで開くと動作します。
ソースはGitGistにもアップしています。 https://gist.github.com/kai-kou/9b5b613918e107ca23682982c75d9467
index.html
<html> <body> <div id="app"> <custom-component :msg='msg' v-on:hello-hoge="msg = 'OK!!!'" v-on:helloHoge="msg = 'OK???'" /> </div> <script type="text/x-template" id="custom-component"> <div> <span></span> <button v-on:click="$emit('hello-hoge')">これはOK！</button> <button v-on:click="$emit('helloHoge')">これはだめ！</button> </div> </script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> Vue.component("customComponent", { props: ["msg"], template: "#custom-component", }) </script> <script> new Vue({ el: "#app", data: { msg: 'hoge' }, }) </script> </body> </html>
helloHoge のボタンをクリックするとコンソールログに警告が出力されます。 開発環境ではこれが出力されず、少々ハマりました。。。
vue.js:603 [Vue tip]: Event “hellohoge” is emitted in component but the handler is registered for “helloHoge”. Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use “hello-hoge” instead of “helloHoge”.
Google翻訳
vue.js：603 [Vue tip]：イベント “hellohoge”がコンポーネントで生成されましたが、ハンドラーが “helloHoge”に登録されました。 HTML属性は大文字と小文字を区別しないため、DOM内のテンプレートを使用する場合はv-onを使用してcamelCaseイベントをリスンすることはできません。 おそらく、 “helloHoge”ではなく “hello-hoge”を使用するべきです。
まとめ
複数言語で開発していると、もうどれでどう実装したら良いのかわからなくなってきます。
参考
camelCased custom event name is not working · Issue #4044 · vuejs/vue https://github.com/vuejs/vue/issues/4044
VueのCDN版を使おう – やわらかVue.js https://scrapbox.io/vue-yawaraka/Vue%E3%81%AECDN%E7%89%88%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86
コンポーネントの基本 — Vue.js https://jp.vuejs.org/v2/guide/components.html
Vue.js の単一ファイルコンポーネント化をHTMLファイルで行う方法 | WriteIfElse https://blog.bulkus.net/post/vue-htmlfile-components/
元記事はこちら
「Vue.jsでコンポーネントのイベント名をキャメルケースにすると反応しない」
January 08, 2019 at 12:00PM
0 notes