一橋生なつおのブログ

一橋生起業家なつおのブログ

なつおの生活や考え方について書いています。

Vue.js 基本

特徴

・双方向データバインディング

・MVVM(Model-View-ViewModel)

 

メリット

・大抵のjQueryで実装できるが、よりコード量を少なく見やすく書ける

・ユーザーのアクションによってデータを動的に変化させるのが得意

 

・ディレクティブ…vから始まる属性

コンポーネント…要素たち

 

・View <div id="app">/div>などUI要素

・Model データ

var Model={

  name: "natsuo",

  age: "21"

}

・View-Model ビューとデータを結びつける

var vm=new Vue({

  el:"#app",

data: Model

})

 

・v-model

双方向データバインディングの基本。formなどにしこんで、他の箇所で{{ name }}等のようにして表示。dataで初期値

 

・v-for

配列データを扱うときに使用。data[0], data[1]などのようにしてもよい。v-for=data in datasとforeachのようにして使うとまとめて表示できる

 

・v-on

イベント発火。よく使うので@で代替可能。@clickや@submitなど。Vueメソッドを呼びだしたり、直接JSの式を使うこともできる。

 

・@submit.prevent

submitしたときに動作をさせない。動作するとリロードしてしまうため。method: function(e){e.preventDefault}の省略版。

 

・push

データに追加。

 

・splice

データから削除。splice(index, 1)のようにして使う。indexはデータの配列の番号の変数。

 

・v-bind

クラスを操作。CSSを動的に扱う。v-bind:class {active: isActive}のように使う。isActiveがtrueのときにactiveクラスを有効にするという意味。

 

・v-show

条件的に要素を表示。v-show="条件"

 

・v-if, v-else, v-else-if

<div v-if="isOK">Hello</div>

<div v-else>Bye</div>

isOKがtrueのときHello, falseのときBye

 

・computed

算出プロパティ。依存関係に基づいてキャッシュする。

 

・オブジェクト=連想配列

 

watch

変更があったときに動作。ネストされたものも有効にしたいときはhndlerを使う。(deep watcher)

 

・mounted

インスタンスが生成されたときに実行。他にもcreatedなど類似のものもある。

 

・Vue.extend

コンポーネントを継承。カスタムコンポーネントを使いたいときに使う。data, elは継承されないので、初期値を設定したい場合は関数で。親コンポーネントでcomponents:~として登録。extendで定義。templateでオリジナルタグ。

 

・props

コンポーネントと子コンポーネントで通信してデータをやり取りしたいときに使う。