Vue.jsを理解するために

＃概要
Vueの構成要素を理解するためにVueの構成要素とディレクティブ、算出プロパティ、メソッドについてわかりやすく記載しました。

#Vue.jsの構成
基本的な、Vue.jsの構成についての復習です。

main.js

let app = new Vue({
  el:'#app',
  data:{
    message:'こんにちわ！'
  }
});

1,インスタンス化

main.js

let app =new Vue

Vue.jsを起動するためには、Vueクラスをインスタンス化する必要があります。
letで宣言していますが、生成したインスタンスを後から参照する必要がなければ必要ありません。

2,動作オプション
Vue(オプション)動作オプション
HTMLから参照できる値を格納オブジェクトです。プロパティ名:値とします。
el:Vueの適用要素
data:データオブジェクト
message:dataオブジェクトのmessageプロパティです。データは上記ではこんにちわです。

#HTMLの構成

index.html

<div id="app">
  <h1>{{ message }}</h1>
</div>

id属性▶Vueの適用範囲です。
{{}}▶マスタッシュ構文。テンプレートからデータオブジェクトをにアクセスします。複雑な条件分岐などは出来ません。

#Vuejsを理解するために

#①ディレクティブ
イベントを表します。[v-]から始まります。

マスタッシュ構文は式の値を埋め込むことが出来ません。
そこで、属性値の操作はv-bindを使用します。

main.js

data:{
  url:'https://qiita.com/akari_0618/items/5a9e9d565b47c5de2e4d'
}

データオブジェクトにurlプロパティを追加します。

index.html

<div id="app">
  <a v-bind:href="url">GO</a>
</div>

v-bind:属性名=値　ディレクティブ名と属性名はコロンで区切ります。
コロンの後方はディレクティブの引数です。

#②ブール属性
属性名を指定するだけで意味がある属性のことを論理属性またはブール属性といいます。これらの値を紐付けるためにはtrue,falseで表します。

index.html

<input type="button" value="クリック" v-bind:disabled="flag">

main.js

flag:false

#③算出プロパティ

算出プロパティとは、既存のプロパティを演算した結果を取得するためです。
算出プロパティの元では、[this.プロパティ名]でアクセスすることができます。
定義側はメソッドですが、参照はプロパティです。

index.html

<p>{{loEmail}}</p>

main.js

data:{
  email:'suzuki-r.e @ddddd.ne.jp'
},
computed:{
  loEmail:function(){
  return this.email.split('@')[0].toLowerCase();
  }
}

*split(r)
正規表現が一致する場所で文字列を分割して配列にします。

#④メソッド

上記の算出プロパティはメソッドでも表すことが出来ます。
ただし、methodで表した場合は

index.html

<p>{{loEmail()}}</p>

プロパティでは無いため、()で呼び出します。
methodとは、Vue内で扱える機能を定義する場所です。
他の関数から呼び出したり、HTML内で呼び出すことが出来ます。