ことはじめ

実験したり勉強したり。

Vue.jsことはじめ2

今日やったこと

学んだこと

結構番所に近いけどただ読むだけだと本当に覚えないなという印象

Viewインスタンスの作成

  • VueのデザインはMVVMパターンから部分的に影響を受けているので慣例としてインスタンス名がvmになっている
  • Vueアプリケーションはnew Vueで作成されたRoot Vue Instanceで構成される
  • Vueインスタンスが作成されると自身のdataオブジェクトのすべてのプロパティをリアクティブシステムにつかえる
  • dataのプロパティはインスタンスが作成された時に存在していた場合にのみリアクティブ

インスタンスライフサイクルフック

  • Vueインスタンスは生成時に一連の初期化を行う
    • データの監視のセットアップ テンプレートのコンパおる DOMへのインスタンスのマウント データが変化した時のDOMの更新
  • ライフサイクルの特定の段階でユーザーが自身のコードを追加する、いくつかのライフサイクルフックと呼ばれる関数を実行する
    • iOSでいうviewDidLoadみたいな感じかな
    • created
    • mounted
    • updated
    • destroyed

テンプレート構文

展開

テキスト

最も基本的な形は二十中括弧をりお湯したテキスト展開

<span>Message: {{ msg }}</span>

生のHTML

v-htmlディレクティブを使うことで実際のHTMLを出力することも可能

<div v-html="rawHTML"></div>
var vm = new Vue({
        el: '#app',
        data: {
            rawHtml: '<h1>hello</h1>',
        }
    });

XSS脆弱性を容易に引き起こすのでウェブサイトで動的に任意のHTMLを描画することは超危険

属性

HTMLの属性をデータバインディングするときはv-bindを使う

<img v-bind:src="image"></img>
var vm = new Vue({
    el: '#app',
    data: {
        image: 'http://img.allabout.co.jp/gm/article/7182/mainimg.jpg'
    }
});

v-bindは省略可能

<img :src="image"></img>

JavaScript式の使用

すべてのデータバインディング内部でJavaScriptを完全にサポートする

ディレクティブ

  • ディレクティブはv-から始まる特別な属性。
  • ディレクティブ属性値は単一のJavaScriptを期待する(v-forは例外)
  • ディレクティブの仕事は属性値の式が変化した時にリアクティブに副作用をDOMに適用すること

省略記法

v-bind

<a :href="url"></a>

v-on

<a @click="doSomething"></a>