プログラミング

• Web

Vue.js の基本

vue.js の基本

vue.js の読み込み

CDN を利用する方法が一般的

ルートのテンプレートを作成

マウント対象の要素にIDを指定

Vue のオプションにマウントする要素のIDを指定

var app = new Vue({ el: ‘#app’ })

データバインディング

Vue の data オプションにプロパティを設定

var spp = new Vue({ el: ‘#app’, data: { message: ‘Hello, vue.js!’ } })

テンプレートにマスタッシュ構文でプロパティを指定

ディレクティブ

v- で始まる特別なアトリビュートのこと。

v-bind

要素のアトリビュートにプロパティを指定

v-if

要素の表示、非表示を切り替える（非表示の場合、要素そのものが消える）

hoge

v-show

要素の表示、非表示を切り替える（css の display プロパティが変わる）

hoge

v-for

オブジェクトの繰り返し

colors : [‘red’,’green’,’blue’]

user : { firstName : ‘Taro’, lastName : ‘Yamada’, age : 28 }

• :

v-on

イベント処理

methods: { onclick: function() { ・・・・・・ } }

v-model

双方向データバインディング 要素のアトリビュートにバインドするdataオブジェクトのプロパティ名を指定すると、 dataオブジェクト経由で要素の値を同期できる。

コンポーネント

ページを構成するUI部品

コンポーネントの定義

Vue.component(‘hello-component’,{ template:’<p>Helllo</p>’ })

コンポーネントの使用