FrontEnd

Vue.js入門その1〜基本文法〜

投稿日:2017年6月23日 更新日:

はじめに

軽量JSフレームワークとして有名なVue.js。

最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思います。

今回は基本文法に関してメモしていきます。

なお、Vue.jsの公式ドキュメントはこちらになります。
https://jp.vuejs.org/

使用ツール

今回はJSFiddleを使用して開発します。

公式でも進められており、今回のような簡単な文法を試すくらいであればちょうど良いのかな、と思います。

なお、使用する場合はJavaScriptのFWをVue.jsの2系にします。

今回扱う内容は、公式ドキュメントに依ります。

基本文法

JSFiddleで試すので、HTML、CSS、JS(Vue)を分けて記述していきます。

レンダリング

HTMLテンプレートの中にデータを埋め込む場合です。

HTML

JS

Vueインスタンスを生成します。
elが対象のDOMを指定しています。
またdataで定義した値を{{ }}の中に埋め込みます。

ちなみにリアクティブなので、Consoleから値を渡せば変更されます。
その際、JSFiddleで実施する場合はConsoleのコンテキストタブを「result (fiddle.jshell.net)」に変更し、JSの末尾に以下のコードを追記します。

ディレクティブ

HTML

JS

v-bindで対象の属性をVueインスタンスのmessageプロパティで保存できます。
v-は接頭辞で他にも種類があります。
v-bind (Vue.jsリファレンス)

この結果、HTMLでは以下のようにレンダリングされます。

条件分岐とループ

条件分岐(v-if)

HTML

JS

v-ifディレクティブでseenの真偽値を確認して表示制御できます。
試しにseenをfalseにすると表示されなくなります。
v-if (Vue.jsリファレンス)

ループ文(v-for)

HTML

JS

v-forディレクティブを使用することで、リストを展開できます。
v-for (Vue.jsリファレンス)

なお、コンソールで下記を入力すれば追加されます。

ユーザー入力の制御

イベントリスナの追加(v-on)

HTML

JS

v-on:clickで、クリック時のイベントを定義できます。
v-on (Vue.jsリファレンス)

その際、インスタンス内のmethodsで関数を作成すればその処理をしてくれます。

双方向バインディング(v-model)

ビュー側でデータが変更された場合、反映してほしいと思います。
v-modelを使用することでそれができます。
v-model (Vue.jsリファレンス)

HTML

JS

入力フォームから変更することで、messageも変更されます。

試しにコンソールで確認してみると、「Hello Vue!」ではなく、「hogehoge」になっています。

コンポーネント

再利用可能なまとまりに分けておくことができます。

JS(コンポーネント)

これで、todo-itemというコンポーネントにまとめることができます。
propstodoという値を受け取ることができます。
templateは埋め込むHTMLテンプレートになります。

これで<todo-item>というタグをHTMLに記述すれば使用可能です。

HTML

v-bindtodoにループ文で取り出したitemをバインドさせます。
これでコンポーネントに値を渡せます。

JS(Vueインスタンス)

コンポーネントとインスタンスを合わせて書くと、以下のようになります。

さいごに

今回は以上になります。
上記は公式ドキュメントではこちらの範囲になります。

次回はVueインスタンスになります!

2017-07-06 追記
次の記事ができました!
Vue.js入門その2〜Vueインスタンスってなんぞ?〜

おすすめ書籍

基礎から学ぶ Vue.js  Vue.js入門 基礎から実践アプリケーション開発まで  Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

page_footer_300rect




page_footer_300rect




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

フォロー

follow us in feedly

AppLink

英語

page_side_300rect

2017年6月
« 5月 7月 »
 123
45678910
11121314151617
18192021222324
252627282930 

アプリ情報

目標を達成したい方を応援する、TODOアプリもリリースしております。 下記のアイコンから無料でダウンロードできます。

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。