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


関連記事

js

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

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

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

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に変換 ...

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

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

フォロー

follow us in feedly

page_side_300rect

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

アプリ情報

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