VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】 - Qiita
Vue.jsをVueCLIからSPA開発に入門してみます。VueCLIはVue.js開発できるようにいろいろ準備してくれるすげーやつ。 しかしいきなりVueCLIから入ると、訳が分からないファイルがいっぱい出てきて、理解するのに苦労します、てか苦労しました笑。 なので、僕がVueCLIを始めた時に知っておきたかったことを中心に、Vue.jsに入門していきます。Vue.jsの公式ドキュメントはCDN読み込みから入っているので、VueCLIから入門してVue.jsの威力を味わいっていきましょう。記事を三回に分けてVue.jsの基本からルーティングの実装まで行います。 今回はVueCLIを使って環境を整えます。 必要なインストール node.jsをインストールしておいてください インストールされているか下記で確認しましょう。
Vueで直接DOMノードを参照するプロパティを知ってｱﾊ体験したのでまとめてみた - Qiita
今日、Vueのコードを書いていて、ふと vm.$el の存在を思い出して猛烈に感動しました。 なので、Vueインスタンスから特定のDOM要素を参照できる方法を一覧してみようと思います。 ちなみに、途中までプロパティセレクタを使ったquerySelectorで、リストの特定要素を指定して意図通りに動いたものの……という顔をしてました 基本的に公式ドキュメントの API — Vue.js に書いてあることの引用です。 知ってマジ神だなって奴 vm.$el - コンポーネントのルートDOMを得る 型: Element Vue インスタンスが管理している ルートな DOM 要素です。 <template> <div class="hoge"> <p v-on:click="click">hoge</p> </div> </template> <script> default export{ met
はじめてのvue-property-decorator (nuxtにも対応） - Qiita
この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の３セクションに分けて説明していきます。 基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。 とりあえずは基本のみ理解しておけば困ることはないでしょう。 また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記：nuxt-property-decorator独自のデコレータの紹介を追加しました 動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1
vue.js + typescript = vue.ts ことはじめ
vue.js は typescript を公式にサポートしています。 つい先日 vue-cli のバージョン 3.0 にてついに、初めから typescript が導入された vue.js のプロジェクトテンプレートが追加されました。 いよいよ vue.js ならぬ vue.ts に追い風が吹いてきたのを感じます。 そこでその追い風を更に強くするべく vue.js + typescript でコンポーネントを作るための基礎知識というかチュートリアルっぽいものを書いてみました。 この記事の概要 vue.js を typescript で書く vue-class-component を利用する vue-property-decolator を利用する ドキュメントにない細かい機能や tips でお送りします。 目標はコンポーネントを自由に作れるようになることです。 プロジェクトテンプレート 何
Nuxt ライフサイクル
Nuxt ライフサイクル どのツールを使う場合でも、ツールが内部でどのように機能するかを理解すると常に自信が持てるようになります。同じことが Nuxt にも当てはまります。 この章の目的は、フレームワークのさまざまな部分とそれらの実行順序、およびどのように連携するかについての概要を説明することです。 Nuxt ライフサイクルはアプリケーションがバンドルされ、チャンク化され、縮小されるビルドフェーズの後に何が起こるかを説明します。このフェーズの後に何が起こるかは、サーバーサイドのレンダリングが有効になっているかどうかによって異なります。有効になっている場合は、選択したサーバーサイドレンダリングのタイプによってさらに異なります: 動的な SSR（nuxt start） または、静的サイト生成（nuxt generate） ライフサイクル サーバー SSR の場合、これらのステップはアプリケーシ
vue/dist/vue.esm.js を使わない方法 - Qiita
vue/dist/vue.esm.js を使いたくない Vueの入門者が最初に躓きがちな問題として、「自分の環境でVue公式のサンプル通りにコンポーネントを書いてみても動かない！」ということがあると思う。 大抵はVueのimportの書き方が問題になる。この解決策として、「import Vue from 'vue'ではなくimport Vue from 'vue/dist/vue.esm.js'を使いましょう」という方法が紹介されていることが多いと思う。 これは、import Vue from 'vue'と書いたときに読み込まれる「ランタイム限定ビルド（vue.runtime.esm.js）」ではなく、「完全ビルド（vue.esm.js）」を使うようにする書き方なのだけど、なるべくランタイム限定ビルドを使ったほうが良いですよーというのが公式のおすすめ。 ランタイム限定ビルドは完全ビルドに比
ベジェ曲線を描画してVue.jsの素晴らしさを体感する - Qiita
ハイパーテキストをマークアップするのがHTMLなら、グラフィックをマークアップするのがSVGです。簡単なコードであれば形をイメージできるうえに、JavaScriptから手軽に操作できます。 WebGLを含むCanvasは、できる事の幅でいえばSVGよりもはるかに上ですし、ベジェ曲線も用意されていますが、線を引くだけなら大げさな気がします。あとレスポンシブ対応が地味にめんどくさい。サクサク動くゲームとか、ゴリゴリ動くリッチなサイトをCanvasで作れる人はすごくすごいと思います。 そんなこんなで、今回はSVGを使います。 Vue.jsとSVG SVGの実体はXMLなので、HTMLのようにVue.jsから操作できます。ベジェ曲線に必要な座標を変数として定義しておいて、それをリアルタイムで変更できるようにすれば、いい感じのベジェ曲線がVue.jsとSVGで実現できそうです。高まります。 実装 プ
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsでthree.jsを使ってみる - Qiita
Nuxt 2 - The Intuitive Vue Framework
vue CDN by jsDelivr - A free, fast, and reliable Open Source CDN
WebPack + Vueで、「Element」導入時にハマった点 - Qiita