HTMLにJavaScriptを組み込む方法（Vue2）

Vue.jsで画像をループさせる際にimgタグにJSの変数を渡したかったのですが、「あれ、HTMLのタグ内にデータを組み込む方法ってどうやるんだっけ？」となったので、備忘録として残します。

参考：テンプレート構文 - Vue.js

目次

1. Vue.jsではデータバインディングにおいてJavaScript式を用いることが可能
2. HTML内でVue.js（JavaScript）を使える場所
3. 記述のアンチパターン
4. 関数を呼び出すことも可能

VueではデータバインディングにおいてJavaScript式を用いることが可能

Vue ではあらゆるデータバインディングにおいて、JavaScript式のフルパワーを活用することができます

//v-〇〇の中に記述
<div v-for="hoge in hoges">
	`<img :src="`/fuga/${fuga.image}`">`
</div>

//マスタッシュ構文内 {{}}←コレのこと
{{ hoge + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ number.split('').reverse().join('') }}

↑は今いるコンポーネントインスタンスのデータスコープ内で、JavaScript の式として評価されるようです。

HTML内でVue.js（JavaScript）を使える場所

• 任意のVueディレクティブ(v-で始まる特殊な属性)の属性値の中身（上記例ではこちらに該当）
• テキスト展開の内部ではマスタッシュ構文を用いることで可能に

記述のアンチパターン

バインディングには、単一の式しか含められない。

//これらはerror
{{ let hoge = "fuga" }}

{{ if (good) { return hoge } }}

関数を呼び出すことも可能

<span :title="(date)">
  {{ formatDate(date) }}
</span>

※当然ですが、コンポーネント内で定義した関数のみ利用可能です。

JSにあまり触ることなくエンジニアになったため、相当な知識不足を痛感しています。
JSの知識を固め、今人気急上昇のTypeScriptと実務で使うVue.jsを使いこなせるようになって、最強のフルスタックエンジニアになりたいです！とにかく行動あるのみ😌