Composition APIを使って感じた「これどうなの？」
はじめに Vue.js のバージョン 3 系から導入された新しいコンポーネント形式として、「Composition API」があります。 昨年業務の中で、Composition API を使ったコードを書いてきましたが、その中でいくつも「これどうなの？」となることがたくさんありました。 そんな「これどうなの？」を自分の中での整理を含めて書いていきたいと思います。 Composition API とは Composition API を知らない方にざっくりとだけ伝えると、従来の Options API で切り離すことのできなかったリアクティブ値とリアクティブ値に関連した処理を UI コンポーネント（View）から切り離すことのできる技術です。 簡単に例を書きます。 export default { data: () => ({ count: 0, }), methods: { increme
Vue 3 テストのチュートリアル
Vueでテストを書く Vueでのテストの書き方を知るために、チュートリアルを作ってみました。 セットアップ 成果物のリポジトリはこちら: https://github.com/naga3/vue-test-example # yarn global add @vue/cli # Vue CLIが入っていない場合 vue create vue-test-example cd vue-test-example yarn serve Please pick a preset: Manually select features Check the features needed for your project: Babel, TS, Router, CSS Pre-processors, Linter, Unit Choose a version of Vue.js that you want
Vue.js (+TS)の基本を最速で押さえる - Qiita
概要 Vue.jsをTypeScript(+vue-class-component)で書いていく場合に本当に必要最小限な文法・考え方を説明した記事です。 教科書的な内容では公式のリファレンスが最も優れているので、この記事では自分が経験してきた内容をなるべく盛り込んで 現場で使える知識を説明することを目指しています ※ 本記事はBASE株式会社内で行ったフロントエンドハンズオンの資料の一部をまとめ直したものです 対象読者 フロント・サーバーサイド問わず、エンジニアで新たにVue+TSでの開発をはじめた方 すでにVue+TSで開発しているが、もう一度基礎をおさらいしておきたい方 触れない内容 webpackの設定などビルドに関連する話 Store(Vuex)の扱い方 Nuxtなどの他のライブラリの話 最初に Vueの思想 VueのSFC(Single File Component)は以下のよう
Vue.js+TypeScriptで開発するときの参考記事まとめ - Qiita
概要 Vue.js+TypeScriptで開発する際によく参考にしている記事をまとめています。 自分用なので、自分記事が若干多めです。随時更新 この記事良かったよーとか、教えていただけると助かります。 環境構築 Vue CLIのプロジェクト管理UIがいい感じだった https://qiita.com/kai_kou/items/8fcabc7a8445c1be8a30 DockerでVue.js+TypeScript開発環境を構築する https://qiita.com/kai_kou/items/d581a9f8f3ee8605aed1 Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript開発環境をつくってみた https://qiita.com/kai_kou/items/a404c73c8bb23f25c510 Vuexによる
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 でお送りします。 目標はコンポーネントを自由に作れるようになることです。 プロジェクトテンプレート 何
メンテナンスしやすいVueComponentを設計するために気をつけていること
はじめに VueをつかってWebアプリケーションを実装するとき、Componentをどう切るかって誰でも一度は悩みますよね(悩みますよね？)。とりあえず思いつくままに切ってみたり、繰り返し使いそうなもので切ってみたり、CSSのスコープで切ってみたり…。いろいろな切り口があると思います。 この「いろいろな切り口」でコンポーネントを切ることができる点が、コンポーネント設計を難しくしている所以だと考えています。 そこで今回は、どのような切り口・観点でコンポーネントを切ればよいのか、そのときに気をつけるべきことは何か、といったComponentの設計方法についてまとめてみます。 すべての実用ケースを想定できているわけではないと思いますが、大小いくつかのWebアプリを開発する際に利用してみて今のところいい感じに運用できている方法です(というか自然と収束して出来上がった考え方という感じです)。 はじめ
Vue.jsってどうやったら綺麗に使えるのよ - Qiita
前置き ・LaravelついでにVue.jsを使うことになった ・公式のドキュメントを流し読み ・とりあえずコンポーネントで分けてみるか ・カオスwwww というわけで、根本的にどうVue.jsを使っていいか分かっていないようなので、 どうすれば「俺はVue.jsを使ってるぜっ！」 と言えるのか試行錯誤してみる。 事の始まり 簡単な検索ページでも作ってみる <div> id<input type="text"> name<input type="text"> </div> <div> <input type="button" value="検索"> </div> <br /> <div> <table border="1"> <tr> <th>id</th> <th>name</th> </tr> <tr> <td>1</td> <td>たかし</td> </tr> </table> </
【Vue.js】 v-forディレクティブを使っていたらエラーが出た - Tomcky's blog
v-for を使ってたら何やらエラーが出た。 error: Custom elements in iteration require 'v-bind:key' directives ... ... component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. エラーメッセージに従って以下を参照してみる。 https://vuejs.org/guide/list.html#key なるほど、 key 属性を与えないといけないのか。 <div v-for="(value, key, index) in values" :key="index"> ... </div> key 属性は一意なものであれば良いので、配列のイン
初めてのVue.js（jQuery脳からの移行をメインに） - Qiita
記事概要 jQueryベースでWebブラウザベースのアプリ書いている人がVue.jsに手を出すとしたら、「こんな風にやってみると分かりやすいかも？」と言う話。ES5 前提です。 Vue.jsの特徴として、他のフレームワークとの混在が容易、ってのがある。なのでjQueryとの共存も可能。今回の例では「inputタグなどの入力インターフェースにのみVue.jsを適用し、設定パネルのスライドダウン／アップなどの表示系DOMの操作はjQueryでのコードをそのまま流用」という方針で組んでみた。 「Vue.jsとは何ぞや？」は下記の公式ガイドを参照のこと。 https://jp.vuejs.org/v2/guide/ Vue (発音は / v j u ? / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolith
JavaScriptフレームワーク（Vue.js）を導入して - MicroAd Developers Blog
マイクロアドでアプリケーションエンジニアをしているNです。 日々、バッチを作ったりWEBアプリケーションを作ったりしています。 今回はライトにJavaScriptフレームワークを導入したお話を書いていきたいと思います。 導入のきっかけ その１~きっかけのきっかけ~ マイクロアドではいろいろな用途でWEBアプリケーションを利用しています。 当然ではありますが一部特殊な用途ではない限りJavaScriptでの実装が含まれています。 これらのいくつかにはjQueryが使われており、現在も運用されています。 そんな中、 あるWEBアプリケーションを刷新する機会があり改めてjQueryを多用したコードを見返すことに、、、 その２ ~jQueryって非常に強力~ jQueryを多用した実装を見返して、改めて思ったのが jQueryって非常に強力。 一方で、この強力なライブラリになんでもお世話になってい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テンプレート参照について | Vue.js
TypeScriptではじめるVueコンポーネント（vue-class-component） - Qiita
【Nuxt.js】Todoリストで理解するTypeScriptでVuex入門 - Qiita
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な - Qiita
Vue.jsのコンポーネント入門 - Qiita
Vue CLI 3を使ってアプリケーションを爆速で立ち上げる
Vagrant+centOS7にVueCLIをインストールするまで - Qiita
あえてPHPerにすすめるVue.js入門
やわらかVue.js