はじめに
jQueryガンギマリボーイから脱却するために学習を始めました。
目標はVue.jsとBaaSでオリジナルのポートフォリオを作る事。
「あの人絶対Vueキメてるよね」と言われるようになるまでレッツトライ
「Vueやりたいんだよねぇ〜」って人も僕と一緒にレッツトライ
HTML、CSS、JavaScriptの基礎知識がある程度必要になってきます。
Vueインスタンスの作成
elオプションでVueインスタンスを展開する場所を指定する。
#appはid="app"を指定したことになる。
varapp=newVue({el:'#app'})ルートテンプレートの作成
HTMLでVueインスタンスを展開する場所を指定する。
HTMLにVueを埋め込むイメージ。
<divid="app"><!--ここにVueインスタンスが展開される --></div>テキストのデータバインディング
データバインディングとはJavaScriptのデータを変えると描画されている内容も同時に変わる仕組みのこと。
Vueインスタンスに設定した値はマスタッシュ構文で展開する。
{{message}}Vueインスタンスのdataオプションにmessageの値を設定する
varapp=newVue({el:'#app',// マウントするセレクタの指定data:{message:'Hello Vue.js!'}})設定したmessageはelオプションに定義したid=appの中で展開できる。
<divid="app"><p>
{{ message }} <!-- Hello Vue.js! --></p></div>id=appの外では展開できない
<divid="app"></div>
{{ message }} <!-- {{ message }} -->dataオプションにオブジェクトや配列を設定
カンマで続けて書く事ができる。
varapp=newVue({el:'#app',data:{// userオブジェクトを定義user:{lastName:'Yamada',firstName:'Taro',prefecture:'Tokyo'},// 配列を定義colors:['Red','Green','Blue']}})オブジェクトはオブジェクト名.キー名
配列は配列名[数値]でアクセス出来ます。
<divid="app"><p>
{{ user.prefecture }} <!-- Tokyo --></p><p>
{{ colors[0] }} <!-- Red --></p></div>属性のデータバインディング v-bind
属性のデータバインディングにはv-bindディレクティブを使用する。
<divid="app"><inputtype="text"v-bind:value="message"/></div>条件分岐 v-if v-show
v-ifの場合、要素はDOMレベル削除される。
頻繁に表示・非表示を繰り返す場合、描画コストが高くなる。
<divid="app"><pv-if="toggle"><!-- 表示されない -->
Hello
</p></div><script>varapp=newVue({el:'#app',data:{toggle:false}})</script>v-showの場合、条件を満たさない時はdisplay: noneで非表示させる。
表示を頻繁に切り替える際はv-ifと比べて描画コストの点で有利になる。
<divid="app"><pv-show="toggle">
Hello
</p></div>繰り返し処理 v-for
v-forディレクティブは繰り返し処理を行う事ができる。
試しにdataオプションに配列colorsを定義する。
varapp=newVue({el:'#app',data:{colors:['Red','Green','Blue']}})v-forを使って配列の値を一つずつ取り出して繰り返し処理を行う。
配列名は複数形、繰り返し処理で使う値は単数形にしておくとコードが読みやすくなる。
<divid="app"><ol><liv-for="color in colors"> {{ color }
</li></ol></div><divid="app"><ol><li>Red</li><li>Green</li><li>Blue</li></ol></div>オブジェクトを繰り返し処理する
dataオプションにuserオブジェクトを定義する
varapp=newVue({el:'#app',data:{user:{firstName:'Daiki',LastName:'Tsuneta',age:28}}})value in オブジェクト名でオブジェクトの中身を一つずつ取り出して繰り返し処理を行う
valueは任意の値を設定できる。vでも動く。
<divid="app"><ul><liv-for="value in user">{{ value }}</li></ul></div><divid="app"><ul><li>Daiki</li><li>Tsuneta</li><li>28</li></ul></div>オブジェクトのキーも一緒に表示させたい時はv-for="(値, キー) in オブジェクト名"で表示させる事ができる。
第一引数が値、第二引数がキーになっているので注意。
<ul><liv-for="(value, key) in user">
{{ key }} : {{ value }}
</li></ul>イベント処理 v-on
v-onディレクティブはイベント処理の基本。
ボタンをクリックしたら現在時刻を表示させるプログラムを書いてみる。
<divid="app"><!-- クリックするとonclickメソッドが呼び出される --><buttonv-on:click="onclick">
Click!
</button><p><!-- 現在時刻を表示させるプロパティを定義 -->
{{ now }}
</p></div>js側でdataオプションにプロパティnowの設定と、methodsオプションにメソッドを定義する。
メソッドはメソッド名: function() {..処理..}で記述する。
this.nowでプロパティnowにアクセスできる。
varapp=newVue({el:'#app',data:{now:''// nowに空の文字列を設定},methods:{onclick:function(){this.now=newDate().toLocaleString()}}})双方向データバインディング v-model
v-modelは双方向にデータバインディングする事ができる
これは実際に手を動かした方が分かりやすいかもしれない。
まずmessageプロパティを用意します。
varapp=newVue({el:'#app',data:{message:'Hello Vue.js!'}})後はv-model="プロパティ名"で双方向にデータバインディングされる。
具体的には、下記のinputの値を変更すると{{ message }}の値もリアクティブに書き換わる。
<divid="app"><p><inputtype="text"v-model="message"></p><p>
{{ message }}
</p></div>文字数カウントとかもめっちゃ楽。
<p><inputtype="text"v-model="message"></p><p>文字数{{ message.length }}
</p>コンポーネント
よく使う機能を、再利用可能なコンポーネントにできる。
コードの見通しが良くなり、開発効率の改善に繋がる。
Vue.componentメソッドを使用する。
// Vueインスタンス作成よりも前に記述する// Vue.component(コンポーネント名, { コンポーネントの定義情報 })`で作成Vue.component('hello-component',{template:'<p>Hello</p>'})varapp=newVue({el:'#app',--以下省略--)}コンポーネントの呼び出しはテンプレート名を記述するだけ。
<divid="app"><hello-component></hello-component><!-- <p>Hello</p> --><hello-component></hello-component><!-- <p>Hello</p> --></div>まとめ
Vue.js 楽しい