Vue.js
初めてから5年経ちました
Vue.js を使うケースにそれほど恵まれなかったのですが、久しぶりに採用しそうなので、今のVue.jsを再学習します。今は「Vue 3」にバージョンアップしていて、5年前とは少し違うみたいですね。ちなみに前のバージョンVue 2のサポートは2023年で終了らしいです。(2023/6/4)
このページについて
WEBのフロントエンドはブラウザ環境が整備されてきたこと、HTML5+CSS+JavaScriptが表現力を上げてきたことで、リッチなUIが望まれることが増えてきたように感じます。にも関わらず、その開発環境は旧態依然のままということが少なからずありそうです。そんな中でUI開発に役立つフレームワークがポコポコと生まれてきて、いくらか淘汰も進んでいる状況なのかなと思っています。Vue.jsもそんなフレームワークの中の一つかなという認識で、特に積極的に学習するつもりはなかったのですが、ある日、「Vue.jsの経験者を探している」と連絡をお取引先様よりいただき、せっかくだから触ってみるかと思い立った次第です。お客さんがどうしてVue.jsで開発するのかまだうかがえてないのですが、Flashで作られたUIをいよいよ必要に迫られて全面的に改修することになった感じですかね。(2018/10/22)
Vue.js学習日記
得られた知見
- DOMを直接操作しないで、仮想DOMを操作した上で差分をDOMに反映させているのでスピードが稼げるらしい
- dataの中の配列をconcat, filter, slice なんかで操作しても変更部分だけうまく反映するようになっているらしい
- Vue.js/日記001Vue.jsの学習にあたって教材はどうしようかと思ったのですが、とりあえず 公式サイト の資料でもたくさん学べそうにみえたので、そこからはじめてみようと思いますâ¦
- Vue.js/Vue 3でいろいろ変わってた(5年くらい浦島太郎だった前提で書いてます。Vue 3で変わったこと、Vue 2で変わったこと、そもそも備わっていたけど知らなかっただけのことなど雑多に記しますâ¦
- Vue.js/日記003WEBの特性でもあるインタラクティブな部分はVue.jsではどう記述するのかなと思ったら、メソッドを規定しておいて、操作対象の要素に必要なメソッドを紐づければいâ¦
- Vue.js/日記002<div id="app"> {{ message }} </div> 前回、二重括弧({{}})で囲んだ部分がテンプレート機能のようにVue.jsの制御下に置â¦
- Vue.js/日記004今回Vue.jsのことを調べるきっかけになった案件で、実際にVue.jsが導入されました。その結果、1分ぐらいかかっていたDOMの操作が半分くらいに縮まったといâ¦
- Vue.js/ライフサイクル例によってデータを詰めたVueのAppを用意しました。このrowsの部分はよそのシステムやデータベースが出力したJSON的なものだったりして、事前に手を加えられâ¦
- Vue.js/メニューを作った試しにクリックして選ぶメニューを作ることにしました。 メニューからカテゴリーを選ぶ、といった用途のつもりです。データ部にはカテゴリーの選択肢リストと現在選択中のâ¦
- Vue.js/リストを作った「一覧画面」みたいに言われる画面を作りましょう。 rowsというデータに人名や年齢を詰め込んだリストを用意してみました。 v-forループを使って一覧表示しましâ¦
- Vue.js/リストを改良した前回 、複数ある項目をリスト表示して、件数を数えて、絞り込み機能をつけました。絞り込まれたリスト(filteredRows)が現在の表示対象です。全部で6件あるâ¦
- 飴屋このサイトでは、「飴屋」の活動に関してご紹介しています。 飴屋は個人事業主として、千葉県浦安市で活動しています。 主な業務内容は、WEBサイトの制作、WEBシスâ¦