Vue JSの基礎、テンプレート構文

• テンプレート構文: テンプレートを書くための構文。テンプレート構文を用いて、テンプレートを書いている。 htmlコードを書いているのではない。

• 2重中括弧: dataの中にあるプロパティーからkeyを書くことで、valueを表示させている。 javascriptの構文をhtmlの括弧の中に書くことができる。 三項演算子なども記述可能。

2.11

Vue.jsの専用の属性は、v-から始まる 属性のことをディレクティブと呼ぶ。 section_2_11_index.htmlを参照すること。

2.12

• v-once: 一度しか描画させない属性。 詳しくは、下記URLを参照 section_2_12_index.html

2.13

• v-html: htmlタグを適応してくれる属性。XXS脆弱性の可能性があるので、取扱には注意する。
• XXS脆弱性: https://www.shadan-kun.com/blog/measure/1052/

詳しくは、下記URLを参照 section_2_13_index.html

2.14

• v-bindディデクティブについて
• HTMLの属性を対象にデータの紐付けをすることができる属性
• v-bindは:の後ろに引数を持つことができる。 a :hrefのようにv-bindを省略することも可能。どちらの記述方法でも良いが、記述を統一する方が良い。 参考
  section_2_14_index.html

2.15

• 角括弧を使うことで、HTML属性も動的に変更することができる。
• 引数を追加したい場合は、引数の後ろにスペースを追加して記述することで適応される。
• hashでkey: valueのように書いて冗長にならないようにすることもできる。 section_2_15_index.html

2.16

• v-onディレクティブ => DOMが提供しているイベントが発生した瞬間に、関数などを実行したい場合に利用する。
• methods => 関数を管理するもの。処理は、原則script内に記載する。無名関数を用いる。 section_2_16_index.html

2.17

• v-onの引数となるDOMイベント一覧

2.18

• イベントオブジェクトの取得方法
  • イベントオブジェクトとは => イベントの情報が入ったオブジェクト。イベントに関する全ての情報が入ったオブジェクトがイベントオブジェクト。
  • どのようにして、イベントオブジェクトを取得するのか。 => 関数に引数を記述することで、イベントオブジェクトが取得できる。慣習的に、eventとなっているようなので、適当な命名はしないこと。 参考 section_2_18_index.html