メシのタネ

めしのたねになるIT情報配信サイト


Vue.jsで最低限覚えておきたいこと


  1. Webプログラム
  2. javascript
  3. Vue.jsで最低限覚えておきたいこと

見積計算をする機能が欲しいと顧客に言われました。jQueryでいつもならやるんですけど、今回はブラウザ要件が緩かったので、流行りの技術を取り入れたいなということでVue.jsを使ってそれを作ることにしました。が、慣れるまで少し疲れたので、他の人が疲れなくて済むように、勘所を記事にまとめました。

ディレクティブ

ディレクティブって概念が良く分かりませんでした。v-で始まるvue.jsで利用する属性のことなのですが、html属性でDOMを監視するって言うのがあまり自分にはなれませんでした。結果を判断して、判断した結果で処理を変えたり、結果をもとにループ処理したりできるので、今は理にかなってるなって思ってます。業務に取り入れてよかったと思ってます。あと、普通にVue.jsを利用し始めるとちらつきがあるので、対処方法は簡単なので最初に知っておいた方が良いです。

[getpost id=”3314″]

Vue.jsの作業環境

メインシステムはLaravelで組まれているので、LaravelMixを利用しました。Webpackに馴染みがなかったのですが、LaravelMixを利用するとWebpack入ってるので、リリースが凄い楽になったんだなぁという印象でした。環境構築を行った記事があるので、よろしければご覧ください。

[getpost id=”3298″]

Vue.jsのループ処理

HTML上でVue.jsのループをやる時に、配列作ってないとできません。forの初期値の設定が特殊なことしないとできませんが、多分時間が経てばできるようになっていくのではないかと思っています。特に使いづらいという印象はなかったですね。

[getpost id=”3302″]

イベント設定

イベント処理の書く場所が決まってるので、取っ散らからないなと思いました。ここは特に書きやすいなくらいにしか感じないと思います。

[getpost id=”3307″]

リアクティブ

これが最初良く分かりませんでした。要はオブジェクトとViewでデータを持ち合ってるみたいな印象を受けました。が、Viewで変更あった場合、オブジェクトに変更あったデータをViewから取って教えてあげる必要があります。具体的にどのように表現するのかは記事を見ていただきたいと思います。

[getpost id=”3310″]

おわりに

最低限これだけ分かってれば、何かしら作れます。このほかに算術プロパティとか、タイミング別に実行するとか、別クラスとの連携方法とか、クラス間を監視する方法とか、色々使った技術はありますが、今回は基本編ということで、自分がVueやった時に、一番最初に知っておきたかった情報をまとめました。また次回以降で記事を書いてまとめて行きたいなと思います。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書New!!
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみたNew!!
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体New!!
Laravel
LaravelのサービスコンテナとDI、「書いてるだけで動く」コードの正体
Laravel
Laravelのアーキテクチャ、実は誰もわかってない説