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

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

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

CAPTCHA


関連記事

svelte

Svelteのチュートリアルをやってみた

1 はじめに2 Svelteとは?2.1 Svelteの特徴2.2 Write less code2.3 No Virtual DOM2.4 Truly reactive3 Svelteのシンタックス ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年6月
 123
45678910
11121314151617
18192021222324
252627282930 

アプリ情報

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