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 ベースのフレームワークによるシングルページアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

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

CAPTCHA


関連記事

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

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

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

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

はじめに 前回の続きになります。 Vue.js入門その1〜基本文法〜 今回は下記の公式ドキュメントのメモになります。 Vue インスタンス テンプレート構文 算出プロパティとウォッチャ なお、今回もJ ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

フォロー

blog-page_side_responsive

2017年6月
 123
45678910
11121314151617
18192021222324
252627282930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。