Vue

Vue.js基礎知識とマスタッシュ構文 & バインディングのv-bind

Javascriptはあまり触れてこなかったが、必要なシーンが出てきたので少し勉強する。現状のスキルとしては、必要な動的要素に対してライブラリをカスタマイズして使う程度。

最近のJavascript情勢

ざっくりまとめる

やり方学習コスト用途
生のJavascript高い何でもいけるが学習コストがネック。
jQuery低いjsのライブラリ。歴史長め。
Vue.js低いjsのフレームワーク。シングルページなどの小規模開発に向く。DOMの制御が得意で習得が容易。
react中くらいjsのフレームワーク。大規模開発に向く。習得に若干かかる。

jQueryは失速気味で、潮流としてはVue.jsとreactに二分されている。そういえば最新のBootstrap V5もjQueryが廃止されていたのもこういう経緯だろうか。

やりたいこと

バリデーションのような、ユーザの入力によってDOMを制御するようなパーツの制作などを行いたい。がっつりjsをマスターしたい、というわけではないので今回は習得が容易とされているVue.jsを学んでみることにする。

試してみる

まずは公式サイトのチュートリアルを試してみると…

See the Pen My First Vue by git-cat-meow (@git-cat-meow) on CodePen.

DOMが変数の値に書き換わる。CDNでVue本体を読み込むだけなので、超簡単。この例のように括弧で囲んだ変数出力をマスタッシュ構文と言う。括弧が口ひげっぽいかららしい。

要素のバインディング

バインディングを使うと、要素とjavascriptを紐づけることができる。

See the Pen Vue v-bind by git-cat-meow (@git-cat-meow) on CodePen.

使用時にはv-bindで対象の属性や要素を指定し、紐づけたいデータオブジェクトのプロパティ名を指定する。

Date()はjavascriptのインスタンス。new演算子を添えて使用し、ミリ単位秒での時刻を表現する(new演算子なしだと、文字列としてデータが表現される)。これにtoLocaleString()はjavascriptのメソッドで、使用言語に合わせた日時の文字列を返させる。

いきなり生のjavascriptが出てきて戸惑うが、調べてなんとなく理解する。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る