#33 Vue.jsアウトプット

本日も備忘兼ねた投稿で失礼します。
Udemy「超Vue.js 2 完全パック」の学習をしましたので、自分用にポイントだと感じた部分のみ抜粋して投稿します。動画で説明してくれるため、個人的には理解しやすい内容です。ありがたい！😃
詳細を知りたい方はぜひご購入頂き受講して頂ければと思います！

this

■HTML■
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
 <p>{{sayHi()}}</p>
</div>

■JavaScript■
new Vue({
  el: '#app',
  data: {
    message:　'HelloWorld!'
  },
  methods: {
    sayHi: function() {
  	  return this.message;
    }
  }
})

・インスタンス内でインスタンスのプロパティにアクセスする場合に必ず記述する。今回の場合、JavaScriptファイルの4行目に記述している "message" にアクセスするために、 "return this.message;" という記述をしている。
・HTMLファイルのテンプレート内にはthisの記述は不要

ディレクティブ

v-○○="変数名"

・特別な属性を指す。記述は "v-" から始まり、イコール以降はVue.js内のdata内で定義した変数名を入力する。○○の部分には多くの処理を実行するための記述がある。

v-bind

■HTML■
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
 <a href="{{ url }}">Google</a>
</div>

■JavaScript■
new Vue({
  el: '#app',
  data: {
    url: 'https://google.com',
  }
})

・aタグの様な "属性" に対してプロパティを活用して表示させるための記述。上記のコードの場合、"Google"を押しても検索画面に遷移せずエラーが発生する。

■HTML■
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
 <a v-bind:href="url">Google</a>
</div>

■JavaScript■
new Vue({
  el: '#app',
  data: {
    url: 'https://google.com',
  }
})

・HTMLファイル（3行目）の記述を上記に変更する事でGoogle検索画面へ遷移する。 "v-bind" は引数を取る記述になるため、"v-bind=変数名" ではなく "v-bind:引数"  と記述する。

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

・v-bindの記述は上記の様に "v-bind" を省略して記述する事も出来る

■HTML■
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
 <a :[attribute]="url">Google</a>
</div>

■JavaScript■
new Vue({
  el: '#app',
  data: {
    url: 'https://google.com',
    attribute: 'href',
  }
})

・上記HTMLファイル（3行目）、JavaScript（5行目）の記述をする事でhrefも動的に表現する事も可能。

■HTML■
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
 <a :[attribute]="url">Google</a>
 <a v-bind="{href: urlTwitter, id: number}">Twitter</a>
</div>

■JavaScript■
new Vue({
  el: '#app',
  data: {
    url: 'https://google.com',
    urlTwitter: 'https://twitter.com',
    number: 31,
    attribute: 'href'
  }
})

・上記HTMLファイル（4行目）、JavaScript（5・6行目）の記述をする事でオブジェクト形式で表現する事も可能。

■HTML■
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
 <a :[attribute]="url">Google</a>
 <a v-bind="twitterObject">Twitter</a>
</div>

■JavaScript■
new Vue({
  el: '#app',
  data: {
    url: 'https://google.com',
    attribute: 'href'
    twitterObject: {
      href: 'https://twitter.com',
      id: 31
    }
  }
})

・上記HTMLファイル（4行目）、JavaScript（6〜9行目）の記述を変更する事でオブジェクト形式の可読性を高める事も出来る。

インプットする→紙に書き出して要約する→アウトプットのためにコードを記述する→理解を定着させる手順で効率良く学習していきます！

本日も最後まで読んで頂きありがとうございました🙇‍♂️