Vue.jsってなんぞ？というところから触ってみた

あっという間にゴールデンウィーク！

今回は最近私の中で話題のVue.jsについて書いてみようと思います！

ホームページを作成するときは、基本的にはHTMLとCSSを使用して作成します。
そのほかアニメーションを取り入れたり、いろんな制限を設けたりするのにJavascriptを使用します。

Vue.jsは、簡単にはじめられるJavaScriptのフレームワークだと思ってください。
公式サイトも日本語に対応しているので、こちらのサイトを見てみると
概要や使い方が大体わかると思います。

【URL】https://jp.vuejs.org/

まず使用するにあたって、必ず以下のJSを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

使い方は以下のようなものがあります。

宣言的レンダリング

See the Pen GdNpvv by sayuri (@giraffeweb) on CodePen.0

これでサクッとVue.jsが実装できましたね！
でもこれやったらそもそもテキストでうったらいいやん…という感じですよね！
でももっといろんなことができるんです♪

アイテムのリストを表示

See the Pen aGBvRN by sayuri (@giraffeweb) on CodePen.0

このようにv-forディレクティブを使えばアイテムのリストを配列内のデータを使って表示することができます。
これはなかなか使えそうですよね！

クリックしたらイベントが起こる

See the Pen ELNgZW by sayuri (@giraffeweb) on CodePen.0

v-on:click を加えることで、クリックした時にイベントが発生します。
上記はボタンをクリックするとreverseMessageという関数が働き、それによって異なるメッセージを表示しています。

ざっとこんな感じでいろんなことができます。
他にも入力してアクションを起こしたりなど…書ききれないくらいのことができます。

使い方としてはjQueryのようにフロント側で動かしている部分をVue.jsで使っていければさくさくできて面白い気がするし、最終的には仕事の効率化に繋がるのではと考えています。

みなさんもぜひ挑戦してみてください。

Share: