# 速習Vue.js 速習シリーズ ## Metadata * Author: [山田祥寛](https://www.amazon.comundefined) * ASIN: B07BS62Z94 * Reference: https://www.amazon.com/dp/B07BS62Z94 * [Kindle link](kindle://book?action=open&asin=B07BS62Z94) ## Highlights el：Vue.jsを適用する要素 data：データオブジェクト — location: [222](kindle://book?action=open&asin=B07BS62Z94&location=222) ^ref-20839 --- が、{{...}}には任意のJavaScript式を表すことも可能 — location: [234](kindle://book?action=open&asin=B07BS62Z94&location=234) ^ref-51901 --- Vue.jsでは、これらの組み込みオブジェクトをMustache式でも利用できるよう、あらかじめ登録しているからです（よって、Vue.jsが登録していない自前のオブジェクトに、{{...}}からアクセスすることはできません）。 — location: [238](kindle://book?action=open&asin=B07BS62Z94&location=238) ^ref-33772 --- ｛｛...｝｝式を無効化する - v-pre — location: [252](kindle://book?action=open&asin=B07BS62Z94&location=252) ^ref-63850 --- 文字列をHTMLとして埋め込む - v-html — location: [260](kindle://book?action=open&asin=B07BS62Z94&location=260) ^ref-53257 --- 属性に対して式の値を埋め込むのに{{...}}は利用できません。たとえば、以下のコードは正しく動作しません。 <a href="{{ url }}">サポートサイト</a — location: [288](kindle://book?action=open&asin=B07BS62Z94&location=288) ^ref-64088 --- 「v-bind:属性名="値"」 — location: [300](kindle://book?action=open&asin=B07BS62Z94&location=300) ^ref-41781 --- なお、v-bindはよく利用する、という理由から、省略構文も用意されています。リストの太字部分は、以下のように表しても同じ意味です。 <a :href ="url">サポートサイト</a — location: [305](kindle://book?action=open&asin=B07BS62Z94&location=305) ^ref-51875 --- // 演算した結果を取得する算出プロパティ 　computed: { 　　localEmail: function () { 　　　return this.email.split('@')[0].toLowerCase(); 　　} — location: [332](kindle://book?action=open&asin=B07BS62Z94&location=332) ^ref-48717 --- 算出プロパティとは、言うなれば、既存のプロパティを演算（算出）した結果を取得するためのゲッター（getter）です。computedパラメーター配下に「プロパティ名: 関数」の形式で指定します（もちろん、複数の算出プロパティを列挙しても構いません）。 — location: [337](kindle://book?action=open&asin=B07BS62Z94&location=337) ^ref-26665 --- メソッドが再描画（＝この場合であれば現在日時の書替）に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティ（いわゆる「this.～」で表される値）が変更された場合にのみ評価される — location: [388](kindle://book?action=open&asin=B07BS62Z94&location=388) ^ref-21450 --- v-on:イベント名="..." — location: [413](kindle://book?action=open&asin=B07BS62Z94&location=413) ^ref-62178 --- v-onの省略構文 　v-bindと並んで、v-onはよく利用することから、省略構文が用意されています。先ほどのevent.htmlを省略構文で書き換えると、以下のようになります。 <button @click="onclick">クリック</button — location: [426](kindle://book?action=open&asin=B07BS62Z94&location=426) ^ref-50301 --- 式の真偽に応じて表示／非表示を切り替える - v-if — location: [875](kindle://book?action=open&asin=B07BS62Z94&location=875) ^ref-61223 --- 複数の分岐を表現する - v-else-if — location: [909](kindle://book?action=open&asin=B07BS62Z94&location=909) ^ref-29568 --- 異なる要素のセットを繰り返し出力する - template要素 — location: [1074](kindle://book?action=open&asin=B07BS62Z94&location=1074) ^ref-22854 --- 属性に値をバインドする - v-bind — location: [1154](kindle://book?action=open&asin=B07BS62Z94&location=1154) ^ref-41994 --- 値を一度だけバインドする - v-once — location: [1193](kindle://book?action=open&asin=B07BS62Z94&location=1193) ^ref-12062 --- 要素にスタイルプロパティを設定する - v-bind:style — location: [1211](kindle://book?action=open&asin=B07BS62Z94&location=1211) ^ref-26942 --- 要素にスタイルクラスを設定する - v-bind:class — location: [1274](kindle://book?action=open&asin=B07BS62Z94&location=1274) ^ref-2917 --- 式による画面のチラツキを防ぐ - v-cloak — location: [1328](kindle://book?action=open&asin=B07BS62Z94&location=1328) ^ref-15061 --- ［構文］componentメソッド Vue.component( id, def) 　id：コンポーネントの名前 　def：コンポーネントの定義情報 — location: [1366](kindle://book?action=open&asin=B07BS62Z94&location=1366) ^ref-56872 --- コンポーネントでのdataパラメーターは 関数として指定 しなければならない点に注意してください。関数は、プロパティ群（オブジェクト）を返すようにします。 — location: [1466](kindle://book?action=open&asin=B07BS62Z94&location=1466) ^ref-55871 --- ルール名 概要 type データ型（String、Number、Boolean、Function、Object、Array、Symbolのいずれか） required プロパティが必須か default 値が指定されなかった場合の既定値 validator カスタムの検証関数 — location: [1480](kindle://book?action=open&asin=B07BS62Z94&location=1480) ^ref-62776 --- プロパティが複数の型を取りうる場合には（たとえばNumberかStringのように）型名を配列として渡してください。「yourName: [ String, Number ]」のように、です。 — location: [1494](kindle://book?action=open&asin=B07BS62Z94&location=1494) ^ref-41558 --- defaultパラメーター（既定値）に配列／オブジェクトを指定する場合には、既定値そのものではなく、既定値を返す関数を渡します。 data: { 　type: Object, 　default: function() { — location: [1495](kindle://book?action=open&asin=B07BS62Z94&location=1495) ^ref-52403 --- （1）ディレクティブを定義するのはVue.directiveメソッド — location: [1592](kindle://book?action=open&asin=B07BS62Z94&location=1592) ^ref-33683 --- directive( name, def) 　name：ディレクティブの名前 　def：動作の定義 — location: [1594](kindle://book?action=open&asin=B07BS62Z94&location=1594) ^ref-22726 --- bind： — location: [1599](kindle://book?action=open&asin=B07BS62Z94&location=1599) ^ref-50917 --- update： — location: [1600](kindle://book?action=open&asin=B07BS62Z94&location=1600) ^ref-27596 --- componentUpdated： — location: [1601](kindle://book?action=open&asin=B07BS62Z94&location=1601) ^ref-59656 --- unbind： — location: [1601](kindle://book?action=open&asin=B07BS62Z94&location=1601) ^ref-23497 --- el： — location: [1605](kindle://book?action=open&asin=B07BS62Z94&location=1605) ^ref-36889 --- binding： — location: [1605](kindle://book?action=open&asin=B07BS62Z94&location=1605) ^ref-57381 --- vnode： — location: [1606](kindle://book?action=open&asin=B07BS62Z94&location=1606) ^ref-50277 --- oldVnode： — location: [1607](kindle://book?action=open&asin=B07BS62Z94&location=1607) ^ref-21157 --- プラグインを定義するには、「プラグイン名.install」という静的メソッドを用意するだけです（ — location: [1721](kindle://book?action=open&asin=B07BS62Z94&location=1721) ^ref-45692 --- filter( name, def) 　name：フィルター名 　def：フィルターの挙動 — location: [1727](kindle://book?action=open&asin=B07BS62Z94&location=1727) ^ref-6009 ---