Vue.js初心者が入門としてやったこと(2)

JavaScript, vue.jsvue.js

vue.jsを使って2週間ほどが経過しましたが、まだわからないこととわかったことがあると思いますので、書いていきたいと思います。vue.jsについてこれまで書いてきたことについてはこちらを参照してください。

vue.jsを使うことになったので調べてみた（１）
Vue.js初心者が入門としてやったこと(1)
vue.jsのv-forを使ってみた
vue.jsのリアクティブについて調べてみた

Vue インスタンスについて

全てのVueアプリケーションは、Vue関数を使うことで新しいVueインスタンスを作ることができる。

var vueObj = new Vue({
//オプション
})

プロパティ

Vueインスタンスでは、自身のdataの値を持つ

  • $el
    Type:HTMLElement
    Read only
    DOMを指定する
  • $data
    Type:Object
    データオブジェクトでアクセス時に、$dataは省略できる
var vueObj = new Vue({
el: '#id',
data:{
    status:false,
}
});

ここでelの部分でDOMを指定しているので、idがidとなっているものを取得してきて、statusというプロパティがfalseがデフォルトの状態となっている。

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

Vueインスタンスが作成されたり、更新されたりするタイミングでフックさせる処理を定義することができる。

created

  • 型：Function
  • インスタンスが作成されたあとに同期的に呼ばれる。この段階では、インスタンスは、データ監視、算出プロパティ、メソッド、watch/eventコールバックらのオプションのセットアップ処理が完了したことを意味する
var vueObj = new Vue({
el: '#id',
data:{
    status:false,
},
created: function(){
    console.log(An instance was created!)
}
});

destroyed

  • destroyed
  • 型：Function
  • Vueインスタンスが破棄されたあとに呼ばれる
var vueObj = new Vue({
el: '#id',
data:{
    status:false,
},
created: function(){
    console.log('An instance was created!')
}
destroyed: function(){
    console.log('An instance was destroyed')
}
});

最後に

vue.jsの基本的なことですが、わからないことがまだまだたくさんありますので、少しずつここに書いて覚えていきたいと思っています。

JavaScript, vue.jsvue.js