ドキドキVue.js①

急遽、Vue.jsをやる必要が出てきたので、勉強開始。

まず、Vue.jsとは関係ないが、JSのクラスの定義に関して

Class クラス名 (){

    constructor(name, age){

      this.name =name:

      this.name =age:

    }

}

といった感じ。

プロパティを保持するときは、上記のようにconstructorで定義をするみたい。

ここから、Vue.jsで学んだこと

①Vueのコンポーネントに関して

• el：名前の定義。セレクタのバインド
• data：データ
• methods：メソッド
• filters：データを変更せず、表示するときのみデータを加工する
• computed：値が変わったときに発生
• watch：データを監視する

以上が必要なコンポーネント。

それぞれ、簡単な記載例を書く。

var app = new Vue({

   el:"#app",

  data:{

      msg:"メッセージ"

   },

   methods:{

       methodA : function(){}

   },

   fileters:{

      fileterA: function(){}

   },

   computed:{

      computedA:function(){}

   },

   watch:{

      watchA:function(){}

   }

})

②バインドに関して

属性・スタイル・CSSにバインドさせる方法がそれぞれ異なる。

　属性にバインド：<要素名 v-bind:属性名="プロパティ名">

--html--

<div id="app">

<input type="text" v-bind:value="msg">

--js--

var app = new Vue({

   el:"#app",

  data:{

      msg:"メッセージ"

   }

})

　スタイルにバインド：<要素名 v-bind:style="CSSのプロパティ名(キャメルケース): アプリのプロパティ名">

--html--

<div id="app">

<p v-bind:style="{fontSize:pSize}">

--js--

var app = new Vue({

   el:"#app",

  data:{

      pSize:10px

   }

})

　クラスをバインドする：<v-bind:class="{クラス名:クラス名を出力する条件式"}

--html--

<div id="app">

<p v-bind:class="{captitalize:isCheck}">

--js--

var app = new Vue({

   el:"#app",

  data:{

      isCheck:true

   }

})

--css--

p.captitalize{text-transform:capitalize;}

とりあえず、今日はここまで